Über die Entwicklung des WeChat Mini-Programm-Canvas

In diesem Artikel werden hauptsächlich relevante Informationen zu Entwicklungsbeispielen und Vorsichtsmaßnahmen für das WeChat-Applet wxcanvas vorgestellt. Hier vergleichen wir WeChat-Canvas und Canvas in H5 und erläutern die Vorsichtsmaßnahmen, auf die sich Freunde in Not beziehen können.

WeChat Applet wxcanvas

Das Testtelefon ist IPHONE6, Entwicklertool-Version 0.10.102800. Dasselbe gilt für die Developer Tools-Version 0.11.112301

Die Leinwand im WeChat-Miniprogramm und die Nicht-h5-Leinwand weisen viele Unterschiede auf. Unten heißt die Leinwand des WeChat-Miniprogramms wxcanvas

unten Dies sind alle nützlichen Informationen, die ich nach und nach getestet habe. Bitte lesen Sie geduldig:

1.wxcanvas verfügt nicht über Breiten- und Höhenattribute und Breiten- und Höhenstile wie h5canvas. Es hat nur einen Stil, der als Box verstanden werden kann. Stellen Sie sich wxcanvas nicht als echtes H5-Canvas vor Breite und Höhe werden hier angezeigt, aber ich weiß nicht, wie ich es konkret umsetzen soll.

3 Das Ändern der Breite und Höhe des Stils von wxcanvas ändert nichts der Dinge auf der Original-Leinwand;

4. Die Vergrößerung und Verkleinerung der CSS-Transformation kann die Größe der Dinge auf der Original-Leinwand nicht ändern

5 Container, der Methodenaufrufe aufzeichnet und zum Generieren und Aufzeichnen von Zeichnungsverhaltensaktionen-Arrays verwendet wird. Es gibt keine entsprechende Beziehung zwischen Kontext und . Das Zeichenaktionsarray eines kontextgenerierten Canvas kann auf mehrere angewendet werden.

Tatsächlich werden die Informationen im Kontext nach context.getActions() gelöscht. Wenn Sie sie wiederverwenden möchten, benötigen Sie var temp=context.getActions(), um das Operationsarray zu speichern, bevor es möglich ist in wx .drawcanvas wiederverwendet werden

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

wird die Leinwand standardmäßig löschen Du willst es nicht löschen, du musst

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

7.《Wichtige Punkte》

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

Beachten Sie, dass „disable-scroll="true" und bindtouchmove="cvsMove" gleichzeitig vorhanden sind, um zu verhindern, dass die Seite verschoben wird

Mit der oben genannten Schreibmethode werden sowohl ccvsMove als auch cvsMove ausgelöst.

ccvsMove gibt gewöhnliche Touch-Ereignisobjekte zurück, einschließlich pageX, clientX usw.

cvsMove gibt CanvasTouch-Ereignisobjekte zurück , ohne pageX, clientX, nur x, y

8.

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

Kann die Leinwand und den Status der Leinwand löschen

9. Die Skalierung, Übersetzung, Drehung und andere Zustände der Leinwand werden ab dem letzten Status fortgesetzt.

10 Das von context.getActions() zurückgegebene Array ist beim Drucken sehr nützlich Wenn Sie es herausnehmen, werden Sie feststellen, dass Sie den Inhalt darin verstehen können. Sie können das Array direkt ändern, um die Zeichenaktion zu ändern.

11 Wenn wx.drawCanvas, context.drawImage auf Mobiltelefonen gezeichnet werden kann, ist dies jedoch nicht möglich auf Computerentwicklungstools gezeichnet werden

12.wx.canvasToTempFilePath

Das offizielle Dokument enthält ursprünglich nur eine Zeile

Der Parameter wx.canvasToTempFilePath ist ein Objekt, das die CanvasID enthält , Success, Fail und Complete, ähnlich wie 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);
       }
      });

Das Obige ist der Inhalt dieses Artikels Ich hoffe, es wird für das Lernen aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

So senden Sie Vorlagennachrichten im WeChat Mini-Programm

Zwei Arten von Sprungseiten in WeChat Mini Programmmethode

Das obige ist der detaillierte Inhalt vonÜber die Entwicklung des WeChat Mini-Programm-Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!