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

Most people do not understand the knowledge points of this article "how to drag objects in Canvas Advanced path", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can gain something after reading this article. Let's take a look at this "how to drag objects in Canvas Advanced path" article.

In order to track what is drawn, many applications, such as drawing applications, computer-aided design systems (computer-aided design system referred to as CAD systems), and games, maintain a list of current display objects. In general, these applications allow users to manipulate objects currently displayed on the screen. For example, in CAD applications, we can select, move, zoom and so on the elements in the design.

The same is true for implementing drag and drop in Canvas, where Canvas provides an API called isPointInPath (x, y) to determine whether the point (x, y) is in the path. Returns true if it is in the path. So we can have the following ideas:

Maintain an array that can describe each path, use ispointInPath (x, y) to determine whether the click location is in a certain path, if in this path, select the path, operate (move, zoom, etc.), and then draw the graph

In this article, I take polygonal drag and drop as an example. The Demo is as follows (the following imprint is the reason for the screencap software: japanese_ogre:)

CodePen open

How to draw polygons in Demo has been summarized before, and I won't repeat it: ghost::Canvas polygon drawing

Train of thought explanation

The following figure gives a general description and pseudo code. The idea is not difficult, but some details need to be dealt with.

Code structure description

The structure of the code and its ideas are listed here. More detailed code comments are available in CodePen.

Because this article focuses on drag, there will be less description of the drawing section:

/ / draw polygon path function function drawPolygonPath// polygon class definition class Polygon {.} / / return the position in canvas according to the click event function positoinInCanvas// get the straight line distance between two points function getDistance// start stage, record drag object canvas.onmousedown// drag phase, draw path, stroke canvas.onmousemove// end phase, update drag object position canvas.onmouseup

The key part explains

Let's start with the key parts of the code and the details.

How to maintain an array of drag and drop objects

When the program is initialized, we define an polygonArray array

PolygonArray = []

After each drawing of a new polygon, a polygon object is new pushed into the array for maintenance

Const polygon = new Polygon (mouseStart.get ('x'), mouseStart.get ('y'), sideNum, radius); polygonArray.push (polygon); / / record path object

In the subsequent click operation, you need to determine whether the click location is in the path according to the corresponding information.

When clicking, how to select the object to be dragged

First, get the corresponding position in canvas when you click, and my code uses mouseStart to record x and y.

Then iterate through the polygon in polygonArray, call polygon.createPath () in the traversal, and determine whether there is a path to the click location through isPointInPath (). In some cases, draggingPolygon = polygon ends the function:

Const pos = positionInCanvas (e, canvasLeft, canvasTop); / / get the pixel position in canvas / / record the starting point of the mouse smouseStart.set ('x, pos.x); mouseStart.set ('yearly, pos.y);... for (let polygon of polygonArray) {polygon.createPath () If (ctx.isPointInPath (mouseStart.get ('x'), mouseStart.get ('y')) {draggingPolygon = polygon; return;}}

Calculation when dragging

To fully understand this part, it is recommended that you debug according to the two console.log (draggingPolygon) and code in Demo, because we are in the mousemove phase, which triggers functions very frequently.

I try to express myself clearly in words.

First calculate the distance between move and mouseStart, marked as diff, with offsetX on x-axis and offsetY on y-axis.

Const pos = positionInCanvas (e, canvasLeft, canvasTop), diff = new Map ([['offsetX', pos.x-mouseStart.get (' x')], ['offsetY', pos.y-mouseStart.get (' y')]])

Then record the centerX and centerY of the current drag object, which is called temp.

Let tempCenterX = draggingPolygon.centerX, tempCenterY = draggingPolygon.centerY

This is the point that is difficult to understand, why record it? Keep looking down, and you'll use it later.

Set the new central location of the draggingPolygon according to the offset in diff.

DraggingPolygon.centerX + = diff.get ('offsetX'); draggingPolygon.centerY + = diff.get (' offsetY')

Then empty the canvas to draw new paths and strokes:

Ctx.clearRect (0,0, canvas.width, canvas.height); for (let polygon of polygonArray) {drawPolygonPath (polygon.sideNum, polygon.radius, polygon.centerX, polygon.centerY, ctx); ctx.stroke ();}

Finally, use the tempCenterX and tempCenterY above:

DraggingPolygon.centerX = tempCenterX;draggingPolygon.centerY = tempCenterY

Why do you need to do this?

Because our drag and drop is based on the original position of the polygon, and the mousemove phase can not determine the final position of the function, if it is not restored at this time, there will be "drift", I will comment out these two lines of code

If I don't make it clear, wall cracks recommend that you modify and debug the code.

Handling after dragging

After the drag and drop is completed, it is in the mouseup stage. At this time, we have determined the final location of the dragginPolygon, updated it, and finally set it to null, excluding the corresponding code triggered by moving the mouse over the canvas without dragging polygons.

Const pos = positionInCanvas (e, canvasLeft, canvasTop), offsetMap = new Map ([['offsetX', pos.x-mouseStart.get (' x')], ['offsetY', pos.y-mouseStart.get (' y')]); draggingPolygon.centerX + = offsetMap.get ('offsetX'); draggingPolygon.centerY + = offsetMap.get (' offsetY'); draggingPolygon = null The above is about the content of this article on "how to drag and drop objects in the advanced path of Canvas". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to learn more about related 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.