Home > Article > WeChat Applet > 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
Use canvas
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.
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.
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. .
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.
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!