Explication détaillée de wxcanvas dans le développement de petits programmes

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

canvas le canevas non-h5 dans le mini-programme WeChat présente de nombreuses différences, voici le mini-programme WeChat Le canevas du programme s'appelle wxcanvas

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

1.wxcanvas, contrairement à h5canvas, a largeur et hauteur attribut et le style de largeur et de hauteur. 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 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. 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"

<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 du déplacement, catchtouchmove ne fonctionne pas

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.

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

peut effacer le canevas et l'état du canevas

9. L'échelle de traduction, la rotation et les autres statuts du canevas. Lorsque la réserve est vraie, le dernier état sera continué

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 l'image

11. .drawCanvas, context.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

Officiel Il n'y a qu'une seule ligne dans le document, à l'origine

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

[Recommandations associées]

1

Partagez ce que je pense des mini-programmes WeChat

2

Utilisez un exemple de code html5. pour créer un programme de dessin utilisant Canvas et JavaScript

3

L'avenir et le développement des mini-programmes front-end et WeChat

4. développement de programme Exemple de mise en œuvre simple de l'onglet

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!