Detaillierte Erklärung von wxcanvas in der Entwicklung kleiner Programme

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

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

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 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: 'target',
    actions: [],
    reserve:false
});

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差不多；

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

[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!