Implementación de arrastrar y soltar objetos en la operación de ruta avanzada de Canvas

Para realizar un seguimiento de lo que se dibuja, muchas aplicaciones, como las de dibujo, los sistemas de diseño asistido por computadora (sistemas CAD) y los juegos, mantienen una lista de los objetos que se muestran actualmente. Normalmente, estas aplicaciones permiten a los usuarios manipular los objetos que se muestran actualmente en la pantalla. Por ejemplo, en una aplicación CAD, podemos seleccionar, mover, hacer zoom, etc. elementos en el diseño.

-"Tecnología básica HTML5 Canvas"

Lo mismo ocurre 实现拖拽en Canvas. Canvas proporciona una API llamada isPointInPath(x, y) para determinar si 点(x, y) está en la ruta. Devuelve verdadero si está dentro de la ruta. Entonces podemos tener las siguientes ideas:

Mantenga una 数组que pueda describir cada ruta y use ispointInPath(x, y) para determinar si la posición en la que se hizo clic está en una ruta determinada. Si está en esta ruta, seleccione esta ruta y realice operaciones (mover, hacer zoom, etc.). y luego dibujar los gráficos

En este artículo, utilizo 多边形拖拽为例进行说明. La demostración es la siguiente (la razón detrás de la impresión es el software de grabación de pantalla: japonés_ogre:):

Se abre CodePen

Ya se ha resumido anteriormente cómo dibujar polígonos en la demostración, por lo que no volveré a entrar en detalles: fantasma:: Dibujo de polígonos en lienzo

La siguiente figura proporciona una descripción aproximada y un pseudocódigo. La idea no es difícil, pero hay algunos detalles que deben abordarse.

La estructura del código se enumera aquí y sus ideas están marcadas. Hay comentarios de código más detallados en CodePen.

Debido a que este artículo se centra en el arrastre, habrá menos descripción de la parte del dibujo.

 // Función de dibujo de ruta de polígono function drawPolygonPath // Definición de clase de polígono class Polygon{ ...}// Devuelve la posición en el lienzo de acuerdo con la función de evento de clic positoinInCanvas // Obtener la distancia en línea recta entre dos puntos función getDistance // En la etapa inicial, registre el arrastre Arrastre el objeto canvas.onmousedown//Fase de arrastre, dibuje la ruta, trazo canvas.onmousemove//Fin de la fase, actualice la posición del objeto de arrastre canvas.onmouseup

A continuación, comience a procesar las partes clave y los detalles del código.

Durante la inicialización del programa, definimos una matriz polygonArray

 matrizpolígono = []

Cada vez que se dibuja un nuevo polígono, se insertará un nuevo objeto de polígono en la matriz para su mantenimiento.

 const polígono = new Polygon(mouseStart.get('x'), mouseStart.get('y'), sideNum, radio);polygonArray.push(polygon);//Registrar objeto de ruta

En operaciones de clic posteriores, es necesario determinar si la posición del clic está en la ruta en función de la información correspondiente.

Primero, obtenga la posición correspondiente canvas中cuando se hace clic en Mi código usa mouseStart para registrar x y

Luego recorra polygon en polygonArray , llame a polygon.createPath() durante el recorrido y use isPointInPath() para determinar si hay una ruta en la posición en la que se hizo clic. Si es así, draggingPolygon = polygon finaliza la función.

 const pos = positionInCanvas(e, canvasLeft, canvasTop);//Obtener la posición del píxel en el lienzo//Registrar el punto de inicio del mouse smouseStart.set('x', pos.x);mouseStart.set('y', pos. y);...for (let polígono de polygonArray) { polygon.createPath(); (ctx.isPointInPath(mouseStart.get('x'), mouseStart.get('y'))) { arrastrandoPolygon = polígono retorno;

Esta parte debe comprenderse completamente. Se recomienda depurar basándose en los dos console.log(draggingPolygon) y el código en la demostración, porque estamos en la etapa mousemove y las funciones se activan con mucha frecuencia en esta etapa.

Intento expresarlo claramente en palabras.

Primero, calcule la distancia desde mouseStart cuando move , que se registra como diferencia. Hay offsetX en el eje x y offsetY en el eje y.

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

Luego registre centerX y centerY del objeto de arrastre actual, registrado como temperatura

 let tempCenterX = arrastrandoPolygon.centerX, tempCenterY = arrastrandoPolygon.centerY;

Este es el punto difícil de entender. ¿Por qué deberíamos registrarlo? Sigue leyendo, lo usarás más adelante.

Establezca la nueva posición central de draggingPolygon de acuerdo con el desplazamiento en diff

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

Luego limpia el lienzo y dibuja nuevos caminos y trazos.

 ctx.clearRect(0, 0, canvas.width, canvas.height);for (let polígono de polygonArray) { drawPolygonPath(polygon.sideNum, polígono.radius, polígono.centroX, polígono.centroY, ctx.stroke(); );}

Finalmente, se utilizan tempCenterX y tempCenterY mencionados anteriormente:

 arrastrandoPolygon.centerX = tempCenterX; arrastrandoPolygon.centerY = tempCenterY;

¿Por qué necesitamos hacer esto?

Debido a que nuestro arrastre se 基于多边形的原位置, mousemove 不能确定函数的最终位置. Si no hay recuperación en este momento, se producirá 漂移en estas dos líneas de código. efecto es el siguiente:

Si no lo dejé claro, recomiendo a todos que modifiquen y depuren el código.

Una vez completado el arrastre, se encuentra en la etapa mouseup . En este momento, determinamos la posición final de dragginPolygon, simplemente lo actualizamos y finalmente lo configuramos en nulo para excluir 在没有拖拽多边形情况下，鼠标在画布上移动触发对应代码

 const pos = positionInCanvas(e, canvasLeft, canvasTop), offsetMap = new Map([ ['offsetX', pos.x - mouseStart.get('x')], ['offsetY', pos.y - mouseStart.get( 'y')] ]); arrastrandoPolygon.centerX += offsetMap.get('offsetX'); offsetMap.get('offsetY'); arrastrandoPolygon = null;

De hecho, no es difícil implementar esta función. La clave es comprender un concepto: el seguimiento se logra manteniendo una lista de los objetos mostrados actualmente y haciendo juicios con isPointInPath.

Finalmente, bienvenidos a todos a intercambiar y aprender.

"Tecnología básica HTML5 Canvas"

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.