Detaillierte Einführung in das WeChat-Miniprogramm-Canvas

Das Testtelefon ist IPHONE6, Entwicklertool-Version 0.10.102800

Der Canvas im WeChat-Applet unterscheidet sich in vielerlei Hinsicht vom h5-Canvas. Im Folgenden wird der Canvas im WeChat-Applet als wxcanvas bezeichnet 🎜>

Im Folgenden finden Sie 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 sowie 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 und wird zum Generieren und Aufzeichnen von Zeichnungsverhaltens-Aktionsarrays verwendet. 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

9 löschen. Skalierung, Übersetzung, Drehung und andere Zustände setzen den letzten Zustand fort, wenn reserviert: true

10 .getActions() ist sehr nützlich. Wenn Sie es ausdrucken, können Sie den Inhalt direkt ändern, um die Zeichenaktion zu ändern.

11 .drawImage kann auf dem Mobiltelefon gezeichnet werden, aber nicht auf dem Computerentwicklungstool

12.wx.canvasToTemp

DateiPfad

Es gibt nur eine Zeile darin das offizielle Dokument. Es stellt sich heraus, dass

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

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in das WeChat-Miniprogramm-Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!