Método de aplicação de desenho de linha de elástico de tela

O desenho do dedo pode esticar como um elástico. .

Um exemplo é o seguinte: point_down:

A ideia é muito simples. Você só precisa prestar atenção à função de desenho do elástico. A seguir, resume as ideias dos três estágios de mousedown, mousemove e mouseup.

mousedown: registra a posição inicial, arrastar (gravar se está no estado de arrastar) é definido como verdadeiro, getImageData ( 橡皮筋效果关键1 )

mousemove: Obtenha a posição pos ao arrastar, putImageData ( 对应getImageData，橡皮筋效果关键2 ), desenhe uma linha reta de acordo com pos e comece

mouseup: arrastar reverte para falso

关键está nos dois métodos de tela putImageData() e getImageData(). putImageData() registra a imagem quando o mouse é clicado e getImageData() a restaura de acordo. Se esses dois métodos não forem executados, ocorrerão os seguintes efeitos:

putImageData() equivale a apagar todas as linhas digitalizadas

código

 <canvas id=canvas width=600 height=400 style=border: 1px preto sólido;> </canvas> <script type=text/javascript> let canvas = document.getElementById('canvas'), ctx = canvas.getContext( '2d'), canvasLeft = canvas.getBoundingClientRect().left, //getBoundingClientRect() obtém a posição do elemento canvasTop = canvas.getBoundingClientRect().top; let imageData; //Registrar dados da imagem let start = new Map([['x',null],['y',null]]); No estado de arrastar canvas.onmousedown = function (e) { let pos = positionInCanvas(e, canvasLeft, canvasTop); pos.y); arrastar = true; //Registro imageData imageData = ctx.getImageData(0,0,canvas.width,canvas.height } canvas.onmousemove = function (e) { if(drag === true) { let pos = positionInCanvas(e, canvasLeft, canvasTop); //Equivalente a apagar todas as linhas digitalizadas e redesenhar ctx.putImageData(imageData, 0, 0);ctx.beginPath(); ctx.moveTo(start.get('x'), start.get('y')); ; } } canvas.onmouseup = function (e) { drag = false } function positionInCanvas (e, canvasLeft, canvasTop) {//Obter a posição do clique do mouse na tela return { x:e.clientX - canvasLeft, y:e.clientY - canvasTop } } </script>

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.