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

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

Erstellen Sie eine Leinwand

Auslösebedingungen

Touchstart

Die Fingerberührungsaktion beginnt.Fingerberührung Die Aktion endet.

<canvas type="2d" id="myCanvas" style="height: 600px; width: 500px;"></canvas>

Der Finger Nachdem die Berührungsaktion beendet ist, ändern Sie den CanvasInfo-Status wieder in „Leerlauf“

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

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!