À propos du développement du canevas du mini programme WeChat

Cet article présente principalement des informations pertinentes sur les exemples de développement et les précautions de l'applet WeChat wxcanvas. Ici, nous comparons le canevas WeChat et le canevas dans H5, et expliquons les précautions. Les amis dans le besoin peuvent s'y référer

WeChat. applet wxcanvas

Le téléphone de test est l'IPHONE6, version 0.10.102800 de l'outil de développement. 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

<.>

ci-dessous 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 avoir besoin de l'effacer

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

"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>

Notez que Disable-scroll="true" et bindtouchmove="cvsMove" existent en même temps pour empêcher la page de bouger Catchtouchmove. ne fonctionnera pas

Dans la méthode d'écriture ci-dessus, ccvsMove et cvsMove seront déclenchés,

ccvsMove renvoie des objets d'événement tactiles ordinaires, y compris pageX, clientX, etc.,

cvsMove renvoie les objets 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 le statut du canevas

9. La rotation de l'échelle et les autres statuts du canevas sont en réserve :true continuera à partir du dernier état

10. Le tableau renvoyé par context.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 les actions de dessin

11. 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.canvasToTempFilePath

Dans le document officiel Il n'y a qu'une seule ligne.

Le paramètre wx.canvasToTempFilePath est un objet comprenant CanvasID, Success, Fail et Complete, qui est similaire à wx.saveFile ; 🎜>

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

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

Comment envoyer des modèles de messages dans le mini-programme WeChat

Deux types de pages de renvoi dans WeChat mini méthode du programme

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!