Cómo implementar operaciones de arrastrar y soltar, hacer clic y otras operaciones en imágenes de Canvas

2. Establezca el índice z del div en un valor mayor para asegurarse de que esté ubicado encima de la pantalla Canvas.

Una vez completada la preparación, echemos un vistazo a la operación de arrastrar y soltar del div:

var divObj=document.getElementById("cover");

var moveFlag=false;

divObj.onmousedown= función(e){

moveFlag=true;

var clickEvent=ventana.event ||e;

p>

var mwidth=clickEvent.clientX-divObj.offsetLeft;

var mheight=clickEvent.clientY-divObj.offsetTop;

document.onmousemove=función(e){

var moveEvent=ventana.

document.onmousemove=función(e){

var moveEvent=ventana .onmouseup=función(){

moveFlag=false;

}

}

}

}

;

Para interpretar este código: primero obtenga el objeto div y configure el indicador de arrastre moveFlage. Cuando onmousedown es verdadero, significa que se puede arrastrar. Cuando onmouseup es falso. significa que no se puede arrastrar.

var clickEvent=window.event||e;

var mwidth=clickEvent.clientX-divObj.offsetLeft;

var mheight=clickEvent.clientY-divObj .offsetTop;

Estas tres líneas de código se utilizan para corregir la posición del cursor. mwidth y mheight representan la distancia de la posición del cursor en relación con la izquierda y la parte superior del div. Sin corrección:

Este es el resultado sin corrección, cuando se hace clic en el cursor, las coordenadas del div (es decir, la esquina superior izquierda) serán las mismas que las coordenadas del cursor.

Después de la corrección:

El cursor siempre se "pegará" al div al hacer clic en él.

El siguiente paso es dibujar la imagen:

Primero defina las variables globales X e Y, que se utilizan para actualizar las coordenadas de dibujo de la imagen en tiempo real. comenzarPath();

ctx.drawImage(img, X, Y);

ctx.closePath();

ctx.stroke();

p>

}

window.onload=function(){

setInterval(drawImg, 1);

}

Obtener "Cepillo". Obtenga el objeto de imagen. Aquí, setInterval recorre la función de dibujo de imágenes para actualizar la posición de la imagen. Cuanto más pequeño sea el setInterval, más "suave" será arrastrar y soltar.

No olvides clearRect. Cuando la imagen se mueva a la siguiente posición, borra la posición anterior de la imagen. Los parámetros son las coordenadas y el tamaño del lienzo del lienzo.

Al arrastrar y soltar, pase las coordenadas del cursor corregidas a X e Y:

X=moveEvent.clientX-mwidth

Y=moveEvent.clientY - mheight;

Finalmente, agregue el rango móvil del div y la imagen:

if( moveEvent.clientXlt;=mwidth){

divObj.style.left =0 "px";

X=0;

}

if(parseInt(divObj.style.left) divObj.style.top=0 " px";

Y=0;

}

if(parseInt(divObj.style.top) divObj.offsetHeightgt;=500){

divObj.style.top=500-divObj.offsetHeight "px";

Y=500-divObj.offsetHeight;

}

Esto Dependiendo de los requisitos personales, tenga en cuenta que el tamaño del lienzo en este ejemplo está limitado a 1000 y 500, que se reemplazarán por InnerWidth o InnerHeight

Debe ocultar completamente el div para ver el efecto:

El último es el evento de clic. Lo que hay que tener en cuenta aquí es que durante el proceso de arrastrar y soltar, Onmousedown y onmouseup constituyen un proceso de clic, pero no queremos activar el evento de clic al final. /p>

Aquí hay un método simple: defina un clickFlag con un valor predeterminado de falso, configúrelo en verdadero cuando se ejecuta onmousedown y configúrelo en falso si se ejecuta onmousemove

El valor. de clickFlag se determina al final de onmouseup y solo se activa el evento de clic. Esto significa que cuando presiona el mouse, el evento de clic solo se activará cuando suelte el mouse sin notar el movimiento.

Código JS organizado:

// Dibujar coordenadas de imagen

var X=0;

var Y=0;

// parte js

var divObj=document.event||e;

var mwidth=clickEvent.clientX-divObj.offsetLeft;

var mheight=clickEvent.clientY-divObj.offsetTop;

document.onmousemove=function(e){

clickFlag=false;

var moveEvent=ventana. e;

if(moveFlag){

divObj.style.left=moveEvent.clientX-mwidth "px";

divObj.style.top=moveEvent .clientY-mheight "px";

////, transfiere las coordenadas del mouse a la imagen en el lienzo

X=moveEvent.

X= moveEvent .clientX-mwidth;

Y=moveEvent.clientY-mheight;

//// Las siguientes cuatro condiciones se utilizan para limitar los límites activos de divs e imágenes

if(moveEvent.clientXlt;=mwidth){

divObj.Altura de desplazamiento "px";

Y=500-divObj.Altura de desplazamiento;

}

divObj.onmouseup=function(){

moveFlag=false;

if(clickFlag){

alerta( " Haga clic para surtir efecto");

}

}

}

}

}

};