Detailed explanation of canvas drag and drop function in mini program

This article brings you a detailed explanation of the drag and drop function of canvas in the mini program. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Component address

https://github.com/jasondu/wx...

How to implement

1. Use canvas

2. Use movable-view tag

Because movable-view cannot be implemented Rotate, so choose to use canvas

Problems that need to be solved

• How to render multiple elements onto canvas

• How to know that your finger is on an element, and if multiple elements overlap, how to know which element is on top

• How to implement dragging elements

• How to scale, rotate, and delete elements

It seems quite simple. Just solve the above problems and you can implement the function; next we will do it one by one solve.

How to render multiple elements to canvas

Define a DragGraph class, pass in various attributes of the elements (coordinates, sizes...) and push them into a rendering array after instantiation , and then loop through this array to call the rendering method in the instance, so that multiple elements can be rendered to the canvas.

How to know that the finger is on the element, and if multiple elements overlap, how to know which element is on the top layer

The method for determining the click position is defined in the DragGraph class. We bind touchstart on the canvas. Event, pass the coordinates of the finger into the above method, and we can know whether the finger clicked on the element itself, or deleted the icon or changed the size of the icon. How to determine this method will be explained later.

Through loopingRendering arrayDetermine which element is clicked or not. If multiple elements are clicked, that is, multiple elements overlap, then the first element is the top element. .

How to implement dragging elements

Through the above we can determine whether the finger is on the element. When the touchstart event is triggered, we record the current finger coordinates. When the touchmove event is triggered, we also know this By taking the difference between the two coordinates, you can get the displacement distance of the element. Modify the x and y of the element instance, and then recycle the rendering Rendering array to realize the drag and drop function.

How to scale, rotate and delete elements

This step is relatively difficult, I will explain it to you through a schematic diagram.

Let’s talk about scaling and rotation first

Through touchstart and touchmove we can get the coordinates after rotation before rotation, as shown in the figure Line A is the line connecting the midpoint of the element and the point before rotation; line B is the line connecting the midpoint of the element and the point after rotation; we only need to ask for the angle between lines A and B to know the angle of rotation of the element. . The scaling dimension is the difference between the lengths of the two lines A and B.

The code for calculating the rotation angle is as follows:

const centerX = (this.x + this.w) / 2;  // 中点坐标
const centerY = (this.y + this.h) / 2;  // 中点坐标

const diffXBefore = px - centerX;   // 旋转前坐标
const diffYBefore = py - centerY;   // 旋转前坐标
const diffXAfter = x - centerX;     // 旋转后坐标
const diffYAfter = y - centerY;     // 旋转后坐标

const angleBefore = Math.atan2(diffYBefore, diffXBefore) / Math.PI * 180;
const angleAfter = Math.atan2(diffYAfter, diffXAfter) / Math.PI * 180;

// 旋转的角度
this.rotate = currentGraph.rotate + angleAfter - angleBefore;

The code for calculating the zoom size is as follows:

// 放大 或 缩小
this.x = currentGraph.x - (x - px);
this.y = currentGraph.y - (x - px);

Related recommendations:

WeChat applet development Implementation of image drag and drop function

HTML table mouse drag and drop sorting function

The above is the detailed content of Detailed explanation of canvas drag and drop function in mini program. For more information, please follow other related articles on the PHP Chinese website!