Beispiele und Vorsichtsmaßnahmen für die WeChat Mini-Programm-Canvas-Entwicklung

WeChat-Applet wxcanvas

Das Testtelefon ist IPHONE6 und die Entwicklertool-Version ist 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

Das Folgende ist alles von mir. Ein paar Testergebnisse, bitte geduldig lesen:

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.

2 Stellen Sie sich wxcanvas einfach als ein p vor und Höhe. Es wird angezeigt, oder es wird hier neu gezeichnet, aber ich weiß nicht, wie ich es umsetzen soll.

3 Das Ändern der Breite und Höhe des Stils von wxcanvas ändert sich nicht 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 Zeichnet Methodenaufrufe auf, die zum Generieren und Aufzeichnen des Zeichenverhaltens-Aktionsarrays verwendet werden. 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

6. Beachten Sie, dass

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

die Leinwand standardmäßig löscht Denken Sie darüber nach, Sie müssen

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

7 🎜>

Hinweis: „disable-scroll="true" und bindtouchmove können nur dann verhindert werden, wenn „cvsMove“ gleichzeitig vorhanden ist.

Mit der obigen Schreibweise funktioniert es nicht Methode, sowohl ccvsMove als auch cvsMove werden ausgelöst.

ccvsMove gibt ein normales Touch-Ereignisobjekt zurück. Es gibt pageX, clientX usw.,

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

cvsMove gibt das canvasTouch-Ereignisobjekt zurück, es gibt kein pageX , clientX, nur x, y

8.

Sie können die Leinwand und den Status der Leinwand löschen

9. Der von .getActions() zurückgegebene Kontext setzt den letzten Status fort, wenn Sie ihn ausdrucken , Sie werden feststellen, dass Sie das Array direkt ändern können, um die Zeichenaktion zu ändern

11 Wenn wx.drawCanvas, context.drawImage auf dem Telefon ist, kann es gezeichnet werden kann nicht auf Computerentwicklungstools gezeichnet werden

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

12.wx.canvasToTempFilePath

Es stellt sich heraus, dass der Parameter

wx.canvasToTempFilePath nur eine Zeile enthält ein Objekt einschließlich „canvasID“, „success“, „fail“, „complete“, ähnlich wie „wx.saveFile“ Helfen Sie allen, vielen Dank für Ihre Unterstützung. Unterstützung von dieser Seite!

Weitere Beispiele für die WeChat-Miniprogramm-Canvas-Entwicklung und verwandte Artikel finden Sie auf der chinesischen PHP-Website!