Home > Web Front-end > JS Tutorial > WeChat mini program canvas development examples and precautions

WeChat mini program canvas development examples and precautions

高洛峰
Release: 2017-02-08 14:54:41
Original
1254 people have browsed it

WeChat Mini Program wxcanvas

The test phone is IPHONE6, and the developer tool version is 0.10.102800. The same goes for the developer tool version 0.11.112301

The canvas in the WeChat applet is different from the h5 canvas. Hereinafter, the canvas of the WeChat applet is called wxcanvas

The following are all mine A little bit of test results, please read patiently:

1.wxcanvas does not have width and height attributes and width and height styles like h5canvas. 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()
});
Copy after login

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
});
Copy after login

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>
Copy after login

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

In the above way of writing, both ccvsMove and cvsMove will be triggered.

ccvsMove returns ordinary touch event objects, including pageX, clientX, etc.

cvsMove returns the canvasTouch event object, there is no pageX, clientX, only x, y

8.

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

Okay Clear the canvas and the state of the canvas

9. The scale tranlate rotate and other states of the canvas will continue from the last state when reserve:true

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

11. When wx.drawCanvas, context.drawImage can be drawn on the mobile phone. In the computer development tool Can't draw

12.wx.canvasToTempFilePath

There is only one line in the official document. It turns out that the

wx.canvasToTempFilePath parameter is an object including canvasID, success, fail, and complete. Similar to 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);
       }
      });
Copy after login

Thanks for reading, I hope it can help everyone, thank you for your support of this site!

For more WeChat mini program canvas development examples and related articles, please pay attention to the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template