Introduction détaillée au canevas du mini programme WeChat

Le téléphone de test est l'IPHONE6, version 0.10.102800 de l'outil de développement

Le canevas de l'applet WeChat est différent du canevas h5 à bien des égards. Le canevas de l'applet WeChat est appelé wxcanvas dans ce qui suit <.>

Voici toutes les informations utiles que j'ai testées petit à petit, veuillez lire patiemment :

1.wxcanvas n'a pas d'attributs de largeur et de hauteur ni de styles de largeur et de hauteur comme h5canvas. Il n'a que du style, qui peut être compris comme une boîte ;

2 Ne considérez pas wxcanvas comme un vrai H5canvas, considérez-le simplement comme un p. Les choses qui dessinent des plages existent également. et la hauteur. Il est affiché, ou il y a un redessin ici, mais je ne sais pas comment l'implémenter

3. Changer la largeur et la hauteur du style de wxcanvas ne change pas la taille du ; les éléments sur le canevas d'origine ;

4. L'agrandissement et la réduction de la transformation CSS ne peuvent pas changer la taille des éléments sur le canevas d'origine

5. enregistre les appels de méthode, utilisés pour générer et enregistrer le tableau d'actions de dessin. Il n'existe aucune relation correspondante entre le contexte et . Le tableau d'actions de dessin d'un canevas généré par le contexte peut être appliqué à plusieurs .

En fait, après context.getActions(), les informations dans le contexte seront effacées. Si vous souhaitez les réutiliser, vous avez besoin de var temp=context.getActions() pour enregistrer le tableau d'opération avant qu'il ne puisse le faire. être réutilisé dans wx .drawcanvas;

6. Remarque

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

Le canevas sera effacé par défaut. Si vous ne pensez pas à l'effacer, vous devez le faire

<. 🎜>

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

7. "Points clés"

Notez que Disable-scroll="true" et bindtouchmove="cvsMove" existent en même temps pour empêcher la page du déplacement, catchtouchmove ne fonctionne pas

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

La méthode d'écriture ci-dessus, ccvsMove et cvsMove sera déclenchée

ccvsMove renvoie un événement tactile normal

objet . , y compris pageX, clientX, etc., cvsMove renvoie un objet événement CanvasTouch, il n'y a pas de pageX, clientX, seulement x, y

8.

peut effacer le canevas et le

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

statut

9. La rotation de l'échelle et les autres états continueront le dernier état lorsque reserve:true

10 Le tableau renvoyé par le contexte. .getActions() est très utile. Lorsque vous l'imprimez, vous constaterez que vous pouvez comprendre le contenu à l'intérieur. Vous pouvez directement modifier le tableau pour changer l'action de dessin

Quand wx.drawCanvas, contexte. .drawImage peut être dessiné sur le téléphone mobile, mais ne peut pas être dessiné sur l'outil de développement informatique

12.wx.canvasToTemp

Fichier

CheminIl n'y a qu'une seule ligne dans le document officiel. Il s'avère que

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);
              }
            });

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!