Cómo usar el lienzo para mantener presionado el mouse y mover la trayectoria del dibujo
Esquema
Desde que comencé a trabajar, he escrito sobre vue, reaccionar, regularidad, algoritmos, pequeños programas, etc., pero nunca he escrito sobre lienzo, porque realmente no ¡No sé cómo!
En 2018, me propuse un pequeño objetivo: aprender Canvas y poder usarlo para lograr algunos efectos de animación que no son fáciles de lograr con CSS3.
Este artículo es el primer beneficio del aprendizaje de Canvas. La primera demostración que muchas personas hacen cuando comienzan a aprender Canvas es implementar un "reloj". Por supuesto, también implementé uno, pero no estoy hablando de eso. En cambio, hablemos de algo más interesante y sencillo.
Dibujar una trayectoria mientras se presiona el mouse
Requisitos
En el lienzo, el estado inicial del lienzo es nada. Ahora, quiero agregar una. un poco al lienzo. Eventos del mouse, use el mouse para escribir en el lienzo. El efecto es mover el mouse a cualquier punto del lienzo, luego mantener presionado el mouse y mover la posición del mouse para comenzar a escribir.
Principio
Primero, necesitamos un lienzo, luego calculamos la posición del mouse en el lienzo, vinculamos el evento onmousedown y el evento onmousemove del mouse y dibujamos la ruta durante el proceso. movimiento. Suelte el ratón para terminar de dibujar.
La idea es muy simple, pero parte de ella requiere un poco de habilidad para implementarla.
1. Necesitas un archivo html que contenga elementos de lienzo.
Este es un lienzo con un ancho de 800 y una altura de 400. ¿Por qué no escribir px? Oh, todavía no lo entiendo, la documentación del lienzo recomienda usarlo.
lt;! doctype htmlgt;
lt; html class="no-js" lang="zh"gt;
lt; "utf-8"gt;
lt;meta patible" content="ie=edge"gt;
lt;titlegt;Canvas learninglt;/titlegt;
lt; nombre meta="descripción" contenido=""gt;
lt; nombre meta="descripción" contenido=""gt; nombre meta="ventana" = "ancho=ancho del dispositivo, escala inicial=1"gt;
lt; link rel="manifest" href="site.webmanifest"gt;
lt; enlace rel="apple-touch-icon" href="icon.png"gt;
lt; enlace rel="stylesheet" href="css/main.css"gt; > p>
lt;/headgt;
lt;bodygt;
lt;canvas id="theCanvas" width="800" height="400 " gt;lt;/canvasgt;
lt;scriptrc="js/main.js"gt; lt;/scriptgt;
lt;/bodygt;
lt;/htmlgt;2 Determine si el entorno actual admite lienzo
En main.js, escribimos una función autoejecutable. El siguiente es el segmento de código para determinar la compatibilidad del segmento de código. , "Code Master" " será el núcleo para lograr este requisito.
(function() {
let theCanvas = document.querySelector('#theCanvas')
if (! theCanvas || !theCanvas.getContext) {
// No es compatible con el lienzo con theCanvas
return false
} else. {
// el cuerpo del código
}
}})()3. Obtener el objeto 2d.
let context = theCanvas.getContext('2d') 4. Obtenga las coordenadas actuales del mouse en relación con el lienzo.
¿Por qué necesitamos obtener esta coordenada? Debido a que el mouse obtiene las coordenadas relativas de la ventana actual de forma predeterminada y el lienzo se puede ubicar en cualquier lugar de la página, se necesitan cálculos para obtener las coordenadas reales del mouse.
Obtener las coordenadas reales del mouse en relación con el lienzo está encapsulado en una función, por lo que si te sientes abstracto, puedes dibujar un diagrama en un papel borrador para comprender por qué es necesario este cálculo.
Normalmente, sería x - rect.left e y - rect.top, pero ¿por qué en realidad es x - rect.left * (canvas.width/rect.width)?
canvas.width/rect.width significa determinar el comportamiento de escala presente en el lienzo y descubrir el multiplicador de escala.
const windowToCanvas = (canvas, x, y) =gt; {
//Obtiene algunos atributos de qué tan lejos está el elemento lienzo de la ventana, explicado en MDN
let rect = canvas.getBoundingClientRect()
// Los parámetros xey pasados son la distancia entre el mouse y la ventana respectivamente, y luego restan la distancia entre el lienzo y la izquierda y la parte superior de la ventana.
Regresar {
x: x - rect.left * (canvas.width/rect.width),
y: y - rect.top * ( canvas.height/rect.height)
}
}5. ¡A través del paso 4, podemos agregar eventos del mouse al lienzo!
Primero vincule el mouse al evento pressonmousedown y luego use moveTo para dibujar el punto inicial de las coordenadas.
theCanvas.onmousedown = function(e) {
// Obtiene el punto de coordenadas de la posición presionada del mouse en relación con el lienzo.
let ele = windowToCanvas(theCanvas, e.clientX, e.clientY)
//Asignación deconstruida para es6
let { x, y } = ele
Dibuja el punto de partida.
context.moveTo(x, y)
}6. Al mover el mouse, no hay ningún evento de pulsación larga del mouse, entonces, ¿qué se debe monitorear?
El truco aquí consiste en ejecutar otro evento onmousemove dentro de onmousedown para que puedas escuchar si se presiona y se mueve el mouse.
theCanvas.onmousedown = function(e) {
// Obtiene las coordenadas de la posición presionada del mouse en relación con el lienzo.
let ele = windowToCanvas(theCanvas, e.clientX, e.clientY)
//Asignación deconstruida para es6
let { x, y } = ele
Dibuja el punto de partida.
context.moveTo(x, y)
//evento de movimiento del mouse
theCanvas.onmousemove = (e) =gt {
let ele = windowToCanvas(theCanvas, e. clientX, e.clientY )
context.moveTo(x, y)
theCanvas.onmousemove = (e) =gt; {
if (isAllowDrawLine) {
let ele = windowToCanvas(theCanvas, e .
let { x, y } = ele
context.lineTo(x, y)
contexto .stroke()
}
}
}
}
theCanvas. onmouseup = función() {
isAllowDrawLine = false
}
}
}
})( ) 3. utils. js
/*
* Obtener las coordenadas del mouse en el lienzo
* */
const windowToCanvas = (canvas, x, y) =gt; {
let rect = canvas.getBoundingClientRect()
return {
x: x - rect. left * (canvas .width/rect.width),
y: y - rect.top * (canvas.height/rect.height),
return {
x: x - rect.left * (canvas .
}
}
exportar {
windowToCanvas
}Resumen
Hay un malentendido aquí. Utilizo el objeto lienzo para vincular eventos theCanvas.onmouseup. De hecho, el lienzo no puede vincular eventos, el vínculo real es documento y ventana.