Cómo implementar operaciones de arrastrar y hacer clic en imágenes de lienzo
2. Establezca el valor del índice z del div en un tamaño mayor para garantizar que esté por encima de la pantalla del lienzo.
Una vez completado el trabajo de preparación, echemos un vistazo a cómo arrastrar el div:
var div obj = document . var moveFlag = false
div onmousedown = function(e){
moveFlag = true
var evento de clic = evento de ventana | /p>
moveFlag = false
div obj. p>
var mwidth = hacer clic en clientx-div obj.
var m height = hacer clic en evento . clienty-div obj . offsettop;
documento onmousemove = función(e){
var evento evento = ventana | if(moveFlag){
estilo div obj. izquierda = mover evento. clientx-mwidth "px";
estilo div obj. " px ";
divObj.onmouseup=function(){
moveFlag = false
}
}
}
};
Echemos un vistazo a este código: Primero, obtenga el objeto div y establezca la bandera de arrastre moveFlage. Cuando onmousedown es verdadero, significa que se puede arrastrar. Cuando onmouseup es falso, significa que no se puede arrastrar.
var evento de clic = evento de ventana | e;
var mwidth = evento de clic x-div obj . click event . clienty-div obj . offsettop;
Estas tres líneas de código se utilizan para corregir la posición del cursor. Cuando se hace clic, registra la posición del cursor en el div. Mwidth y mheight representan la distancia entre el punto de colocación del cursor y la esquina superior izquierda del div. Si no se corrige:
Este es el resultado de no corregirse. Cuando se hace clic en el cursor, las coordenadas del div, es decir, las coordenadas de la esquina superior izquierda, serán consistentes con las coordenadas del cursor.
Después de la revisión:
Cuando haces clic, el cursor siempre se "pegará" a un punto determinado del div.
A continuación, haga un dibujo:
Primero defina las variables globales X e Y, que se utilizan para actualizar las coordenadas de dibujo de la imagen en tiempo real.
var CTX = documento . getelementbyid("mi lienzo").
get context(" 2d ");
var img = document . getelementbyid(" myImg ");
Función dibujo(){
ctx.clearRect( 0, 0, 1000, 500);
CTX . comenzar ruta();
ctx.drawImage(img, X, Y); cerrar ruta();
CTX . trazo();
}
ventana.onload=función(){
setInterval( drawImg, 1);
}
Obtén el "pincel" y obtén el objeto de imagen. Aquí, setInterval realiza un bucle para ejecutar la función de dibujar la imagen para actualizar la posición de la imagen. Cuanto menor sea el valor del intervalo de setInterval, más "suave" será el arrastre.
Además, no olvides borrar. Cuando la imagen se mueva a la siguiente posición, borre la imagen en la posición anterior. Los parámetros son las coordenadas y dimensiones del lienzo.
Pase las coordenadas correctas del cursor a X e Y al arrastrar:
x = mover evento.
y = mover evento -MH. height;
Finalmente, agrega el div y el rango activo de la imagen:
if(move event . clientx lt;=mwidth){
div obj . estilo . izquierda = 0 " px ";
x = 0
}
if(parse int(div obj . estilo . izquierda) div obj . offsetwidth gt;=1000){
div obj style . left = 1000-div obj . offsetwidth " px ";
x = 1000-div obj . p >
}
if(mover evento . clienty lt; = altura MH){
div obj .top = 0 " px "; p >y = 0;
}
if(parse int(div obj . style . top) div obj . offset height gt;=500){
div obj estilo. top = obj de 500 div . a esta solicitud personal. Tenga en cuenta que el alcance activo del div y la imagen deben limitarse al mismo tiempo. 1000 y 500 son los tamaños de lienzo para este ejemplo. Si está activo en toda la página, se cambiará a InnerWidth o InnerHeight.
Oculta completamente el div y observa el efecto:
Finalmente, hablemos del evento de clic. Lo que hay que tener en cuenta aquí es que tanto onmousedown como onmouseup constituyen un proceso de clic durante el proceso de arrastre, pero no queremos activar el evento de clic después de arrastrar.
El siguiente es un método simple que define clickFlag como falso de forma predeterminada, se establece en verdadero cuando se presiona el mouse y se establece en falso si se ejecuta el evento onmousemove.
Determine el valor de clickFlag en el último onmouseup y active el evento de clic cuando sea verdadero. Es decir, al presionar el mouse, el evento de clic solo se activará cuando sueltes el mouse sin detectar movimiento.
Después de completar el código JS:
//Dibuja las coordenadas de la imagen
var X = 0;
var Y = 0;
p>
//js part
var div obj = document . getelementbyid(" cover ");
var moveFlag = false
//Distinción de banderas de moueseup y clic
var clickFlag = false
//Función de arrastre
div onmousedown = function(e) {
moveFlag = true
clickFlag = true
var evento de clic = evento de ventana e;
var mwidth = clic. evento. clientx-div obj. desplazamiento hacia la izquierda;
var m altura = haga clic en evento. clienty-div obj.
documento. >
clickFlag = false
var evento de movimiento = evento de ventana | e;
if(moveFlag){
div obj. = mover evento. clientx-mwidth "px";
estilo div obj. top = mover evento.-MH altura "px";
////Transferir coordenadas del mouse. a la imagen en el lienzo.
x = evento de movimiento. clientx-mwidth;
y = evento de movimiento. altura de cliente-MH
////Las siguientes cuatro condiciones son restricciones; El div y los bordes activos de la imagen.
if(move event . clientx lt;=mwidth){
div obj style . left = 0 "px";
x = 0;
}
if(parse int(div obj. estilo. izquierda) div obj. offsetwidth gt;=1000){
div obj izquierda. Obj de 1000 div. ancho de desplazamiento " px ";
x = obj de 1000 div. ancho de desplazamiento;
}
if(mover evento. clienty lt;= Altura MH){
div obj estilo .top = 0 " px "; (parse int(div obj. style. top) div obj. altura de desplazamiento gt;=500){
estilo de obj div. top = 500-div obj.
y = obj de 500 div. altura compensada;
}
divObj.onmouseup=function(){
moveFlag = false
Si (haga clic en marcar){
Alerta("Haga clic para tener efecto");
}
}
}
}
};