Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "how to achieve Mini Program canvas drag-and-drop function", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to achieve Mini Program canvas drag function" article.

How to realize

Use canvas

Use movable-view tags

Because movable-view cannot rotate, I choose to use canvas

Problems that need to be solved

How to render multiple elements to canvas

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

How to implement drag and drop elements

How to scale, rotate, and delete elements

It looks quite simple, just solve the above problems, you can achieve the function; then we will solve them one by one.

How to render multiple elements to canvas

Define a DragGraph class, passing in various attributes of the element (coordinates, dimensions... Instantiate it and push it into a rendering array, and then loop through the array to call the rendering method in the instance, so that multiple elements can be rendered to canvas.

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

The method to determine the click location is defined in the DragGraph class. We bind the touchstart event on canvas and pass the coordinates of the finger into the above method, so that we can know whether the finger clicks on the element itself, or deletes the icon or changes the size of the icon.

Through the circular rendering array to determine which element is not clicked to, if you click on multiple elements, that is, multiple elements overlap, then the first element is the top element.

# how to implement drag and drop elements

From 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 the coordinates at this time. The distance of the element displacement can be obtained by taking the difference between the two coordinates. Modify the x and y of the element instance, and then re-cycle the rendering array to achieve the drag-and-drop function.

How to scale, rotate, and delete elements

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

Let's start with scaling and rotation.

Through touchstart and touchmove, we can get the rotation coordinates before and after rotation. Line An in the picture is the connection between the midpoint of the element and the point before rotation; line B is the connection between the midpoint of the element and the point after rotation; we only need to ask the angle between An and B to know the rotation angle of the element. The zoom size is the difference between the length of An and B lines.

The code for calculating the rotation angle is as follows:

Const centerX = (this.x + this.w) / 2; / / midpoint coordinates const centerY = (this.y + this.h) / 2; / / midpoint coordinates const diffXBefore = px-centerX; / / pre-rotation coordinates const diffYBefore = py-centerY; / / pre-rotation coordinates const diffXAfter = x-centerX; / / post-rotation coordinates const diffYAfter = y-centerY / / coordinates after rotation const angleBefore = Math.atan2 (diffYBefore, diffXBefore) / Math.PI * 180 position Const angleAfter = Math.atan2 (diffYAfter, diffXAfter) / Math.PI * 180 X X / rotation Angle this.rotate = currentGraph.rotate + angleAfter-angleBefore; copy Code

The code for calculating the scale size is as follows:

/ / zoom in or out this.x = currentGraph.x-(x-px); this.y = currentGraph.y-(x-px). The above is about "how to achieve Mini Program canvas drag and drop function". I believe you all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.