Implementação de objeto arrastar e soltar na operação de caminho avançado do Canvas

Para acompanhar o que está sendo desenhado, muitos aplicativos, como aplicativos de desenho, sistemas de design auxiliado por computador (sistemas CAD) e jogos, mantêm uma lista dos objetos exibidos atualmente. Normalmente, esses aplicativos permitem aos usuários manipular objetos atualmente exibidos na tela. Por exemplo, em uma aplicação CAD, podemos selecionar, mover, ampliar, etc.

-"Tecnologia central HTML5 Canvas"

O mesmo se aplica 实现拖拽no Canvas. O Canvas fornece uma API chamada isPointInPath(x, y) para determinar se 点(x, y) está no caminho. Retorna verdadeiro se estiver dentro do caminho. Então podemos ter as seguintes ideias:

Mantenha uma 数组que possa descrever cada caminho e use ispointInPath(x, y) para determinar se a posição clicada está em um determinado caminho. Se estiver neste caminho, selecione este caminho, execute operações (mover, ampliar, etc.) e, em seguida, desenhe os gráficos

Neste artigo, uso 多边形拖拽为例进行说明. A demonstração é a seguinte (o motivo por trás da impressão é o software de gravação de tela: japanese_ogre:):

CodePen abre

Como desenhar polígonos na Demo já foi resumido antes, então não vou entrar em detalhes novamente: ghost:: Canvas polygon drawing

A figura abaixo fornece uma descrição aproximada e um pseudocódigo. A ideia não é difícil, mas há alguns detalhes que precisam ser tratados.

A estrutura do código está listada aqui e suas ideias estão marcadas. Comentários mais detalhados do código estão no CodePen.

Como este artigo se concentra no arrasto, haverá menos descrição da parte do desenho.

 //Desenhe o caminho do polígono função function drawPolygonPath//classe de definição de classe Polygon Polygon{ ...}//Retorna a posição na tela de acordo com o evento de clique function positoinInCanvas//Obtém a distância em linha reta entre dois pontos function getDistance// No estágio inicial, registre o arrasto Arrastar objeto canvas.onmousedown//Fase de arrastar, desenhar caminho, traço canvas.onmousemove//Fase final, atualizar posição do objeto de arrastar canvas.onmouseup

Em seguida, comece a processar as principais partes e detalhes do código

Durante a inicialização do programa, definimos um array polygonArray

 polígonoArray = []

Cada vez que um novo polígono é desenhado, um novo objeto polígono será inserido na matriz para manutenção.

 const polygon = new Polygon(mouseStart.get('x'), mouseStart.get('y'), sideNum, radius);polygonArray.push(polygon);//objeto de caminho de registro

Nas operações de clique subsequentes, é necessário determinar se a posição do clique está no caminho com base nas informações correspondentes.

Primeiro, obtenha a posição correspondente canvas中quando clicado. Meu código usa mouseStart para registrar x e y

Em seguida, percorra polygon no polygonArray , chame polygon.createPath() durante a travessia e use isPointInPath() para determinar se existe um caminho na posição clicada. Em caso afirmativo, draggingPolygon = polygon encerra a função.

 const pos = positionInCanvas(e, canvasLeft, canvasTop);//Obtém a posição do pixel na tela//Registra o ponto inicial do mouse smouseStart.set('x', pos.x);mouseStart.set('y', pos. y);...for (deixe polígono de polygonArray) { polygon.createPath(); (ctx.isPointInPath(mouseStart.get('x'), mouseStart.get('y'))) { arrastandoPolygon = polygon return;

Esta parte deve ser totalmente compreendida. Recomenda-se que você depure com base nos dois console.log(draggingPolygon) e no código da Demo, pois estamos no estágio mousemove e as funções são acionadas com muita frequência neste estágio.

Eu tento expressar isso claramente em palavras

Primeiro, calcule a distância de mouseStart ao move , que é registrada como diff. Há offsetX no eixo x e offsetY no eixo y.

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

Em seguida, registre centerX e centerY do objeto arrastado atual, registrado como temp

 deixe tempCenterX = arrastandoPolygon.centerX, tempCenterY = arrastandoPolygon.centerY;

Este é o ponto difícil de entender. Por que deveríamos registrá-lo? Continue lendo, você o usará mais tarde.

Defina a nova posição central de dragPolygon de acordo com o deslocamento diff

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

Em seguida, limpe a tela e desenhe novos caminhos e traços

 ctx.clearRect (0, 0, canvas.width, canvas.height); );}

Finalmente, tempCenterX e tempCenterY mencionados acima são usados:

 arrastandoPolygon.centerX = tempCenterX; arrastandoPolygon.centerY = tempCenterY;

Por que precisamos fazer isso?

Como nosso arrastamento é 基于多边形的原位置, e mousemove 不能确定函数的最终位置. Se não houver recuperação neste momento, ocorrerá 漂移, comentei essas duas linhas de código. efeito é o seguinte:

Se não deixei claro, recomendo a todos que modifiquem e depurem o código.

Após a conclusão do arrasto, ele está no estágio mouseup . Neste momento, determinamos a posição final do dragginPolygon e podemos atualizá-lo. Finalmente, ele é definido como nulo para excluir 在没有拖拽多边形情况下，鼠标在画布上移动触发对应代码

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

Na verdade, não é difícil implementar esta função. A chave é entender um conceito: o rastreamento é obtido mantendo uma lista de objetos exibidos atualmente e fazendo julgamentos com isPointInPath.

Por fim, dê as boas-vindas a todos para trocar e aprender

"Tecnologia central HTML5 Canvas"

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.