In diesem Artikel wird anhand von Codebeispielen erläutert, wie Sie die Canvas-Drag-Element-Funktion des WeChat-Applets implementieren.

Erfahren Sie anhand eines Beispiels, wie Sie die Canvas-Drag-Funktion im Miniprogramm implementieren

Erstellen Sie eine Leinwand

Auslösebedingungen

Erfahren Sie anhand eines Beispiels, wie Sie die Canvas-Drag-Funktion im Miniprogramm implementieren

Touchstart

Die Fingerberührungsaktion beginnt.

Nach dem Login kopieren

// 鼠标状态 statusConfig : { idle: 0, //正常状态 Drag_start: 1, //拖拽开始 Dragging: 2, //拖拽中 }, // canvas 状态 canvasInfo : { // 圆的状态 status: 0, // 鼠标在在圆圈里位置放里头 dragTarget: null, // 点击圆时的的位置 lastEvtPos: {x: null, y: null}, },

Nach dem Login kopieren

Fingerberührung Die Aktion endet. Der Finger Nachdem die Berührungsaktion beendet ist, ändern Sie den CanvasInfo-Status wieder in „Leerlauf“ Lernen Sie von den Chefs bei Bilibili, aber die Lücke zwischen dem WeChat-Applet und der HTML-Leinwand hat mich auch deprimiert [Verwandte Lernempfehlungen: 】

Touchmove	Der Finger bewegt sich nach der Berührung
Tippen.	Der Finger berührt und verlässt ihn sofort Berührt und bewegt sich, und der Kreis wird neu gezeichnet

Mini-Tutorial zur Programmentwicklung

Das obige ist der detaillierte Inhalt vonErfahren Sie anhand eines Beispiels, wie Sie die Canvas-Drag-Funktion im Miniprogramm implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!