A continuación se muestra la introducción a las funciones de la imagen que escribí:
Puede usar el mouse para arrastrar y crear una caja de recorte
Puede cambiar el tamaño de la caja de recorte
Haga clic en Aceptar para volver a los datos de la cosecha
principio
Hay dos formas de completar el cultivo:
1. Agregue la arrastre de arrastre de arrastre, etc. usando HTML5
2. Métodos tradicionales, utilizando eventos de ratón, mousedown, mousemove, etc.
Aquí adoptamos el método 2.
Formación de áreas recortadas
Para cortar, primero debemos formar un área de cultivo. La formación de esta área de cultivo se puede asociar con la distancia que se mueve el mouse. Cuanto más se mueve el ratón, más grande es el área de cultivo. Como se muestra en la figura a continuación:
Como se muestra en la figura anterior, la distancia de movimiento horizontal del ratón y la distancia de movimiento vertical se juntan el ancho y la altura del área de cultivo.
¿Y cómo calcular la distancia entre el movimiento horizontal y vertical? Cuando hacemos clic en el mouse, podemos obtener la posición de clic del mouse a través event , y cuando movemos el mouse, también podemos obtener la posición del mouse a través event . A través de dos cambios en la posición del ratón, podemos obtener la distancia de movimiento del mouse.
Los atributos para obtener la posición del mouse son ClientX y Clienty
Formación de área sombreada
Lo siguiente es dibujar el área de la sombra. La parte de la imagen recortada, excepto el área recortada, pertenece a la parte de la sombra, y el área tampoco se puede dibujar. Esta área se dibuja para permitir que el usuario vea el área recortada más claramente.
Dividí el área en cuatro partes: superior, inferior, izquierda y derecha, vea la distribución de la figura a continuación:
Entonces, ¿qué pasa si se calcula esta área? En este momento, el valor de compensación del elemento DOM debe usarse. El valor de desplazamiento izquierdo del área de recorte se resta del valor de desplazamiento izquierdo de la imagen en sí es el ancho de la sombra izquierda. El valor de desplazamiento superior del área de recorte se resta del valor de desplazamiento superior de la imagen es igual al valor de altura de la sombra superior. Como se muestra en la figura a continuación:
Después de obtener los valores de la sombra izquierda y la sombra superior, las propiedades de las otras sombras se pueden calcular a través de estos dos.
Hay dos formas de obtener el valor de compensación de la imagen.
1. Desventajas del uso de valores de OffsetLeft y Offsettop Si el elemento DOM tiene valores equivalentes de margen de borde, estos valores se calcularán en
2. Las desventajas de obtener el atributo CSS de DOM son CSS predefinidos relacionados con CSS predefinido si no se define la parte superior izquierda.
Ambos métodos tienen sus propias desventajas y se utilizan de acuerdo con diferentes circunstancias.
Recortando los límites
El cálculo del área de cultivo se calcula mediante la distancia en movimiento del mouse, por lo que el área de cultivo estará fuera de los límites, y esta situación se divide en dos tipos:
1. Cruce los límites durante el proceso de corte
2. Vaya más allá del límite al mover el área de cultivo
Así que hablemos de cómo evitar cruzar la línea.
Recorte sobre la línea
¿Qué es transfronterizo al cortar? El área de arrastre del mouse excede la imagen y forma un fuera de los límites, como se muestra en la siguiente figura:
Para tales límites, es necesario juzgar que el lado derecho del área de cultivo en relación con el lado izquierdo del navegador no puede exceder el lado derecho de la imagen y la posición en el lado izquierdo del navegador; Al mismo tiempo, la posición en la parte inferior del área de cultivo en relación con la parte superior del navegador no puede exceder la posición en la parte superior del navegador correspondiente a la parte superior de la imagen. O para ilustrar:
Cuando TX >= PX , forzar el valor de Tx a un valor fijo.
El método de cálculo de TX y PX, suponiendo que el área de cultivo es oTailor , el área de imágenes oPicture :
Tx = otailor.offsetWidth + otailor.offsetleft; px = Opicture.OffSetWidth + Opicture.OffSetleft;
Del mismo modo, el método anterior se puede usar para limitar el cruce del lado izquierdo, el cruce del lado superior y el cruce del lado inferior, por lo que no entraré en detalles.
Moverse a través de los límites
Moverse fuera de los límites significa que se ha formado el área de cultivo, pero los de color cruzado ocurren al mover el área de cultivo a través del ratón. Esta comprensión es relativamente simple, por lo que no la presentaré si dibujo imágenes. Este tipo de límite transfronterizo es consistente con el límite transfronterizo de arrastrar y soltar DOM, y se juzga al juzgar si el mouse se mueve más allá del área de la imagen.
El principio y el problema se han resuelto, y ahora comenzaremos a completar la función real.
Preparación
Antes de hacerlo, primero haga un trabajo de preparación, afire el cuchillo y pica la madera sin retrasar el trabajo de cortar madera.
Preparación de diseño de la página web
Los códigos clave para el diseño de la página web son los siguientes:
<iMg src = "./ Images/Img_2.jpg"> <Div> <Viv> </div> <div> </div> <div> </div> <div> </div> <divi ident id = "box_5"> </div> <div id = "box_6"> </div> <div id = "box_7"> </div> <div id = "box_8"> </div> <!-izquierda-> <div> </div>
Donde img_box representa el área de cultivo, outer representa el área de la sombra, y el div en img_box es el borde del área de cultivo
Los controles de estilo son los siguientes:
* {relleno: 0; margen: 0;} cuerpo {fondo: #454545; } .main {ancho: 500px; margen: 50px automático;}. main img {ancho: 500px; Posición: Absoluto; Izquierda: 450px; superior: 50px;}. img_box {desbordamiento: Hidden; Posición: Absoluto; arriba: 0px; Izquierda: 0px; Z-índice: 2;}. Outer {desbordamiento: oculto; Antecedentes: #000; Opacidad: 0.4; Posición: Absoluto; arriba: 0px; Izquierda: 0px; z-index: 0;}. box_border1, .box_border2, .box_border3, .box_border4 {opacity: 0.5;}. box_border1 {background: url (./ imágenes/border-anim-v.gif) repetir y izquierda arriba;} .box_border2 {fondo: url (./ imágenes/borde-anim-h.gif) repetir top;}. box_border3 {fondo: url (./ images/border-anim-v.gif) repetir-y right top;} .box_border4 {fondos: url (./ imágenes/border-anim-h.gif) repite-x dight fondo;} .box_handle {fondo: #fff; borde: 1px Solid #000; Opacidad: 0.5;}. Confrim {ancho: 80px; Altura: 35px;}El efecto de diseño es el siguiente:
Funciones generales
Después de completar el recorte de la imagen, a través del principio anterior, podemos saber que necesitamos obtener una gran cantidad de objetos de etiqueta y los atributos CSS de la etiqueta, etc., por lo que podemos escribir funciones generales para obtener mejor estos valores. como sigue:
DOM obtiene la función
/ * Get */function $ (dom) {function getDom (dom) {var str = dom.charat (0); Switch (str) {case '.' : this.ele = document.getElementsByClassName (dom.substring (1)) || null; romper; Caso '#': this.ele = document.getElementById (dom.substring (1)) || nulo; romper; predeterminado: if (document.getElementsByTagName (dom) .length) {this.ele = document.getElementsByTagName (DOM); } else if (document.getElementsByName (dom) .length) {this.ele = document.getElementsByName (dom); } else {this.ele = null; }} devuelve esto; }; getDom.prototype.get = function (num) {return this.ele [num] || this.ele; } getDom.prototype.insert = function (valor, num) {this.ele [num] .innerhtml = valor; } return new getDom (dom);}Función de obtención del atributo CSS
La adquisición de atributos CSS se divide en dos tipos. Uno es, es decir, usar currentStyle ; El otro son otros navegadores convencionales, utilizando getComputedStyle , y las siguientes son versiones compatibles:
/* Css get*/function getcss (o, key) {return o.currentstyle? O.CurrentStyle [Key]: document.defaultView.getComputedStyle (o, falso) [clave]; };Función de asignación
Al escribir, a menudo me encuentro con la asignación de estilos DOM. Por conveniencia, escribí especialmente una función para la asignación:
/** - Asignar funciones - @param: objes asignados obj - @param: operación realizada por opción - @Parma: valor asignar contenido*/function setAssign (obj, opción, valor) {switch (opción) {case 'width': obj.style.width = valor; romper; caso 'altura': obj.style.height = valor; romper; caso 'top': obj.style.top = value; romper; caso 'izquierda': obj.style.left = valor; romper; Caso 'posición': obj.style.position = valor; romper; caso 'cursor': obj.style.cursor = valor; }}Los preparativos se han completado básicamente, y ahora la escritura ha comenzado oficialmente.
Dibujo completo del área de cultivo haciendo clic y en movimiento de eventos
Establezca el monitoreo de eventos mousedown y mousemove para imágenes, de la siguiente manera:
// hace clic en el mouse en la imagen para activar Opicture.onMousEdown = function (ev) {// Event Object var oevent = ev || Window.event; // Posición inicial del mouse var tempx = oevent.clientx; var tempy = oevent.clienty; // Ajuste la posición del área de cultivo otailor.style.left = oevent.clientx + 'px'; otailor.style.top = oevent.clienty + 'px'; // El mouse mueve el área de recorte para dibujar el área de la sombra del área de cultivo documento. Window.event; // La posición actual del mouse menos la posición del mouse antes de que el mouse sea igual a la distancia del movimiento del mouse var más del tramo = oevent.clientx - tempx; var stop = oevent.clienty - tempy; // recortar el límite de los límites solo requiere limitar los lados correctos e inferiores if ((otailor.offsetleft+otailor.offsetwidth)> = (Opicture.OffSetleft+Opicture.OffSetWidth)) {Sleft = Opicture.OffStetlett+Opicture.OffsetWidth-Otailor.OffSetleft; } if ((otailor.offsettop+otailor.offsetheight)> = (Opicture.OffSettop+Opicture.OffSetheTeight)) {stop = Opicture.OffSettop+Opicture.OffSetheight - Otailor.OffSettop; } // dibujo de área de cultivo otailor.style.width = Sleft + 'Px'; otailor.style.height = stop + 'px'; // exhibición del área de cultivo otailor.style.display = 'block'; // pantalla de área de sombra para (var i = 0; i <oShadow.length; i ++) {oShadow [i] .style.display = 'block'; } // Sombra de dibujo de área de sombra (Opicture, Otailor, Oshadow); // agregar a la ala de borde de la cosecha (Odiv, Ohandle, Otailor); // Bloquear el evento predeterminado oevent.preventDefault (); }; // libera el mouse para cancelar el evento de movimiento documento.onmouseUp = function (ev) {var oevent = ev || Window.event; // Mueve el evento Cancelar documento.onmouseMove = null; // Bloquear el evento predeterminado oevent.preventDefault (); }; // Bloquear el evento predeterminado oevent.preventDefault ();}Dibujo del área de la sombra
/** * @param: oPicture picture dom object* @param: oTailor crop area dom object* @param: oShadow shadow area dom object*/ function shadow(oPicture , oTailor , oShadow) { // left shadow area setAssign(oShadow[0] , 'width' , (parseInt(getCss(oTailor , 'left')) - parseInt(getCss(oPicture , 'izquierda'))) + 'Px'); setAssign (Oshadow [0], 'altura', parseInt (getcss (opicción, 'izquierda'))) + 'px'); setAssign (Oshadow [0], 'altura', parseInt (getcss (opicción, 'altura')) + 'px'); setAssign (Oshadow [0], 'Left', parseInt (getCSS (opicure, 'izquierda')) + 'px') setAssign (Oshadow [0], 'top', parseInt (getcss (width ',' top ') +' px ') // el área de la sombra de la derecha está setAssign (OSHADOW [2],' width ',, (parseInt (getCSS (Opicture, 'Width')) - parseInt (getcss (otailor, 'ancho')) - parseInt (getcss (oshadow [0], 'ancho')) + 'px'); setAssign (Oshadow [2], 'izquierda', (parseInt (getcss (otailor, 'izquierda')) + parseInt (getcss (otailor, 'width')) + 'px'); setAssign (Oshadow [2], 'top', parseInt (getcss (opicure, 'top')) + 'px'); // Área de la sombra superior SetAssign (Oshadow [1], 'ancho', parseInt (getcss (otailor, 'ancho')) + 'px'); setAssign (Oshadow [1], 'altura', (parseInt (getCSS (otailor, 'top')) - parseInt (getcss (opicure, 'top')) + 'px'); setAssign (Oshadow [1], 'izquierda', (parseInt (getCSS (opicción, 'izquierda')) + parseInt (getcss (oshadow [0], 'width'))) + 'px'); setAssign (Oshadow [1], 'top', parseInt (getcss (opictura, 'top')) + 'px'); // El área de la sombra inferior setAssign (Oshadow [3], 'ancho', parseInt (getcss (otailor, 'ancho')) + 'px'); setAssign (Oshadow [3], 'altura', (parseInt (getcss (opicción, 'altura')) - parseInt (getcss (otailor, 'altura')) - parseint (getcss (oshadow [1], 'altura')) + 'Px'); setAssign (Oshadow [3], 'Left', (parseInt (getCSS (opture, 'izquierda')) + parseInt (getcss (oshadow [0], 'width'))) + 'px'); setAssign (Oshadow [3], 'top', (parseInt (getcss (otailor, 'top')) + parseInt (getcss (otailor, 'altura')) + 'px');}Tenga en cuenta que en el uso real de las páginas web, si no hay un atributo izquierdo o superior en el CSS de la imagen en el diseño, el código anterior generará un error. Offsetleft y Offsettop deben usarse en su lugar.
Agregar borde de cultivo
En el diagrama de diseño liberado, puede ver el borde del cultivo, y cada una de las cuatro esquinas y cuatro lados tiene una pequeña forma cuadrada. La adición no es solo para distinguir entre el área de corte y el área no cortada, sino también para proporcionar conveniencia para el siguiente paso de agregar el área de corte estirado. Comencemos a escribir el código:
/*** Dibujo de borde de cultivo* @param: Odiv todos los objetos de borde* @param: Ohandle Dotted Edge* @param: Otailor Crop Object*/Function TailorBorder (Odiv, Ohandle, Otailor) {// Inicializar el borde para (var i = 0; i <div.length; i ++) {setAssign (Odiv [i], 'posicion', 'absoluta'); setAssign (odiv [i], 'top', '0px'); setAssign (odiv [i], 'izquierda', '0px'); setAssign (odiv [i], 'izquierda', '0px'); setAssign (odiv [i], 'ancho', parseInt (getcss (otailor, 'ancho')) + 'px'); setAssign (Odiv [i], 'altura', parseInt (getcss (otailor, 'altura')) + 'px'); } /* Dibujo de borde de tipo punto* / // dibujo de borde de cuatro corner-like para (var i = 0; i <4; i ++) {// dibujo tipo dot setAssign (ohandle [i], 'posición', 'absoluto'); setAssign (Ohandle [i], 'ancho', '5px'); setAssign (Ohandle [i], 'altura', '5px'); // 0 2 significa el if (i % 2 == 0) {setAssign (ohandle [i], 'izquierda', '0px'); setAssign (ohandle [i], 'top', (i == 0? '0px': (parseInt (getCSS (otailor, 'altura')) - 8) + 'px')); } else {// setAssign (ohandle [i], 'izquierda', (parseInt (getcss (otailor, 'ancho')) - 6) + 'px'); setAssign (Ohandle [i], 'top', (i == 1? '0px': parseInt (getCSS (otailor, 'altura')) - 8) + 'Px'); }} // borde punteado de cuatro lados para (var i = 4; i <ohandle.length; i ++) {setAssign (ohandle [i], 'posición', 'absoluto'); setAssign (Ohandle [i], 'ancho', '5px'); setAssign (Ohandle [i], 'altura', '5px'); // 4 6 indica un borde de puntos superior e inferior si (i % 2 == 0) {setAssign (ohandle [i], 'izquierda', parseInt (getcss (otailor, 'width')) / 2 + 'px'); setAssign (Ohandle [i], 'top', (i == 4? '0px': (parseInt (getcss (otailor, 'altura')) - 8) + 'px')); } else {// DOT izquierdo y derecho setAssign (Ohandle [i], 'top', parseInt (getCSS (otailor, 'altura')) / 2 + 'px'); setAssign (ohandle [i], 'top', parseInt (getcss (otailor, 'altura')) / 2 + 'px'); setAssign (ohandle [i], 'izquierda', (i == 5? '0px': parseInt (getcss (otailor, 'ancho')) - 8) + 'px'); }}} En el diseño, los primeros cuatro divs con el nombre de la clase de área de recorte box_handle representan puntos en cuatro esquinas, y los últimos cuatro representan puntos en el medio del borde, todos distribuidos en sentido horario. Después de la finalización, el efecto es el siguiente:
Monitorear áreas sombreadas
Se dibujan el área de cultivo y el área de la sombra. Ahora agregue una pequeña función para cancelar el área de cultivo cuando el mouse haga clic en el área no cultivada (es decir, el área de la sombra).
// establece el tiempo para la configuración del área de la sombra, cuando el área de cultivo desaparece, el área de la sombra desaparece para (var i = 0; i <oShadow.length; i ++) {oShadow [i] .index = i; Oshadow [i] .onMouseDown = function () {otailor.style.display = 'none'; otailor.style.width = '0px'; otailor.style.hegiht = '0px'; for (var i = 0; i <oShadow.length; i ++) {Oshadow [i] .style.display = 'None'; Oshadow [i] .style.left = '0px'; Oshadow [i] .style.top = '0px'; }}}Monitorear la posición del movimiento del mouse
A continuación, agregue la función del estiramiento del área de cultivo, que da diferentes efectos cuando el mouse se mueve al borde en forma de punto en el borde.
Agregar efecto de visualización del mouse
// Configuración de monitoreo de borde puntual Operaciones correspondientes otailor.onmouseMove = function (ev) {var otarget = oevent.target; switch (oTarget.id) {case 'box_1': // superior a la izquierda setAssign (otailor, 'cursor', 'nw-resize'); romper; case 'box_2': // superior a la derecha setAssign (otailor, 'cursor', 'ne-rese'); romper; case 'box_3': // baja izquierda setAssign (otailor, 'cursor', 'sw-rese'); romper; case 'box_4': // inferior a la derecha setAssign (otailor, 'cursor', 'se-rese'); romper; case 'box_5': // superior setAssign (otailor, 'cursor', 'n-resize'); romper; case 'box_6': // izquierda setAssign (otailor, 'cursor', 'w-resize'); romper; Case 'box_7': // Bajo izquierdo setAssign (otailor, 'cursor', 's-rese'); romper; case 'box_8': // right setAssign (otailor, 'cursor', 's-resize'); romper; case 'box_8': // right setAssign (otailor, 'cursor', 'e-rese'); romper; predeterminado: // El área de cultivo muestra una solicitud móvil setAssign (otailor, 'cursor', 'mover'); romper; }}Dado que hay muchos divs para monitorear, se agrega por delegación de eventos, lo cual es inconveniente para la demostración. Los estudiantes interesados pueden probarlo ellos mismos.
Agregar efecto de estiramiento
Código
// Mover evento en el área de cultivo otailor.onMousEdown = function (ev) {// Event Event Object var oevent = ev || Window.event; // Obtener estado del cursor var oCur = getCSS (otailor, 'cursor'); // Posición inicial del mouse var stmpx = oevent.clientx; var stmpy = oevent.clienty; // Obtenga los atributos del área de cultivo para salvarlos con un objeto para facilitar llamar a los avances. OATTRS.TOP = GETCSS (OTAILOR, 'TOP'); OATTRS.WIDTH = GETCSS (OTAILOR, 'Ancho'); OATTRS.HEight = getCSS (otailor, 'altura'); document.OnMouseMove = function (ev) {// Mover Event Object var oevent = ev || Window.event; // Posición actual del mouse menos la posición inicial del mouse es igual a la distancia del movimiento del mouse var sleftt = oevent.clientx - stmpx; var stopt = oevent.clienty - stmpy; // indica la distancia del movimiento del ratón var otmpheight = ''; var otmptop = ''; var otmpWidth = ''; var otmpleft = ''; switch (ocur) {case 'nw -resize': // superior izquierdo otmpwidth = parseInt (oattrs.width) - Sleftt; otmpheight = parseint (oattrs.height) - stopt; otmpleft = parseint (oattrs.left) + Sleftt; OTMPTOP = parseInt (oattrs.top) + stopt; romper; Caso 'ne-resize': // superior a la derecha // En este momento, el ancho no puede restar la distancia de movimiento del mouse porque la distancia de movimiento en este momento es un valor positivo otmpwidth = parseInt (oattrs.width) + Sleftt; otmpheight = parseint (oattrs.height) - stopt; // No se requiere valor a la izquierda para mover la esquina superior derecha porque el sonido predeterminado se mueve a la derecha otmptop = parseInt (oattrs.top) + stopt; romper; Caso 'SW -Resize': // Bajo izquierdo // lo mismo que la altura superior derecha debe agregarse a la distancia de movimiento del mouse otmpWidth = parseInt (oattrs.width) - Sleftt; otmpheight = parseint (oattrs.height) + stopt; otmpleft = parseint (oattrs.left) + Sleftt; romper; Caso 'SE-Resize': // Baja a la derecha // Combinación de la parte inferior izquierda y superior a la derecha al mismo tiempo Retire la izquierda y superior OTMPWIDTH = parseInt (oattrs.width) + Sleftt; otmpheight = parseint (oattrs.height) + stopt; romper; case 'n -resize': // top otmpheight = parseInt (oattrs.height) - stopt; OTMPTOP = parseInt (oattrs.top) + stopt; romper; caso 'W -Resize': // Left otmpWidth = parseInt (oattrs.width) - Sleftt; otmpleft = parseint (oattrs.left) + Sleftt; romper; case 's-resize': // bajo otmpheight = parseInt (oattrs.height) + stopt; romper; caso 'E-Resize': // Right var otmpWidth = parseInt (oattrs.width) + Sleftt; romper; Valor predeterminado: // de lo contrario, es el área de cosecha móvil Tailormove (Oevent, Otailor, Opicture, Oshadow); romper; } // Tome el límite if (parseInt (getcss (otailor, 'top')) <= opictor.offsettop) {otmpheight = parseInt (getcss (opicure, 'altura')) - - - (Opicture.OffSettop+parseInt (getCSS (opicción, 'altura')))-parseInt (getcss (otailor, 'top')))); OTMPTOP = OPICTURE.OFFSETTOP; } else if (opicure.offsettop+parseInt (getcss (opicure, 'altura')) <= (parseInt (getcss (otailor, 'top'))+parseInt (getcss (otailor, 'altura')))) {// Tire hacia abajo al límite otmpheight = Opicture.OffSettop+parseInt (getCSS (opicción, 'altura'))) - parseInt (getcss (otailor, 'top')); } // tire de la izquierda al límite if ((parseInt (getcss (otailor, 'izquierda'))) <= opictor.offsetleft) {otmpWidth = parseInt (getcss (opicure, 'width') - -) (Opicture.OffSetleft+parseInt (getCSS (opicción), 'ancho')-parseInt (getcss (otailor, 'izquierda'))) otmpleft = opicure.offsetleft; } else if (parseInt (getCSS (otailor, 'izquierda'))+parseInt (getCSS (otailor, 'izquierda'))> = (opicte.offsetleft+opicte.offsetwidth) {// tire de la derecha al límite otmpwidth = opicicture.offsetleft+opicetwidth) - - parseint (getcss (otailor, 'izquierda')); } // asignar if (otmpWidth) {setAssign (otailor, 'ancho', otmpWidth + 'px'); } if (otmpheight) {setAssign (otailor, 'altura', otmpheight + 'px'); } if (otmpleft) {setAssign (otailor, 'izquierda', otmpleft + 'px'); } if (otmptop) {setAssign (otailor, 'top', otmptop + 'px'); } // Sombra de dibujo de área de sombra (Opicture, Otailor, Oshadow); // agregar a la ala de borde de la cosecha (Odiv, Ohandle, Otailor); }; // Al liberar el mouse, tenga en cuenta que cancela el evento de movimiento document.onmouseUp = function (ev) {// event Event Object var oevent = ev || Window.event; document.onmouseMove = null; oevent.preventDefault (); } oevent.preventDefault (); };Presta atención al cálculo de la distancia en movimiento cuando se estira, especialmente cuando se mueve hacia arriba y hacia la izquierda. Preste atención a cambiar los valores izquierdo y superior del área recortada al mismo tiempo, de lo contrario, solo aumentará hacia abajo y hacia la derecha. Hablemos sobre cómo calcular en detalle:
principio
Tomando el estiramiento del mouse a la esquina superior izquierda como ejemplo, la distancia en movimiento del mouse es consistente con lo que se mencionó anteriormente, pero en este momento, tenga en cuenta que el valor calculado es un número negativo. Por lo tanto, al calcular el valor agregado del área de cultivo, el valor debe ser restado por el ancho o la altura del área de cultivo original. Al mismo tiempo, tanto como aumente el ancho, se debe restar el valor de compensación de la izquierda del área de cultivo. De lo contrario, el efecto mostrado es que el área de cultivo aumenta a la derecha, como se muestra en la figura a continuación:
En la figura anterior, el área verde es el área de cultivo después de que se agregan el ancho y la altura cuando se estiran. Si no se realiza el ajuste de desplazamiento, el área amarilla es el área de cultivo después del salto de compensación, y las dos áreas superpuestas son el área de cultivo original.
Esto se estira en la esquina superior izquierda, y el estiramiento en la esquina inferior izquierda es similar a otras cosas. Puede ponerlo en la dirección superior de acuerdo con la dirección superior.
Y la otra clave es que estirar y cruzar el límite se ha mencionado anteriormente, por lo que ya no lo describiré.
Movimiento de áreas recortadas
Ahora hablemos de la última función, el movimiento del área de cultivo. Cuando el mouse se mueve dentro del área de cultivo, se activará un evento de movimiento. En este momento, el área de cultivo se puede mover. El código es el siguiente:
/* Movimiento del área de cultivo*/function Tailormove (EV, Otailor, Opicture, Oshadow) {var oevent = ev || Window.event; var otmpx = oevent.clientx - otailor.offsetleft; var otmpy = oevent.clienty - otailor.offsettop; document.onmouseMove = function (ev) {var oevent = ev || Window.event; oleft = oevent.clientx - otmpx; otop = oevent.clienty - otmpy; if (oleft <opicture.offsetleft) {olefeft = opticure.offsetleft; } else if (oleft> (opicure.offsetleft + opicture.offsetwidth - otailor.offsetwidth)) {oleft = opicure.offsetleft + opicture.offsetwidth - otailor.offsetwidth; } if (otop <opicture.offsettop) {otop = opicure.offsettop; } else if (otop> (opicure.offsettop + opicte.offsetheight - otailor.offsetheTeight)) {otop = opictor.offsettop + opicte.offsetheight - otailor.offsetheTheight; } otailor.style.left = (oleft)+ 'px'; otailor.style.top = (otop) + 'px'; Shadow (Opicture, Otailor, Oshadow); }}Obtener la posición de la cosecha
La función del efecto de cultivo se completa básicamente, por lo que debe obtener la posición del cultivo. En primer lugar, debe saber qué propiedades necesita obtener. Según la operación de la biblioteca GD de PHP , debe conocer las coordenadas del punto de partida del cultivo y el ancho y la altura del cultivo. Utilizo una función para obtener estos datos y encapsularlos y devolver:
function getele () {var opicicture = $ ('img'). get (0); var otailor = $ ('. img_box'). get (0); Oattrs.leftx = (parseInt (getcss (otailor, 'izquierda'))) - opictor.offsetleft); OATTRS.LCTY = (parseInt (getCSS (otailor, 'top'))) - opictor.offsettop); OATTRS.TWIDTH = (parseInt (getcss (otailor, 'ancho'))); OATTRS.Theight = (parseInt (getCSS (otailor, 'altura'))); return oattrs;}Hay otro problema. Si las imágenes en la página web se comprimen con CSS, la posición obtenida aquí será diferente del tamaño de la cosecha de lo que imaginó. El rango de la imagen recortada puede ser más grande (la imagen original es más grande), o puede ser más pequeña (la imagen original es más pequeña).
Si se puede obtener el tamaño de la imagen original, puede recortar de acuerdo con la relación de la imagen comprimida a la imagen original, de modo que se pueda obtener la imagen de recorte correcta.
Ok, se completa una función simple de recorte de imágenes, y puede usar AJAX para pasarlo al fondo para su procesamiento.
El contenido de este artículo termina aquí. Si tiene alguna pregunta, deje un mensaje para discutir. Espero que este artículo sea útil para todos en aprender JavaScript.