Detailed explanation of wxcanvas in small program development

The test phone is IPHONE6, developer tool version 0.10.102800

canvas in the WeChat applet has many differences with non-h5 canvas. The following is the WeChat applet The canvas of the program is called wxcanvas

The following are all the useful information that I tested little by little. Please read patiently:

1.wxcanvas does not have width and ## like h5canvas. #heightAttribute and the style of width and height. It only has a style, which can be understood as a box;

2. Don’t think of wxcanvas as a real H5canvas, just think of it as a p. Things that draw ranges also exist. Change the width and height. It is displayed, or there is redrawing here, but I don’t know how to implement it;

3. Changing the width and height of the style of wxcanvas does not change the size of the things on the original canvas;

4. The enlargement and reduction in the css transform transformation cannot change the size of things on the original canvas

5. Official statement: context is just a container that records method calls, used to generate and record drawing behaviors. actions array. There is no corresponding relationship between context and . The drawing action array of a context-generated canvas can be applied to multiple .

In fact, after context.getActions(), the information in the context will be cleared. If you want to reuse it, you need var temp=context.getActions() to save the operation array before it can be reused in wx .drawcanvas;

6. Note

wx.drawCanvas({
　　canvasId: 'target',
　　actions: context.getActions()
});

The canvas will be cleared by default. If you don’t want to clear it, you need

wx.drawCanvas({
    canvasId: 'target',
    actions: context.getActions(),
    reserve:true
});

7.《Key Points》

<canvas disable-scroll="true" catchtouchmove="ccvsMove" bindtouchmove="cvsMove" canvas-id="target" id="target" style=&#39;width:{{width}}px;height:{{height}}px&#39;></canvas>

Note that disable-scroll="true" and bindtouchmove="cvsMove" exist at the same time to prevent the page from moving. Catchtouchmove will not work.

With the above writing method, both ccvsMove and cvsMove will be triggered,

ccvsMove returns a normal touch

eventObject, including pageX, clientX, etc.

cvsMove returns a canvasTouch event object, without pageX, clientX, Only x, y

8.

wx.drawCanvas({
    canvasId: 'target',
    actions: [],
    reserve:false
});

can clear the canvas and the status of the canvas

9. The scale tranlate rotate and other states of the canvas will continue when reserve:true The status of times

10. The array returned by context.getActions() is very useful. When you print it out, you will find that you can understand the contents inside. You can directly modify the array to change the drawing actions

11. When wx.drawCanvas, context.drawImage can be drawn on the mobile phone, but cannot be drawn on the computer development tool

12.wx.canvasToTempFilePath

There is only one line in the official document, originally

wx.canvasToTempFilePath参数为一个对象包括canvasID,success,fail,complete，和wx.saveFile差不多；

            wx.canvasToTempFilePath({
              canvasId: 'target',
              success: function success(res) {
                wx.saveFile({
                  tempFilePath: res.tempFilePath,
                  success: function success(res) {
                    console.log('saved::' + res.savedFilePath);
                  },
                  complete: function fail(e) {
                    console.log(e.errMsg);
                  }
                });
              },
              complete: function complete(e) {
                console.log(e.errMsg);
              }
            });

【Related Recommendations】

1.

Share what I think about WeChat mini programs

2.

Use html5 canvas and Sample code for creating a drawing program using JavaScript

3.

The future and development of front-end and WeChat mini programs

4.

Options for mini program development Simple implementation example of card

The above is the detailed content of Detailed explanation of wxcanvas in small program development. For more information, please follow other related articles on the PHP Chinese website!