Unten ist die Einführung in die Funktionen des Bildes, das ich selbst geschrieben habe:
Sie können die Maus verwenden, um eine Anbaus zu ziehen und zu erstellen
Kann die Größe der Erntekiste ändern
Klicken Sie auf OK, um zu Erntedaten zurückzukehren
Prinzip
Es gibt zwei Möglichkeiten, das Zuschneiden zu vervollständigen:
1. Fügen Sie Drag Event Drag Drop usw. mit HTML5 hinzu
2. Traditionelle Methoden mit Mausereignissen, Mousedown, Mousemove usw.
Hier übernehmen wir Methode 2.
Bildung von Kaufabläufen
Um zu schneiden, müssen wir zunächst einen Anbaus bilden. Die Bildung dieses Anbausbereichs kann mit der Entfernung in Verbindung gebracht werden, die sich der Maus bewegt. Je weiter die Maus bewegt, desto größer ist der Erntebereich. Wie in der Abbildung unten gezeigt:
Wie in der obigen Abbildung gezeigt, bilden die horizontale Bewegungsabstand der Maus und die vertikale Bewegungsabstand zusammen die Breite und Höhe des Anbausbereichs.
Und wie berechnet man den Abstand zwischen horizontaler und vertikaler Bewegung? Wenn wir auf die Maus klicken, können wir die Mausklickposition über event Ereignisereignisobjekt erhalten. Wenn wir die Maus bewegen, können wir die Mausposition auch über event erhalten. Durch zwei Veränderungen in der Mausposition können wir den Mausbewegungsabstand erhalten.
Die Attribute, um die Mausposition zu erhalten, sind Clientx und Clienty
Schattierte Flächenbildung
Als nächstes zeichnen Sie den Schattenbereich. Der Teil des verkürzten Bildes, mit Ausnahme des beschnittenen Bereichs, gehört zum Schattenteil, und der Bereich kann auch nicht gezeichnet werden. Dieser Bereich ist gezeichnet, damit der Benutzer den Kaufbereich klarer sehen kann.
Ich habe den Bereich in vier Teile unterteilt: obere, untere, linke und rechte, siehe die Verteilung der folgenden Abbildung:
Was ist, wenn dieser Bereich berechnet wird? Zu diesem Zeitpunkt muss der Offset -Wert des DOM -Elements verwendet werden. Der linke Offset -Wert des Ausschnittsbereichs wird vom linken Offset -Wert des Bildes selbst abtrahiert, ist die Breite des linken Schattens. Der obere Offset -Wert des Ausschnittbereichs wird vom oberen Offset -Wert des Bildes gleichermaßen dem Höhenwert des oberen Schattens abgezogen. Wie in der Abbildung unten gezeigt:
Nachdem die Werte des linken Schattens und des oberen Schattens erhalten wurden, können die Eigenschaften der anderen Schatten durch diese beiden berechnet werden.
Es gibt zwei Möglichkeiten, den Offset -Wert des Bildes zu erhalten
1. Nachteile der Verwendung von OffsetLeft- und Offsettop -Werten Wenn das DOM -Element Grenze -Rand -äquivalente Werte aufweist, werden diese Werte in berechnet in
2. Die Nachteile des Erhaltens des CSS -Attributs von DOM sind vordefinierte CSS mit vordefinierten CSS, wenn die Oberseite nicht definiert ist.
Beide Methoden haben ihre eigenen Nachteile und werden nach verschiedenen Umständen verwendet
Aus den Grenzen herausschneiden
Die Berechnung des Erntebereichs wird durch den beweglichen Abstand der Maus berechnet, sodass die Erntefläche außerhalb der Grenzen liegt und diese Situation in zwei Arten unterteilt ist:
1. Überqueren Sie die Grenzen während des Schneidvorgangs
2. Gehen Sie über die Grenze hinaus, wenn Sie den Erntebereich bewegen
Lassen Sie uns also darüber sprechen, wie Sie verhindern können, die Linie zu überschreiten.
Über die Linie kommen
Was ist grenzüberschreitend beim Schneiden? Der Maus-Widerstandsbereich übersteigt das Bild und bildet eine außerhalb der Unterbrüche, wie in der folgenden Abbildung gezeigt:
Für solche außerhalb der Unterkunft ist es notwendig zu beurteilen, dass die rechte Seite des Erntebereichs relativ zur linken Seite des Browsers die rechte Seite des Bildes und die Position auf der linken Seite des Browsers nicht überschreiten kann. Gleichzeitig kann die Position am Boden des Erntebereichs relativ zum oberen Rand des Browsers die Position oben im Browser überschreiten, die der Oberseite des Bildes entspricht. Oder um zu veranschaulichen:
Wenn TX >= PX , erzwingen Sie den Wert von TX auf einen festen Wert.
Die Berechnungsmethode von TX und PX unter der Annahme, dass der Anbauflachbereich oTailor ist, der Bildbereich oPicture :
Tx = otailor.offsetwidth + otailor.offsetLeft;
In ähnlicher Weise kann die obige Methode verwendet werden, um die linke Seite zu begrenzen, die Oberkreuzung der Oberseite und die untere Seite, sodass ich nicht in Details eingehen werde.
Sich über die Grenzen bewegen
Wenn Sie außerhalb der Untergrenze bewegt werden, wurde der Anbausgebiet gebildet, aber der Kreuzungsgrad tritt auf, wenn der Anbaus durch die Maus bewegt wird. Dieses Verständnis ist relativ einfach, daher werde ich es nicht vorstellen, wenn ich Bilder zeichne. Diese Art der grenzüberschreitenden Grenze steht im Einklang mit der grenzüberschreitenden Grenze für DOM-Drag-and-Drop-Grenze und wird beurteilt, ob sich die Maus über den Bildbereich hinaus bewegt.
Das Prinzip und das Problem wurden gelöst, und jetzt werden wir beginnen, die tatsächliche Funktion zu erfüllen.
Vorbereitung
Bevor Sie dies tun, arbeiten Sie zuerst vorbereitete, schärfen Sie das Messer und hacken Sie das Holz, ohne die Arbeiten des Holzhackens zu verzögern.
Webseitenlayoutvorbereitung
Die wichtigsten Codes für das Webseitenlayout sind wie folgt:
<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"></div> <div id="box_4"></div> <div id = "box_5"> </div> <div id = "box_6"> </div> <div id = "box_7"> </div> <div id = "box_8"> </div> <!-links-> </div> </div> <!-top-</div> <!
Wenn img_box den Erntebereich darstellt, repräsentiert das outer den Schattenbereich, und die DIV in img_box ist der Rand des Erntebereichs
Stilsteuerung lauten wie folgt:
* {Padding: 0; Rand: 0;} Körper {Hintergrund: #454545; } .main {width: 500px; Rand: 50px Auto;}. Haupt img {Breite: 500px; Position: absolut; Links: 450px; Top: 50px;}. img_box {Überlauf: versteckt; Position: absolut; Oben: 0px; links: 0px; Z-Index: 2;}. Outer {Überlauf: versteckt; Hintergrund: #000; Opazität: 0,4; Position: absolut; Oben: 0px; links: 0px; Z-Index: 0;}. box_border1, .box_border2, .box_border3, .box_border4 {opazazität: 0.5;}. box_border1 {Hintergrund: url (./ Bilder/Border-Anim-V.gif) links top;} .box_border2 {Hintergrund: Urbilder/Border-/Border-y. top;}. box_border3 {Hintergrund: url (./ Bilder/border-anim-v.gif) repeat-y Right Top;} .box_border4 {Hintergrund: url (./ Images/Border-anim-h.gif) repep-x rechts;} .box_handle {Hintergrund: #fff; Grenze: 1PX Solid #000; Opazität: 0,5;}. Konfrim {Breite: 80px; Höhe: 35px;}Der Layout -Effekt ist wie folgt:
Allgemeine Funktionen
Nach Abschluss des Bildbaus können wir über das obige Prinzip wissen, dass wir eine große Anzahl von Tag -Objekten und die CSS -Attribute des Tags usw. erhalten müssen, damit wir allgemeine Funktionen schreiben können, um diese Werte besser zu erhalten. wie folgt:
DOM erhält die Funktion
/ * Get */function $ (dom) {function getdom (dom) {var str = dom.charat (0); Switch (str) {case '.' : this.ele = document.getElementsByClassName (Dom.substring (1)) || null; brechen; Fall '#': this.ele = document.getElementById (Dom.substring (1)) || Null; brechen; Standard: 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; }} zurückgeben; }; getdom.prototype.get = function (num) {return this.ele [num] || this.ele; } getdom.prototype.insert = Funktion (Wert, num) {this.ele [num] .innerhtml = value; } neu GetDom zurückgeben (DOM);}CSS -Attribut -Erhaltungsfunktion
Der Erwerb von CSS -Attributen ist in zwei Typen unterteilt. Einer ist IE, currentStyle verwendet; Die anderen sind weitere Mainstream -Browser, die getComputedStyle verwenden, und die folgenden sind kompatible Versionen:
/* CSS GET*/Funktion getCss (o, key) {return o.currentStyle? O.CurrentStyle [Schlüssel]: document.defaultView.getComputedStyle (O, False) [Schlüssel]; };Zuweisungsfunktion
Beim Schreiben stoße ich oft auf die Zuordnung von DOM -Stilen. Aus Gründen der Bequemlichkeit habe ich speziell eine Funktion zur Aufgabe geschrieben:
/** - Funktion zuweisen - @Param: OBJ zugewiesenem Objekt - @param: Operation mit Option - @Parma: Wert zuweisen Inhalt*/Funktion setAssign (obj, option, value) {switch (option) {case 'width': obj.style.width = value; brechen; Fall 'Höhe': obj.style.height = value; brechen; Fall 'Top': obj.style.top = value; brechen; Fall 'links': obj.style.left = value; brechen; Fall 'Position': obj.style.position = Wert; brechen; Fall 'Cursor': obj.style.cursor = Wert; }}Die Vorbereitungen wurden im Grunde genommen abgeschlossen, und jetzt hat das Schreiben offiziell begonnen.
Füllen Sie die Zeichnung des Pflanzenbereichs aus, indem Sie auf Ereignisse klicken und bewegen
Stellen Sie mousedown und mousemove -Ereignisüberwachung für Bilder wie folgt fest:
// Maus klickt auf das Bild, um Opicture zu auslösen. Fenster.Event; // anfängliche Mausposition var tempx = oevent.clientX; var tempy = oevent.clienty; // Passen Sie die Erntebereichsposition an. otailor.Style.top = oevent.clienty + 'px'; // Maus bewegt den Ausschnittbereich, um das Schattenbereich des Erntebereichs zu zeichnen. Fenster.Event; // Die aktuelle Mausposition abzüglich der Mausposition vor der Maus entspricht dem Abstand der Mausbewegung var sleft = oEvent.clientX - tempx; var stop = oevent.clienty - tempy; // Um die Grenze der außerhalb der Bounds zu beschnitten, müssen nur die rechte und niedrigere Seiten begrenzt werden. } if ((otailor.offsettop+otailor.offseteight)> = (opicture.offsettop+opicture.offseteight)) {stop = opicture.offsettop+opicture.offseteight - otailor.offsettop; } // Erntebereich Zeichnung otailor.style.width = sleft + 'px'; otailor.style.height = stop + 'px'; // Erntebereich Display OTailor.Style.Display = 'Block'; // Schattenbereich Anzeige für (var i = 0; i <oshadow.length; i ++) {oshadow [i] .style.display = 'block'; } // Shadow Area Drawing Shadow (Opicture, Otailor, Oshadow); // Fügen Sie Crop Border Tailorborder (Odiv, Ohmandle, Otailor) hinzu; // Blockieren Sie das Standard -Ereignis oevent.preventDefault (); }; // die Maus freigeben, um das Bewegungsereignis dokument zu stornieren. Fenster.Event; // Ereignisabbrechen document.onmousemove = null; // Blockieren Sie das Standard -Ereignis oevent.preventDefault (); }; // Blockieren Sie das Standard -Ereignis oevent.preventDefault ();}Schattenbereich Zeichnung
/** * @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 , 'links'))) + 'px'); setAssign (Oshadow [0], 'Höhe', ParseInt (getCss (Opicture, 'links'))) + 'px'); setAssign (Oshadow [0], 'Höhe', ParseInt (getCss (Opicture, 'Höhe')) + 'px'); setAssign (oshadow [0], 'links', parseInt (getCss (Opicture, 'links') + 'px') setAssign (oshadow [0], 'top', parseInt (getCss (Opicture, 'Top') + 'Px') /Die Schattenfläche rechts ist setsign (oshadow [2], ' (ParseInt (GetCSS (Opicture, 'Width') - ParseInt (GetCSS (Otailor, 'Width') - ParseInt (getCss (Oshadow [0], Width ') +' Px '); setAssign (oshadow [2], 'links', (parseInt (getcss (otailor, 'links')) + parseInt (getCss (otailor, 'width')) + 'px'); setAssign (oshadow [2], 'top', parseInt (getCss (opicture, 'top') + 'px'); // obere Schattenfläche SetAssign (Oshadow [1], 'width', parsesint (getCss (otailor, 'width')) + 'px'); setAssign (oshadow [1], 'Höhe', (parseInt (getCss (otailor, 'top') - parseInt (getCss (Opicture, 'top')) + 'px'); setAssign (oshadow [1], 'links', (parseInt (getCss (Opicture, 'links')) + ParseInt (getCss (oshadow [0], 'width')) + 'px'); setAssign (oshadow [1], 'top', parseInt (getCss (opicture, 'top') + 'px'); // Der untere Schattenbereich setAssign (oshadow [3], 'width', parseInt (getCss (otailor, 'width') + 'px'); setaSign (oshadow [3], 'Höhe', (ParseInt (getCss (Opicture, 'Höhe') - ParseInt (getCss (Otailor, 'Höhe')) - ParseInt (getCss (Oshadow [1], 'Höhe')) + 'Px'); setAssign (oshadow [3], 'links', (parseInt (getCss (Opicture, 'links') + ParseInt (getCss (Oshadow [0], 'Breite')) + 'px'); setAssign (oshadow [3], 'top', (parseInt (getcss (otailor, 'top') + parseInt (getCss (otailor, 'Höhe')) + 'px');};}Beachten Sie, dass in der tatsächlichen Verwendung von Webseiten im Bild CSS im Layout kein links oder oberes Attribut vorhanden ist, dann generiert der obige Code einen Fehler. OffsetLeft und Offsettop sollten stattdessen verwendet werden.
Fügen Sie die Erntegrenze hinzu
In dem freigelassenen Layout -Diagramm können Sie den Rand der Ernte sehen, und jede der vier Ecken und vier Seiten hat eine kleine quadratische Form. Die Zugabe dient nicht nur darin, zwischen dem Schneidbereich und dem nicht geschnittenen Bereich zu unterscheiden, sondern auch den nächsten Schritt zum Hinzufügen des gestreckten Schneidbereichs zu bieten. Lassen Sie uns den Code schreiben:
/*** Crop Border Drawing* @param: odiv Alle Grenzobjekte* @param: OHANDLE gepunktete Kante* @param: otailor crop -Objekt*/Funktion maßorborder (odiv, ohrandle, otailor) {// initialisieren Sie den Border für (var i = 0; i <odiv.Length; i ++) {setsign (odAver (Odiv) (Odiv (Odiv), {setsign (odAver (Odiv), {setSign (ODIV) (ODIV) (ODIV) (ODIV) (ODIV) (ODIV) (ODIV) (ODIV) (ODIV) (ODIV) (ODIV) (ODIV) (ODIV) (ODIV) (ODIV [i], [',afes ,öfst man setAssign (odiv [i], 'top', '0px'); setAssign (odiv [i], 'links', '0px'); setAssign (odiv [i], 'links', '0px'); setAssign (odiv [i], 'width', parseInt (getcss (otailor, 'width') + 'px'); setAssign (odiv [i], 'Höhe', ParseInt (getCss (otailor, 'Höhe')) + 'px'); } /* Dot-like Kantenzeichnung* / // Vier-Corner-DOT-like Kantenzeichnung für (var i = 0; i <4; i ++) {// dot-like Zeichnungsset SetSign (Ohrandle [i], 'Position', 'Absolute'); setAssign (ohrandle [i], 'width', '5px'); setAssign (Ohrandle [i], 'Höhe', '5px'); // 0 2 bedeutet das linke dot-like if (i % 2 == 0) {setAssign (Ohrandle [i], 'links', '0px'); setAssign (ohrandle [i], 'top', (i == 0? '0px': (parseInt (getCss (otailor, 'Höhe') - 8) + 'px'); } else {// rechter dot -like setAssign (Ohrandle [i], 'links', (parseInt (getCss (otailor, 'width') - 6) + 'px'); setAssign (ohrandle [i], 'top', (i == 1? '0px': parseInt (getCss (otailor, 'Höhe') - 8) + 'px'); }} // vierseitige gepunktete Grenze für (var i = 4; i <ohrandle.length; i ++) {setAssign (OHANDLE [i], 'Position', 'Absolute'); setAssign (ohrandle [i], 'width', '5px'); setAssign (Ohrandle [i], 'Höhe', '5px'); // 4 6 zeigt den oberen und unteren gepunkteten Rand an, wenn (i % 2 == 0) {setAssign (OHANDLE [i], 'links', ParseInt (getCss (otailor, 'width')) / 2 + 'px'); setAssign (ohrandle [i], 'top', (i == 4? '0px': (parseInt (getcss (otailor, 'Höhe') - 8) + 'px'); } else {// linker und rechter Punkt setAssign (Ohrandle [i], 'top', parseInt (getCss (otailor, 'Höhe')) / 2 + 'px'); setAssign (ohrandle [i], 'top', parseInt (getCss (otailor, 'Höhe')) / 2 + 'px'); setAssign (ohrandle [i], 'links', (i == 5? '0px': parseInt (getCss (otailor, 'width') - 8) + 'px'); }}} Im Layout repräsentieren die ersten vier Divs mit dem Klassennamen der Clipping Area box_handle die Punkte in vier Ecken, und die letzten vier stellen Punkte an der Mitte der Kante dar, die alle im Uhrzeigersinn verteilt sind. Nach Abschluss ist der Effekt wie folgt:
Überwachen Sie Schattenbereiche
Der Erntebereich und der Schattenbereich werden gezeichnet. Fügen Sie nun eine kleine Funktion hinzu, um den Erntebereich abzusagen, wenn die Maus auf den nicht gepackten Bereich klickt (d. H. Den Schattenbereich).
// Zeit für die Schattenbereichseinstellung festlegen, wenn der Erntebereich verschwindet, verschwindet der Schattenbereich für (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'; für (var i = 0; i <oshadow.length; i ++) {oshadow [i] .style.display = 'none'; oshadow [i] .style.left = '0px'; Oshadow [i] .Style.top = '0px'; }}}Überwachen Sie die Position der Mausbewegung
Fügen Sie als nächstes die Funktion des Schnellflächendehnens hinzu, was unterschiedliche Effekte erzielt, wenn sich die Maus an den dotförmigen Rand am Rand bewegt.
Mausanzeigeffekt hinzufügen
// Einstellungen für die spitze Grenzüberwachung entsprechende Operationen otailor.onmousemove = Funktion (ev) {var otarget = oevent.target; Switch (otarget.id) {case 'box_1': // obere linke setAssign (otailor, 'cursor', 'nW-resize'); brechen; case 'box_2': // obere right setAssign (otailor, 'cursor', 'ne-rsize'); brechen; case 'box_3': // linke linke setAssign (otailor, 'cursor', 'sw-resize'); brechen; case 'box_4': // unten rechts setAssign (otailor, 'cursor', 'se-rsize'); brechen; case 'box_5': // oberes setAssign (otailor, 'cursor', 'n-rsize'); brechen; case 'box_6': // linke setAssign (otailor, 'cursor', 'w-rize'); brechen; case 'box_7': // linke linke setAssign (otailor, 'cursor', 's-resize'); brechen; case 'box_8': // rechter setAssign (otailor, 'cursor', 's-resize'); brechen; case 'box_8': // rechter setAssign (otailor, 'cursor', 'e-resize'); brechen; Standard: // Der Erntebereich zeigt eine bewegliche Eingabeaufforderung (OTailor, 'Cursor', 'Move'); brechen; }}Da es viele Divs zu überwachen gibt, wird es durch Ereignisdelegation hinzugefügt, was für die Demonstration unpraktisch ist. Interessierte Schüler können es selbst testen.
Fügen Sie Stretching -Effekt hinzu
Code
// Event im Erntebereich verschieben otailor.onmouseDown = function (ev) {// Ereignisobjekt var oevent = ev || Fenster.Event; // Cursorstatus abrufen var ocur = getCss (otailor, 'Cursor'); // anfängliche Mausposition var stmpx = oevent.clientX; var stmpy = oevent.clienty; // Erhalten Sie die Attribute des Erntebereichs, um sie mit einem Objekt zu speichern, um das Aufrufen von oattrs.left = getCss (otailor, 'links') zu erleichtern; oattrs.top = getCss (otailor, 'top'); oattrs.width = getCss (otailor, 'width'); oattrs.height = getCss (otailor, 'Höhe'); document.onmousemove = function (ev) {// Ereignisobjekt var oevent = ev || verschieben Fenster.Event; // Strommaussposition abzüglich der anfänglichen Mausposition entspricht dem Abstand der Mausbewegung var sftt = oevent.clientx - stmpx; var stopt = oevent.clienty - stmpy; // Zeigt den Abstand der Mausbewegung an. Var otmpheight = ''; var otmptop = ''; var otmpwidth = ''; var otmpleft = ''; Switch (ocur) {case 'nw -resize': // obere linke otmpwidth = parseInt (oattrs.width) - sleftt; otmpheight = parseInt (oattrs.Height) - Haltestelle; otmpleft = parseInt (oattrs.Left) + sleftt; otmptop = parseInt (oattrs.top) + halt; brechen; Fall 'NE-RESIZE': // Oben rechts // Zu diesem Zeitpunkt kann die Breite den Maus-Bewegungsabstand nicht subtrahieren, da der Bewegungsabstand zu diesem Zeitpunkt ein positiver Wert ist. otmpheight = parseInt (oattrs.Height) - Haltestelle; // Es ist kein linker Wert erforderlich, um die obere rechte Ecke zu bewegen, da der Standard -Sound rechts nach rechts bewegt wird. brechen; Fall 'sw -resize': // unten links // Das gleiche wie die obere rechte Höhe muss der Mausbewegungsabstand hinzugefügt werden. otmpheight = parseInt (oattrs.Height) + Haltestelle; otmpleft = parseInt (oattrs.left) + sleftt; brechen; Fall 'SE-RESIZE': // Unter rechts // Kombination aus der unteren linken und oberen rechts gleichzeitig linke und obere otmpwidth = parseInt (oattrs.width) + sleftt; otmpheight = parseInt (oattrs.Height) + Haltestelle; brechen; Fall 'n -resize': // top otmpheight = parseInt (oattrs.height) - Haltestelle; otmptop = parseInt (oattrs.top) + halt; brechen; Fall 'W -RESIZE': // links otmpwidth = parseInt (oattrs.width) - sleftt; otmpleft = parseInt (oattrs.left) + sleftt; brechen; Fall 's-resize': // unter otmpheight = parseInt (oattrs.height) + Haltestelle; brechen; Fall 'E-RESIZE': // Right var otmpwidth = parseInt (oattrs.width) + sleftt; brechen; Standard: // Ansonsten ist es der Moving Crop Area Tailorform (Oevent, Otailor, Opicture, Oshadow); brechen; } // an die Grenze fällen, wenn (parseInt (getCss (otailor, 'top')) <= opicture.offsettop) {otmpheight = parseInt (getCss (Opicture, 'Höhe') -) - (Opicture.offsettop+ParseInt (getCss (Opicture, 'Höhe'))-ParseInt (getCss (otailor, 'top'))); otmptop = opicture.offsettop; } else if (Opicture.offsettop+parseInt (getCss (Opicture, 'Höhe')) <= (ParseInt (getCss (otailor, 'top')))+parseInt (getcss (otailor, 'Höhe')) {// bis zum Grenary fällen otmpheight = opicture.offsettop+parseInt (getCss (Opicture, 'Höhe'))) - ParseInt (getCss (otailor, 'top'); } // Links an die Grenze ziehen if ((parseInt (getcss (Opicture.OffsetLeft+ParseInt (getCss (Opicture), 'width')-ParseInt (getCss (otailor, 'links')) otmpleft = opicture.offsetleft; } else if (parseInt (getcss (otailor, 'links')+parseInt (getCss (otailor, 'links')> = (opicture.offsetleft+opicture.offsetwidth)) {// rechts bis zur Grenze otmpwidth = opicture.offsetleft+opicture+opicture+opicture+opicture+opicture apicture. ParseInt (getCss (otailor, 'links')); } // if (otmpwidth) {setAssign (otailor, 'width', otmpwidth + 'px'); } if (otmpheight) {setAssign (otailor, 'Höhe', otmpheight + 'px'); } if (otmpleft) {setAssign (otailor, 'links', otmpleft + 'px'); } if (otmptop) {setAssign (otailor, 'top', otmptop + 'px'); } // Shadow Area Drawing Shadow (Opicture, Otailor, Oshadow); // Fügen Sie Crop Border Tailorborder (Odiv, Ohmandle, Otailor) hinzu; }; // Bei der Veröffentlichung der Maus beachten Fenster.Event; document.onmousemove = null; oevent.preventDefault (); } oevent.preventDefault (); };Achten Sie auf die Berechnung des beweglichen Abstands beim Dehnen, insbesondere wenn Sie sich nach oben und nach links bewegen. Achten Sie darauf, dass die linken und die oberen Werte des beschnittenen Bereichs gleichzeitig geändert werden, andernfalls erhöht er sich nur nach unten und nach rechts. Lassen Sie uns darüber sprechen, wie man im Detail berechnet wird:
Prinzip
Wenn die Maus als Beispiel in die obere linke Ecke streckt, stimmt der bewegliche Abstand der Maus mit dem überein, was oben erwähnt wurde, aber zu diesem Zeitpunkt beachten Sie, dass der berechnete Wert eine negative Zahl ist. Bei der Berechnung des Mehrwertwerts des Erntebereichs sollte der Wert daher durch die Breite oder Höhe des ursprünglichen Erntebereichs subtrahiert werden. Gleichzeitig sollte der linke Offset -Wert des Erntebereichs so stark wie die Breite erhöht werden. Andernfalls ist der angezeigte Effekt, dass der Erntebereich nach rechts zunimmt, wie in der folgenden Abbildung gezeigt:
In der obigen Abbildung ist der grüne Bereich der Anbaubereich, nachdem die Breite und Höhe beim Dehnen hinzugefügt werden. Wenn die Offset -Einstellung nicht durchgeführt wird, ist der gelbe Bereich nach dem Offset -Sprung der Zuckerbereich, und die beiden überlagerten Bereiche sind der ursprüngliche Anbausbereich.
Dies dehnt sich an der oberen linken Ecke und die Dehnung in der unteren linken Ecke ähnelt anderen Dingen. Sie können es gemäß der oberen Richtung in die obere Richtung legen.
Und der andere Schlüssel ist, dass das Dehnen und Überqueren der Grenze oben erwähnt wurde, sodass ich sie nicht mehr beschreiben werde.
Bewegung von Krupplerngebiete
Sprechen wir nun über die letzte Funktion, die Bewegung des Erntebereichs. Wenn sich die Maus in den Erntebereich bewegt, wird ein Bewegungsereignis ausgelöst. Zu diesem Zeitpunkt kann der Erntebereich bewegt werden. Der Code ist wie folgt:
/* Bewegung des Erntebereichs*/Funktion TailorMove (ev, otailor, opicture, oshadow) {var oevent = ev || Fenster.Event; var otmpx = oevent.clientX - otailor.offsetLeft; var otmpy = oevent.clienty - otailor.offsettop; document.onmousemove = function (ev) {var oevent = ev || Fenster.Event; Oleft = oEvent.clientX - otmpx; otop = oevent.clienty - otmpy; if (Oleft <Opicture.OffsetLeft) {Oleft = Opicture.OffsetLeft; } else if (Oleft> (Opicture.Offsetleft + Opicture.Offsetwidth - otailor.offsetwidth)) {Oleft = Opicture.OffsetLeft + Opicture.Offsetwidth - otailor.offsetwidth; } if (otop <opicture.offsettop) {otop = opicture.offsettop; } else if (otop> (opicture.offsettop + opicture.offseteight - otailor.offseteight)) {otop = opicture.offsettop + opicture.offseteight - otailor.offseteight; } otailor.style.left = (Oleft)+ 'px'; otailor.style.top = (otop) + 'px'; Schatten (Opiktur, Otailor, Oshadow); }}Holen Sie sich die Position der Ernte
Die Funktion des Anbaus Effekts ist im Grunde abgeschlossen, sodass Sie die Position der Ernte erhalten müssen. Zunächst müssen Sie wissen, welche Eigenschaften Sie erhalten müssen. Laut der GD -Bibliotheksbetrieb von PHP müssen Sie die Startpunktkoordinaten der Ernte und die Breite und Höhe der Ernte kennen. Ich benutze eine Funktion, um diese Daten zu erhalten, sie zu integrieren und zurückzugeben:
Funktion getele () {var opicture = $ ('img'). get (0); var otailor = $ ('. img_box'). get (0); oattrs.leftx = (parseInt (getCss (otailor, 'links')) - Opicture.OffsetLeft); oattrs.lefty = (parseInt (getCss (otailor, 'top')) - Opicture.offsettop); oattrs.twidth = (parseInt (getCss (otailor, 'width')); oattrs.theight = (parseInt (getCss (otailor, 'Höhe')); Return Oattrs;}Es gibt ein anderes Problem. Wenn die Bilder auf der Webseite mit CSS komprimiert werden, unterscheidet sich die hier erhaltene Position von der Pflanzengröße als Sie sich vorgestellt haben. Der Bereich des verkürzten Bildes kann größer werden (das Originalbild ist größer) oder es kann kleiner werden (das Originalbild ist kleiner).
Wenn die Größe des Originalbildes erhalten werden kann, können Sie gemäß dem Verhältnis des komprimierten Bildes zum Originalbild einschneiden, damit das korrekte Schnittbild erhalten werden kann.
OK, eine einfache Image -Schnittfunktion ist abgeschlossen, und Sie können AJAX zur Verarbeitung an den Hintergrund weitergeben.
Der Inhalt dieses Artikels endet hier. Wenn Sie Fragen haben, überlassen Sie bitte eine Nachricht, um zu diskutieren. Ich hoffe, dieser Artikel wird für alle im Lernen von JavaScript hilfreich sein.