Vous trouverez ci-dessous l'introduction aux fonctions de l'image que je me suis écrite:
Vous pouvez utiliser la souris pour faire glisser et créer une boîte de recadrage
Peut changer la taille de la boîte de recadrage
Cliquez sur OK pour revenir aux données des cultures
principe
Il y a deux façons de terminer la culture:
1. Ajouter une gouttes de glisser-déposer, etc. en utilisant html5
2. Méthodes traditionnelles, en utilisant des événements de souris, Mousedown, Mousemove, etc.
Ici, nous adoptons la méthode 2.
Formation de zones recadrées
Pour couper, nous devons d'abord former une zone de culture. La formation de cette zone de culture peut être associée à la distance déplacée par la souris. Plus la souris se déplace loin, plus la zone de culture est grande. Comme indiqué dans la figure ci-dessous:
Comme le montre la figure ci-dessus, la distance de mouvement horizontale de la souris et la distance de mouvement vertical forment ensemble la largeur et la hauteur de la zone de culture.
Et comment calculer la distance entre le mouvement horizontal et vertical? Lorsque nous cliquons sur la souris, nous pouvons obtenir la position de clic de la souris via event , et lorsque nous déplaçons la souris, nous pouvons également obtenir la position de la souris via event . Grâce à deux changements dans la position de la souris, nous pouvons obtenir la distance de mouvement de la souris.
Les attributs pour obtenir la position de la souris sont ClientX et Clienty
Formation de zone ombrée
Ensuite, c'est de dessiner la zone de l'ombre. La partie de l'image recadrée, sauf que la zone courte appartient à la partie de l'ombre, et la zone ne peut pas non plus être dessinée. Cette zone est dessinée pour permettre à l'utilisateur de voir la zone recadrée plus clairement.
J'ai divisé la zone en quatre parties: supérieur, inférieur, gauche et droit, voir la distribution de la figure ci-dessous:
Et si cette zone est calculée? À l'heure actuelle, la valeur de décalage de l'élément DOM doit être utilisée. La valeur de décalage gauche de la zone de découpage est soustraite de la valeur de décalage gauche de l'image elle-même est la largeur de l'ombre gauche. La valeur de décalage supérieur de la zone de découpage est soustraite de la valeur de décalage supérieur de l'image est égale à la valeur de hauteur de l'ombre supérieure. Comme indiqué dans la figure ci-dessous:
Après avoir obtenu les valeurs de l'ombre gauche et de l'ombre supérieure, les propriétés des autres ombres peuvent être calculées à travers ces deux.
Il y a deux façons d'obtenir la valeur de décalage de l'image
1. Inconvénients de l'utilisation de valeurs de décalage et de décalage Si l'élément DOM a des valeurs équivalentes de marge de bordure, ces valeurs seront calculées dans
2. Les inconvénients de l'obtention de l'attribut CSS de DOM sont des CS prédéfinis liés au CSS prédéfini si le haut laissé n'est pas défini.
Les deux méthodes ont leurs propres inconvénients et sont utilisées selon différentes circonstances
Cost à l'extérieur des limites
Le calcul de la zone des cultures est calculé par la distance mobile de la souris, de sorte que la zone de culture sera hors limites, et cette situation est divisée en deux types:
1. Traversez les limites pendant le processus de coupe
2. Va au-delà de la frontière lors du déplacement de la zone de culture
Parlons donc de la façon d'éviter le franchissement de la ligne.
Croping sur la ligne
Qu'est-ce que le transfrontalier lors de la coupe? La zone de traînée de la souris dépasse l'image et forme une limite, comme le montre la figure suivante:
Pour ces limites, il est nécessaire de juger que le côté droit de la zone de culture par rapport au côté gauche du navigateur ne peut dépasser le côté droit de l'image et la position sur le côté gauche du navigateur; Dans le même temps, la position au bas de la zone de culture par rapport au haut du navigateur ne peut pas dépasser la position sur le haut du navigateur correspondant au haut de l'image. Ou pour illustrer:
Lorsque TX >= PX , forcez la valeur de TX à une valeur fixe.
La méthode de calcul du TX et du PX, en supposant que la zone de culture est oTailor , la zone d'image oPicture :
Tx = otailor.offsetwidth + otailor.offsetleft; px = opicture.offsetWidth + opiCture.offSetLeft;
De même, la méthode ci-dessus peut être utilisée pour limiter la traversée du côté gauche, la traversée du côté supérieur et la traversée du côté inférieur, donc je n'entrerai pas dans les détails.
Déplacez-vous à travers les limites
Le déménagement des limites signifie que la zone de culture s'est formée, mais le croisement se produit lors du déplacement de la zone de culture à travers la souris. Cette compréhension est relativement simple, donc je ne le présenterai pas si je dessine des images. Ce type de limite transfrontalière est cohérent avec la limite transfrontalière DOM glisser-déposer et est jugée en jugeant si la souris se déplace au-delà de la zone d'image.
Le principe et le problème ont été résolus, et maintenant nous allons commencer à remplir la fonction réelle.
Préparation
Avant de le faire, effectuez d'abord un peu de travail de préparation, aiguisez le couteau et hachez le bois sans retarder le travail de coupe du bois.
Préparation de disposition de la page Web
Les codes clés pour la disposition des pages Web sont les suivants:
<img src = "./ images / img_2.jpg"> <div> <div> </ div> <div> </ div> <div> </ div> <div> </ div> <div id = "box_1"> </ div> <div id = "box_2"> </ div> <div id = "box_3"> </v> <v id = "box_4"> </ div> id = "box_5"> </ div> <div id = "box_6"> </ div> <div id = "box_7"> </ div> <div id = "box_8"> </ div> <! - Left -> <div> </ div> <! - Top -> <div> <Div> </ Div> Button> </ div> <! - Next-> <Div>
où img_box représente la zone de culture, outer représente la zone de l'ombre, et la div dans img_box est la bordure de la zone de culture
Les commandes de style sont les suivantes:
* {rembourrage: 0; marge: 0;} corps {arrière-plan: # 454545; } .main {width: 500px; marge: 50px auto;}. Main img {largeur: 500px; Position: absolue; Gauche: 450px; TOP: 50px;}. IMG_BOX {Overflow: Hidden; Position: absolue; En haut: 0px; gauche: 0px; Z-index: 2;}. Exter {Overflow: Hidden; Contexte: # 000; Opacité: 0,4; Position: absolue; En haut: 0px; gauche: 0px; z-index: 0;}. box_border1, .box_border2, .box_border3, .box_border4 {opacité: 0,5;}. box_border1 {background: url (./ images / border-v.gif) répéter-y top gauche;} .box_border2 {background: url (./. top;}. Box_Border3 {background: url (./ images / border-anim-v.gif) repeat-y top à droite;} .box_border4 {background: url (./ images / border-anim-h.gif) repeat-x inférieur droit;} .box_handle {background: #fff; bordure: 1px solide # 000; Opacité: 0,5;}. CONFRIM {largeur: 80px; hauteur: 35px;}L'effet de mise en page est le suivant:
Fonctions générales
Après avoir terminé le recadrage d'image, à travers le principe ci-dessus, nous pouvons savoir que nous devons obtenir un grand nombre d'objets TAG et les attributs CSS de la balise, etc., afin que nous puissions écrire des fonctions générales pour mieux obtenir ces valeurs. comme suit:
Dom obtient la fonction
/ * Get * / function $ (dom) {fonction getDom (dom) {var str = dom.charat (0); commutateur (str) {case '.' : this.ele = document.getElementsByClassName (dom.substring (1)) || null; casser; case '#': this.ele = document.getElementById (dom.substring (1)) || nul; casser; Default: 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; }} renvoie ceci; }; getDom.prototype.get = function (num) {return this.ele [num] || this.ele; } getDom.prototype.insert = function (valeur, num) {this.ele [num] .innerhtml = valeur; } Renvoie un nouveau getDom (DOM);}Fonction d'obtention d'attribut CSS
L'acquisition des attributs CSS est divisée en deux types. L'un est IE, en utilisant currentStyle ; L'autre est d'autres navigateurs grand public, en utilisant getComputedStyle , et les éléments suivants sont des versions compatibles:
/ * Css get * / function getcss (o, key) {return o.currentStyle? O.CurrentStyle [KEY]: document.defaultView.getCompuledStyle (o, false) [Key]; };Fonction d'attribution
Lors de l'écriture, je rencontre souvent l'affectation des styles DOM. Pour plus de commodité, j'ai spécialement écrit une fonction de cession:
/ ** - Fonction Assign - @Param: objet Assédé OBJ - @param: opération effectuée par option - @Parma: Value Assign Content * / function setAssign (obj, option, valeur) {switch (option) {case 'width': obj.style.width = value; casser; Cas «hauteur»: obj.style.height = valeur; casser; case 'top': obj.style.top = valeur; casser; case 'Left': obj.style.left = valeur; casser; Cas «position»: obj.style.position = valeur; casser; case 'curseur': obj.style.cursor = valeur; }}Les préparatifs ont été essentiellement achevés, et maintenant l'écriture a officiellement commencé.
Dessin complet de la zone de culture en cliquant et en déménageant
Définissez la surveillance des événements mousedown et mousemove pour les images, comme suit:
// Mouse clique sur l'image pour déclencher OPICTURE.ONMOUSEDOWN = fonction (ev) {// objet d'événement var oevent = ev || window.event; // position de souris initiale var tempx = oevent.clientx; var tempy = oevent.clienty; // ajuster la position de la zone de culture Otailor.style.left = oevent.clientx + 'px'; otailor.style.top = oevent.clienty + 'px'; // Mouse déplace la zone de dérivation pour dessiner le document de zone d'ombre de la zone de culture.onMouseMove = function (ev) {// souris déplace l'objet de l'événement var oevent = ev || window.event; // La position actuelle de la souris moins la position de la souris avant la souris est égale à la distance du mouvement de la souris var sleft = oevent.clientx - tempx; var stop = oevent.clienty - tempy; // recadré la limite des limites ne nécessite que limiter les côtés droits et inférieurs si ((otailor.offsetleft + otailor.offsetwidth)> = (opicture.offsetleft + opicture.offsetwidth - otailor.offsetleft; } if ((otailor.offsettop + otailor.offsetheight)> = (opiicture.offsettop + opicture.offsetheight)) {stop = opicture.offsettop + opicture.offsetheight - otailor.offsettop; } // Dessin de zone de culture otailor.style.width = Sleft + 'PX'; otailor.style.height = stop + 'px'; // Affichage de la zone de recadrage otailor.style.display = 'block'; // Affichage de la zone d'ombre pour (var i = 0; i <oshadow.length; i ++) {oshadow [i] .style.display = 'block'; } // Shadow Area Drawing Shadow (Opicture, Otailor, Oshadow); // Ajouter un tailleur de bord de culture (odiv, ohandle, otailor); // bloque l'événement par défaut oevent.preventDefault (); }; // Libérez la souris pour annuler le document de l'événement de mouvement. window.event; // Déplacer l'événement Annuler Document.OnMouSEMOVE = NULL; // bloque l'événement par défaut oevent.preventDefault (); }; // bloque l'événement par défaut oevent.preventDefault ();}Dessin de la zone de l'ombre
/** * @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 , «gauche»))) + «px»); setAssign (Oshadow [0], 'Height', parseInt (getcss (opiicture, 'gauche'))) + 'px'); setAssign (Oshadow [0], «Height», parseInt (getcss (opiicture, «height»)) + «px»); setAssign (Oshadow [0], 'gauche', parseInt (getcss (opiicture, 'gauche')) + 'px') setAssign (Oshadow [0], 'top', parseInt (getcss (opicture, 'top')) + 'px') // la zone fantôme à droite est SetAssign (Oshadow [2], 'outwth', (parseInt (getCSS (Opicture, 'Width')) - paSeInt (getcss (Otailor, 'Width')) - paSeInt (getcss (Oshadow [0], 'Width')) + 'PX'); setAssign (Oshadow [2], «Left», (parseInt (getcss (otailor, «gauche»))) + parseInt (getcss (otailor, «width»)))) + «px»); setAssign (Oshadow [2], «Top», ParseInt (getCSS (OPICTURE, «TOP»)) + «PX»); // zone d'ombre supérieure setAssign (Oshadow [1], «largeur», parseInt (getcss (otailor, «largeur»)) + «px»); setAssign (Oshadow [1], 'Height', (paSeInt (getcss (otailor, 'top')) - parseInt (getcss (opiicture, 'top'))) + 'px'); setAssign (Oshadow [1], «Left», (parseInt (getcss (opiicture, «Left»))) + parseInt (getcss (oshadow [0], «largeur»))) + «px»); setAssign (Oshadow [1], «top», parseInt (getcss (opiicture, «top»)) + «px»); // la zone de l'ombre inférieure setAssign (Oshadow [3], 'width', parseInt (getcss (otailor, 'width')) + 'px'); setAssign (Oshadow [3], 'Height', (paSeInt (getcss (opiicture, 'height')) - paSeInt (getcss (otailor, 'height')) - parseInt (getcss (Oshadow [1], 'Height')))) + 'px'); setAssign (Oshadow [3], «Left», (parseInt (getcss (opiicture, «gauche»)) + parseInt (getcss (oshadow [0], «width»))) + «px»); setAssign (Oshadow [3], 'TOP', (parseInt (getcss (otailor, 'top')) + paSeInt (getcss (otailor, 'height'))) + 'px');}Notez que dans l'utilisation réelle des pages Web, s'il n'y a pas d'attribut gauche ou supérieur dans l'image CSS dans la mise en page, le code ci-dessus générera une erreur. Offsetleft et Offsettop doivent être utilisés à la place.
Ajouter la frontière des cultures
Dans le diagramme de disposition libéré, vous pouvez voir le bord de la récolte, et chacun des quatre coins et quatre côtés a une petite forme carrée. L'ajout n'est pas seulement de faire la distinction entre la zone de coupe et la zone non coupe, mais aussi pour assurer la commodité de la prochaine étape pour ajouter la zone de coupe étirée. Commençons à écrire le code:
/ ** * Dessin de bordure de recadrage * @param: ODIV tous les objets de bordure * @param: ohandle edge en pointillé * @param: otailor objet Crop * / function Tailorder (odiv, ohandle, otailor) {// initialiser la bordure pour (var i = 0; i <odiv.length; i ++) {setAsssign (odiv [i], 'position', 'Absolut'); setAssign (odiv [i], 'top', '0px'); setAssign (odiv [i], «gauche», «0px»); setAssign (odiv [i], «gauche», «0px»); setAssign (odiv [i], 'width', parseInt (getcss (otailor, 'width')) + 'px'); setAssign (odiv [i], «hauteur», parseInt (getcss (otailor, «hauteur»)) + «px»); } / * Dessin de bord dot-like * / // Dessin de bord à point à quatre coins pour (var i = 0; i <4; i ++) {// Drawing setAsign (ohandle [i], 'position', 'absolu'); setAssign (ohandle [i], 'width', '5px'); setAssign (ohandle [i], «hauteur», «5px»); // 0 2 signifie le point gauche-type if (i% 2 == 0) {setAssign (ohandle [i], 'gauche', '0px'); setAssign (ohandle [i], 'top', (i == 0? '0px': (parseInt (getcss (otailor, 'height')) - 8) + 'px')); } else {// Dot-like setAssign (ohandle [i], 'gauche', (parseInt (getcss (otailor, 'width')) - 6) + 'px'); setAssign (ohandle [i], 'top', (i == 1? '0px': parseInt (getcss (otailor, 'height')) - 8) + 'px'); }} // Bordure pointillée à quatre côtés pour (var i = 4; i <ohandle.length; i ++) {setAssign (ohandle [i], 'position', 'absolu'); setAssign (ohandle [i], 'width', '5px'); setAssign (ohandle [i], «hauteur», «5px»); // 4 6 indique une bordure pointillée supérieure et inférieure if (i% 2 == 0) {setAssign (ohandle [i], 'gauche', parseInt (getcss (otailor, 'width')) / 2 + 'px'); setAssign (ohandle [i], 'top', (i == 4? '0px': (parseInt (getcss (otailor, 'height')) - 8) + 'px')); } else {// dot gauche et droit setAssign (ohandle [i], 'top', parseInt (getcss (otailor, 'height')) / 2 + 'px'); setAssign (ohandle [i], 'top', parseInt (getcss (otailor, 'height')) / 2 + 'px'); setAssign (ohandle [i], 'gauche', (i == 5? '0px': parseInt (getcss (otailor, 'width')) - 8) + 'px'); }}} Dans la disposition, les quatre premiers divs avec le nom de classe de la zone de décollement box_handle représentent les points à quatre coins, et les quatre derniers représentent des points au milieu du bord, tous distribués dans le sens horaire. Une fois terminé, l'effet est le suivant:
Surveillez les zones ombragées
La zone de culture et la zone de l'ombre sont dessinées. Ajoutez maintenant une petite fonction pour annuler la zone de recadrage lorsque la souris clique sur la zone non croisée (c'est-à-dire la zone de l'ombre).
// Réglez le temps pour le réglage de la zone de l'ombre, lorsque la zone de recadrage disparaît, la zone de l'ombre disparaît pour (var i = 0; i <oshadow.length; i ++) {Oshadow [i] .index = i; Oshadow [i] .onmousedown = function () {otailor.style.display = 'Aucun'; otailor.style.width = '0px'; otailor.style.hegiht = '0px'; for (var i = 0; i <oshadow.length; i ++) {Oshadow [i] .style.display = 'Aucun'; Oshadow [i] .style.left = '0px'; Oshadow [i] .style.top = '0px'; }}}Surveiller la position de mouvement de la souris
Ensuite, ajoutez la fonction de l'étirement de la zone de culture, ce qui donne des effets différents lorsque la souris se déplace vers la bordure en forme de point sur le bord.
Ajouter l'effet d'affichage de la souris
// Paramètres de surveillance des bordures pointues opérations correspondantes otailor.onMouSemove = function (ev) {var otarget = oevent.target; switch (otarget.id) {case 'box_1': // supérieur gauche setAssign (otailor, 'cursor', 'nw-résiSize'); casser; case 'box_2': // Upper droite setAssign (otailor, 'cursor', 'ne-résiSize'); casser; case 'box_3': // en bas à gauche setAssign (otailor, 'cursor', 'sw-résiSize'); casser; case 'box_4': // inférieur droit setAssign (otailor, 'cursor', 'se-résiSize'); casser; case 'box_5': // upper setAssign (otailor, 'cursor', 'n-résiSize'); casser; case 'box_6': // Left setAssign (otailor, 'cursor', 'w-résiSize'); casser; case 'box_7': // en bas à gauche setAssign (otailor, 'cursor', 's-résiSize'); casser; case 'box_8': // droit setAssign (otailor, 'cursor', 's-résiSize'); casser; case 'box_8': // droit setAssign (otailor, 'cursor', 'e-résiSize'); casser; par défaut: // La zone de recadrage affiche une invite mobile setAssign (Otailor, «Cursor», «Move»); casser; }}Puisqu'il y a beaucoup de divs à surveiller, il est ajouté par délégation d'événements, ce qui n'est pas pratique pour la démonstration. Les étudiants intéressés peuvent le tester eux-mêmes.
Ajouter un effet d'étirement
Code
// Déplacer l'événement dans la zone de culture otailor.onmousedown = function (ev) {// objet d'événement de l'événement var oevent = ev || window.event; // Obtenez l'état du curseur var ocur = getcss (otailor, «curseur»); // position de souris initiale var stmpx = oevent.clientx; var stmpy = oevent.clienty; // Obtenez les attributs de la zone de culture pour les sauver avec un objet pour faciliter l'appel OATTRS.LEFT = Getcss (Otailor, «Left»); OATTRS.TOP = Getcss (Otailor, 'TOP'); OATTRS.Width = getcss (Otailor, 'Width'); OATTRS.HEight = getCSS (Otailor, 'Height'); document.onMouseMove = function (ev) {// Move Event object var oevent = ev || window.event; // Position de souris actuelle moins La position initiale de la souris est égale à la distance du mouvement de la souris var Sleftt = OEVENT.Clientx - STMPX; var stopt = oevent.clienty - stmpy; // indique la distance du mouvement de la souris var otmpheight = ''; var otmpptop = ''; var otmpWidth = ''; var otmpleft = ''; commutateur (ocur) {case 'nw-résiSize': // supérieur gauche otmpwidth = parseInt (oattrs.width) - Sleftt; otMPheight = paSeInt (oAttrs.Height) - stopt; otmpleft = parseInt (oAtTrs.Left) + Sleftt; otMPtop = paSeInt (oAtTr.top) + stopt; casser; Case 'ne-résiSize': // supérieur droit // À l'heure actuelle, la largeur ne peut pas soustraire la distance de mouvement de la souris car la distance de mouvement à l'heure actuelle est une valeur positive otmpWidth = paSeInt (oATTRS.Width) + Sleftt; otMPheight = paSeInt (oAttrs.Height) - stopt; // Aucune valeur de gauche n'est nécessaire pour déplacer le coin supérieur droit car le son par défaut est déplacé à droite OTMPTOP = PARSEIINT (OATTRS.TOP) + Stopt; casser; case 'SW-Résise': // inférieur gauche // La même chose que la hauteur supérieure droite doit être ajoutée à la distance de mouvement de la souris OTMPWidth = ParseInt (OATTRS.Width) - Sleftt; otMPheight = paSeInt (oAttrs.Height) + stopt; otmpleft = parseInt (oAtTrs.Left) + Sleftt; casser; case 'se-résiSize': // inférieur droit // combinaison du bas à gauche et en haut à droite en même temps retirer la gauche et le haut OTMPWidth = paSeInt (OATTRS.Width) + Sleftt; otMPheight = paSeInt (oAttrs.Height) + stopt; casser; case 'n-résiSize': // top otmpheight = parseInt (oAttrs.Height) - stopt; otMPtop = paSeInt (oAtTr.top) + stopt; casser; case 'w-résiSize': // Left otmpWidth = paSeInt (oATTR.Width) - Sleftt; otmpleft = parseInt (oAtTrs.Left) + Sleftt; casser; case 's-résiSize': // sous otmpheight = parseInt (oattrs.height) + stopt; casser; case 'e-résiSize': // droit var otmpWidth = paSeInt (oATTRS.Width) + Sleftt; casser; par défaut: // Sinon, c'est la zone de culture en mouvement Tailormove (Oevent, Otailor, Opicture, Oshadow); casser; } // Tirez vers la limite if (parseInt (getcss (Otailor, 'top')) <= oPicture.offsetTop) {otmpheight = parseInt (getcss (opiicture, 'height')) - (opiicture.offsettop + parseInt (getcss (opiicture, 'height'))) - parseInt (getcss (otailor, 'top')))); otMPtop = OPICTURE.OffSetTop; } else if (opicture.offsettop + parseInt (getcss (opiicture, 'height')) <= (parseInt (getcss (otailor, 'top'))) + parseInt (getcss (otail opiicture.offsettop + parseInt (getcss (opiicture, 'height'))) - parseInt (getcss (otailor, 'top')); } // tire à gauche vers la limite if ((parseInt (getcsss (otailor, 'gauche'))) <= opicture.offsetleft) {otmpwidth = parseInt (getcss (opiicture, 'width')) - (opiicture.offsetleft + parseInt (getcss (opiicture), 'width') - parseInt (getcss (otailor, 'gauche'))) otmpleft = opicture.offsetLeft; } else if (paSeInt (getcss (Otailor, 'gauche')) + parseInt (getcss (otailor, 'gauche'))> = (opicture.offsetleft + opicture.offsetwidth)) {// tire à droite à la limite otmpwidth = opicture.offsetleft + opicture.offsetwidth - parseInt (getcss (otailor, «gauche»)); } // attribuer if (otmpwidth) {setAssign (otailor, 'width', otmpwidth + 'px'); } if (otmpheight) {setAssign (otailor, 'height', otmpheight + 'px'); } if (otmpleft) {setAssign (otailor, 'gauche', otmpleft + 'px'); } if (otmpptop) {setAssign (otailor, 'top', otmpptop + 'px'); } // Shadow Area Drawing Shadow (Opicture, Otailor, Oshadow); // Ajouter un tailleur de bord de culture (odiv, ohandle, otailor); }; // Lors de la publication de la souris, veuillez noter que vous annulez le document de l'événement de mouvement.onMouseUp = function (ev) {// événement objet événement var oevent = ev || window.event; document.onMouseMove = null; Oevent.PreventDefault (); } oevent.preventDefault (); };Faites attention au calcul de la distance mobile lorsque vous étirez, en particulier lorsque vous vous déplacez vers le haut et vers la gauche. Faites attention à la modification des valeurs gauche et supérieure de la zone courte en même temps, sinon elle ne fera qu'augmenter vers le bas et vers la droite. Parlons de la façon de calculer en détail:
principe
Prenant l'exemple de la souris dans le coin supérieur gauche, la distance mobile de la souris est cohérente avec ce qui a été mentionné ci-dessus, mais à ce moment, veuillez noter que la valeur calculée est un nombre négatif. Par conséquent, lors du calcul de la valeur ajoutée de la zone de culture, la valeur doit être soustraite par la largeur ou la hauteur de la zone de culture d'origine. Dans le même temps, autant que la largeur augmente, la valeur de décalage gauche de la zone de culture doit être soustraite. Sinon, l'effet affiché est que la zone de culture augmente vers la droite, comme le montre la figure ci-dessous:
Dans la figure ci-dessus, la zone verte est la zone de culture après que la largeur et la hauteur sont ajoutées lorsqu'elles sont étirées. Si le réglage du décalage n'est pas effectué, la zone jaune est la zone de culture après le saut de décalage et les deux zones superposées sont la zone de culture d'origine.
Cela s'étend dans le coin supérieur gauche, et les étirements dans le coin inférieur gauche sont similaires à d'autres choses. Vous pouvez le mettre dans la direction supérieure en fonction de la direction supérieure.
Et l'autre clé est que l'étirement et le franchissement de la frontière ont été mentionnés ci-dessus, donc je ne le décrirai plus.
Mouvement des zones courtes
Parlons maintenant de la dernière fonction, du mouvement de la zone des cultures. Lorsque la souris se déplace à l'intérieur de la zone des cultures, un événement de mouvement sera déclenché. À l'heure actuelle, la zone des cultures peut être déplacée. Le code est le suivant:
/ * Mouvement de la zone de culture * / fonction TailorMove (ev, otailor, opiicture, 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 <opiicture.offsetleft) {oleft = opicture.offsetLeft; } else if (oleft> (opicture.offsetleft + opicture.offsetwidth - otailor.offsetwidth)) {oleft = opicture.offsetleft + opicture.offsetwidth - otailor.offsetwidth; } if (otop <opiicture.offsetTop) {otop = opicture.offsetTop; } else if (otop> (opicture.offsettop + opicture.offsetheight - otailor.offsetheight)) {otop = opicture.offsetTop + opicture.offsetheight - otailor.offsetheight; } otailor.style.left = (oleft) + 'px'; otailor.style.top = (otop) + 'px'; Shadow (Opicture, Otailor, Oshadow); }}Obtenez la position de la récolte
La fonction de l'effet de culture est essentiellement terminée, vous devez donc obtenir la position de la culture. Tout d'abord, vous devez savoir quelles propriétés vous devez obtenir. Selon le fonctionnement de la bibliothèque GD de PHP , vous devez connaître les coordonnées du point de départ de la récolte et la largeur et la hauteur de la récolte. J'utilise une fonction pour obtenir ces données et les encapsuler et retourner:
function getele () {var opiicture = $ ('img'). get (0); var otailor = $ ('. IMG_BOX'). get (0); OATTRS.LEFTX = (PARSEIINT (GetCSS (Otailor, 'Left'))) - OPICTURE.OffSetLeft); OATTRS.Lefty = (ParseInt (getCSS (Otailor, 'TOP'))) - OPICTURE.OFFSETTOP); OATTRS.TWIDTH = (PARSEIINT (GetCss (Otailor, 'Width'))); OATTRS.Theight = (ParseInt (getCSS (Otailor, 'Height'))); retour oattrs;}Il y a un autre problème. Si les images de la page Web sont compressées à l'aide de CSS, la position obtenue ici sera différente de la taille du recadrage que vous ne l'imaginiez. La plage de l'image recadrée peut devenir plus grande (l'image d'origine est plus grande), ou elle peut devenir plus petite (l'image d'origine est plus petite).
Si la taille de l'image d'origine peut être obtenue, vous pouvez recadrer en fonction du rapport de l'image comprimée à l'image d'origine, afin que l'image de recadrage correcte puisse être obtenue.
OK, une fonction de recadrage d'image simple est terminée, et vous pouvez utiliser Ajax pour la transmettre à l'arrière-plan pour le traitement.
Le contenu de cet article se termine ici. Si vous avez des questions, veuillez laisser un message à discuter. J'espère que cet article sera utile à tout le monde dans l'apprentissage de JavaScript.