Heim > WeChat-Applet > Mini-Programmentwicklung > Detaillierte Erklärung von wxcanvas in der Entwicklung kleiner Programme

Detaillierte Erklärung von wxcanvas in der Entwicklung kleiner Programme

零下一度
Freigeben: 2017-05-26 09:18:22
Original
5265 Leute haben es durchsucht

Das Testtelefon ist IPHONE6, Entwicklertool-Version 0.10.102800

Canvas Nicht-h5-Canvas im WeChat-Miniprogramm weist viele Unterschiede auf, das Folgende ist das WeChat-Miniprogramm Die Leinwand des Programms heißt wxcanvas

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

1.wxcanvas hat im Gegensatz zu h5canvas eine Breite und height Attribut und der Stil von Breite und Höhe. 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;

Hinweis

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

Die Leinwand wird standardmäßig gelöscht, wenn Sie nicht darüber nachdenken, sie zu löschen.

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

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>
Nach dem Login kopieren

Beachten Sie, dass „disable-scroll="true" und bindtouchmove="cvsMove" gleichzeitig vorhanden sind, um die Seite zu verhindern Beim Verschieben funktioniert Catchtouchmove nicht.

Die obige Schreibmethode, ccvsMove und cvsMove werden ausgelöst.

ccvsMove gibt ein normales Touch--Ereignis -Objekt zurück , einschließlich pageX, clientX usw.,

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

8.

wx.drawCanvas({
    canvasId: &#39;target&#39;,
    actions: [],
    reserve:false
});
Nach dem Login kopieren

kann die Leinwand und den Status der Leinwand löschen

9. Die Skalierung übersetzt die Drehung und andere Status der Leinwand. Wenn Reserve:true, wird der letzte Status fortgesetzt

Das Array Wenn Sie es ausdrucken, können Sie das Array direkt ändern, um die Aktion

zu ändern .drawCanvas, context.drawImage kann auf dem Mobiltelefon gezeichnet werden, aber nicht auf dem Computerentwicklungstool

12.wx.canvasToTempFilePath

Offiziell Das Dokument enthält nur eine Zeile. ursprünglich

wx.canvasToTempFilePath参数为一个对象包括canvasID,success,fail,complete,和wx.saveFile差不多;
Nach dem Login kopieren

Detaillierte Erklärung von wxcanvas in der Entwicklung kleiner Programme

            wx.canvasToTempFilePath({
              canvasId: &#39;target&#39;,
              success: function success(res) {
                wx.saveFile({
                  tempFilePath: res.tempFilePath,
                  success: function success(res) {
                    console.log(&#39;saved::&#39; + res.savedFilePath);
                  },
                  complete: function fail(e) {
                    console.log(e.errMsg);
                  }
                });
              },
              complete: function complete(e) {
                console.log(e.errMsg);
              }
            });
Nach dem Login kopieren

[Verwandte Empfehlungen]

1. Teilen Sie mir mit, was ich über WeChat-Miniprogramme halte

2. Verwenden Sie HTML5-Beispielcode zum Erstellen eines Zeichenprogramms mit Canvas und JavaScript

3. Die Zukunft und Entwicklung von Frontend- und WeChat-Miniprogrammen

4 Programmentwicklung Einfaches Implementierungsbeispiel für Tab

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung von wxcanvas in der Entwicklung kleiner Programme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage