Exemples et précautions de développement de canevas de mini-programme WeChat

Applet WeChat wxcanvas

Le téléphone de test est l'IPHONE6 et la version de l'outil de développement est 0.10.102800. Il en va de même pour la version 0.11.112301 des outils de développement

Le canevas du mini-programme WeChat et le canevas non-h5 présentent de nombreuses différences. Ci-dessous, le canevas du mini-programme WeChat s'appelle wxcanvas

<.>Ce qui suit sont tous à moi. Quelques résultats de tests, 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 spécifiquement

3 Changer la largeur et la hauteur du style de wxcanvas ne change pas la taille de ; 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. qui enregistre les appels de méthode et est utilisé pour générer et enregistrer un 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. Notez que

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

effacera le canevas par défaut. réfléchissez-y, vous devez

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

7 "Points clés"

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

Remarque, Disable-scroll="true" et bindtouchmove Ce n'est que lorsque ="cvsMove" existe en même temps que l'on peut empêcher la page de bouger

Avec l'écriture ci-dessus. méthode, ccvsMove et cvsMove seront déclenchés.

ccvsMove renvoie un objet d'événement tactile normal, il y a pageX, clientX, etc.,

cvsMove renvoie l'objet d'événement canvasTouch, il n'y a pas de pageX. , clientX, seulement x, y

8.

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

Vous pouvez effacer le canevas et l'état du canevas

9. La rotation de l'échelle et les autres statuts du canevas continueront avec le dernier statut lorsque reserve:true

10 contexte Le tableau renvoyé par .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

11 Lorsque wx.drawCanvas, context.drawImage est sur le téléphone. ne peut pas être dessiné sur les outils de développement informatique

12.wx.canvasToTempFilePath

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

wx.canvasToTempFilePath est. un objet comprenant canvasID, success, fail, complete, similaire à 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);
       }
      });

Merci d'avoir lu, j'espère que c'est possible aidez tout le monde, merci pour votre soutien Support de ce site !

Pour plus d'exemples de développement de canevas de mini-programme WeChat et d'articles connexes, veuillez prêter attention au site Web PHP chinois !