فيما يلي مقدمة لوظائف الصورة التي كتبتها بنفسي:
يمكنك استخدام الماوس لسحب وإنشاء صندوق زراعة
يمكن تغيير حجم صندوق المحاصيل
انقر فوق "موافق" للعودة إلى بيانات المحاصيل
مبدأ
هناك طريقتان لإكمال المحاصيل:
1. أضف انخفاض السحب في حدث السحب ، إلخ. باستخدام HTML5
2. الأساليب التقليدية ، باستخدام أحداث الماوس ، موسى ، موسميوف ، إلخ.
هنا نعتمد الطريقة 2.
تشكيل المناطق المزروعة
لقطع ، يجب علينا أولاً تشكيل منطقة زراعة. يمكن أن يرتبط تكوين منطقة الاقتصاد هذه بالمسافة التي يتحركها الماوس. كلما يتحرك الماوس أبعد ، كلما زاد مساحة المحاصيل. كما هو مبين في الشكل أدناه:
كما هو مبين في الشكل أعلاه ، تشكل مسافة الحركة الأفقية للماوس ومسافة الحركة العمودية معًا عرض وارتفاع منطقة المحاصيل.
وكيفية حساب المسافة بين الحركة الأفقية والرأسية؟ عندما نضغط على الماوس ، يمكننا الحصول على موضع النقر فوق الماوس من خلال كائن حدث event ، وعندما ننقل الماوس ، يمكننا أيضًا الحصول على موضع الماوس من خلال event . من خلال تغييرين في موضع الماوس ، يمكننا الحصول على مسافة حركة الماوس.
السمات للحصول على موضع الماوس هي ClientX والعميل
تشكيل المنطقة المظللة
التالي هو رسم منطقة الظل. ينتمي جزء من الصورة المقطوعة باستثناء المنطقة المزروعة إلى جزء الظل ، ويمكن أيضًا رسم المنطقة. يتم رسم هذه المنطقة للسماح للمستخدم برؤية المنطقة المزروعة بشكل أكثر وضوحًا.
قمت بتقسيم المنطقة إلى أربعة أجزاء: الجزء العلوي والأسفل واليسار واليمين ، انظر توزيع الشكل أدناه:
فماذا لو تم حساب هذه المنطقة؟ في هذا الوقت ، يجب استخدام قيمة الإزاحة لعنصر DOM. يتم طرح قيمة الإزاحة اليسرى لمنطقة القطع من قيمة الإزاحة اليسرى للصورة نفسها هو عرض الظل الأيسر. يتم طرح قيمة الإزاحة العليا لمنطقة القطع من قيمة الإزاحة العليا للصورة تساوي قيمة ارتفاع الظل العلوي. كما هو مبين في الشكل أدناه:
بعد الحصول على قيم الظل الأيسر والظل العلوي ، يمكن حساب خصائص الظلال الأخرى من خلال هذين.
هناك طريقتان للحصول على قيمة إزاحة الصورة
1. عيوب استخدام قيم الإزاحة والذات إذا كان عنصر DOM له قيم مكافئة لهامش الحدود ، سيتم حساب هذه القيم في
2. عيوب الحصول على سمة CSS من DOM هي CSS محددة مسبقا المتعلقة CSS المحددة مسبقا إذا لم يتم تعريف الجزء العلوي الأيسر.
كلتا الطريقتين لهما عيوب خاصة بهما ويستخدمان وفقًا لظروف مختلفة
اقتصاص من الحدود
يتم حساب حساب منطقة المحاصيل من خلال المسافة المتحركة للماوس ، وبالتالي فإن مساحة المحاصيل ستكون خارج الحدود ، ويتم تقسيم هذا الموقف إلى نوعين:
1. عبور الحدود أثناء عملية القطع
2. تجاوز الحدود عند تحريك منطقة المحاصيل
لذلك دعونا نتحدث عن كيفية منع عبور الخط.
اقتصاص فوق الخط
ما هو الحدود المتقاطعة عند القطع؟ تتجاوز منطقة سحب الماوس الصورة وتشكل حدود خارجية ، كما هو موضح في الشكل التالي:
بالنسبة لمثل هذه الحدود ، من الضروري الحكم على أن الجانب الأيمن من منطقة المحاصيل بالنسبة إلى الجانب الأيسر من المتصفح لا يمكن أن يتجاوز الجانب الأيمن من الصورة والموقف الموجود على الجانب الأيسر من المتصفح ؛ في الوقت نفسه ، لا يمكن أن يتجاوز الموضع الموجود في الجزء السفلي من منطقة المحصول بالنسبة إلى أعلى المتصفح الموضع في الجزء العلوي من المتصفح المقابل لأعلى الصورة. أو لتوضيح:
عندما TX >= PX ، فرض قيمة tx على قيمة ثابتة.
طريقة حساب TX و PX ، على افتراض أن منطقة زراعة المحاصيل هي oTailor ، oPicture منطقة الصورة:
tx = otailor.offsetwidth + otailor.offsetleft ؛ px = opicture.offsetwidth + opicture.offsetleft ؛
وبالمثل ، يمكن استخدام الطريقة أعلاه للحد من عبور الجانب الأيسر ، والعبور الجانبي العلوي ، والعبور الجانبي السفلي ، لذلك لن أخوض في التفاصيل.
تحرك عبر الحدود
يعني التحرك خارج الحدود أن منطقة زراعة المحاصيل قد تم تشكيلها ، لكن الحدود المتقاطعة تحدث عند تحريك منطقة المحاصيل عبر الماوس. هذا الفهم بسيط نسبيًا ، لذلك لن أقدمه إذا قمت برسم الصور. هذا النوع من الحد المتقاطع الحدود يتوافق مع الحد المتقاطع في السحب والإفلات من DOM ، ويتم الحكم عليه من خلال الحكم على ما إذا كان الماوس يتحرك خارج منطقة الصورة.
تم حل المبدأ والمشكلة ، والآن سنبدأ في إكمال الوظيفة الفعلية.
تحضير
قبل القيام بذلك ، قم ببعض أعمال التحضير أولاً ، وشحذ السكين وقطع الخشب دون تأخير عمل تقطيع الخشب.
إعداد تخطيط صفحة الويب
الرموز الرئيسية لتخطيط صفحة الويب هي كما يلي:
<img src = "./ images/img_2.jpg"> <viv> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv> <div id = "box_1"> </viv> <div id = "box_2"> </div id = "box_3" id = "box_5"> </viv> <div id = "box_6"> </viv> <div id = "box_7"> </viv> <div id = "box_8"> </viv> <!-left-> <viv> </vir> <!-top->
عندما يمثل img_box مساحة المحاصيل ، يمثل outer منطقة الظل ، و DIV في img_box هي حدود منطقة المحاصيل
أدوات التحكم في النمط هي كما يلي:
* {padding: 0 ؛ الهامش: 0 ؛} الجسم {الخلفية: #454545 ؛ } .main {width: 500px ؛ الهامش: 50px Auto ؛}. Main IMG {Width: 500px ؛ الموقف: مطلق ؛ اليسار: 450 بكسل ؛ أعلى: 50px ؛}. img_box {overflow: Hidden ؛ الموقف: مطلق ؛ أعلى: 0px ؛ اليسار: 0px ؛ z-index: 2 ؛}. Outer {overflow: Hidden ؛ الخلفية: #000 ؛ العتامة: 0.4 ؛ الموقف: مطلق ؛ أعلى: 0px ؛ اليسار: 0px ؛ z-index: 0 ؛}. box_border1 ، .box_border2 ، .box_border3 ، .box_border4 {opacity: 0.5 ؛}. box_border1 {background: url (. TOP ؛}. box_border3 {background: url (./ images/border-anim-v.gif) top top ؛} .box_border4 {background: url (./ images/border-anim-h.gif) rection-x bottom ؛} .box_handle {background: #fff ؛ الحدود: 1 بكسل الصلبة #000 ؛ التعتيم: 0.5 ؛}. confrim {width: 80px ؛ الارتفاع: 35 بكسل ؛}تأثير التصميم هو كما يلي:
وظائف عامة
بعد إكمال زراعة الصورة ، من خلال المبدأ أعلاه ، يمكننا أن نعرف أننا بحاجة إلى الحصول على عدد كبير من كائنات العلامات وسمات CSS الخاصة بالعلامة ، وما إلى ذلك ، حتى نتمكن من كتابة وظائف عامة لتحسين الحصول على هذه القيم. على النحو التالي:
دوم يحصل على الوظيفة
/ * get */function $ (dom) {function getDom (dom) {var str = dom.charat (0) ؛ التبديل (str) {case '.' : this.ele = document.getElementSbyClassName (dom.substring (1)) || null ؛ استراحة؛ Case '#': this.ele = document.getElementById (dom.substring (1)) || باطل؛ استراحة؛ الافتراضي: if (document.getElementsByTagName (dom) .Length) {this.ele = document.getElementSbyTagName (dom) ؛ } if if (document.getElementSbyName (dom) .Length) {this.ele = document.getElementSbyName (dom) ؛ } else {this.ele = null ؛ }} إرجاع هذا ؛ } ؛ getDom.prototype.get = function (num) {return this.ele [num] || this.ele ؛ } getDom.prototype.insert = function (value ، num) {this.ele [num] .innerhtml = value ؛ } إرجاع GetDom (DOM) ؛}سمة CSS الحصول على وظيفة
يتم تقسيم سمات CSS إلى نوعين. واحد هو IE ، باستخدام currentStyle ؛ والآخر هو المتصفحات السائدة الأخرى ، باستخدام getComputedStyle ، والما يلي هي إصدارات متوافقة:
/* css get*/function getCss (o ، key) {return o.currentStyle؟ O.CurrentStyle [key]: document.defaultView.getComputedStyle (O ، false) [Key] ؛ } ؛وظيفة المهمة
عند الكتابة ، غالبًا ما أواجه تعيين أنماط DOM. للراحة ، كتبت خصيصًا وظيفة للمهمة:
/** - تعيين دالة - param: OBJ المعينة كائن - param: تم تنفيذ العملية بواسطة الخيار - parma: القيمة تعيين محتوى*/وظيفة setassign (obj ، الخيار ، القيمة) {switch (خيار) {case 'width': obj.style.width = value ؛ استراحة؛ حالة "الارتفاع": obj.style.height = القيمة ؛ استراحة؛ Case 'top': obj.style.top = value ؛ استراحة؛ حالة "اليسار": obj.style.left = value ؛ استراحة؛ حالة "الموضع": obj.style.position = value ؛ استراحة؛ حالة "المؤشر": obj.style.cursor = value ؛ }}تم الانتهاء من الاستعدادات بشكل أساسي ، والآن بدأت الكتابة رسميًا.
أكمل رسم منطقة المحاصيل من خلال النقر على الأحداث ونقلها
قم بتعيين مراقبة أحداث mousedown و mousemove للصور ، على النحو التالي:
// ينقر الفأرة على الصورة إلى تشغيل opicture.onmousedown = function (ev) {// كائن الحدث var oevent = ev || window.event ؛ // موقع الماوس الأولي var tempx = oevent.clientx ؛ var tempy = oevent.clienty ؛ // ضبط موضع منطقة المحاصيل otailor.style.left = oevent.clientx + 'px' ؛ otailor.style.top = oevent.clienty + 'px' ؛ // Mouse يحرك منطقة القطع لرسم مستند منطقة الظل منطقة المحاصيل. OnMouseMove = function (ev) {// Mouse تحرك كائن الحدث var oevent = ev || window.event ؛ // موضع الماوس الحالي ناقص موضع الماوس قبل الماوس يساوي مسافة حركة الماوس var sleft = oevent.clientx - tempx ؛ var stop = oevent.clienty - tempy ؛ // زراعة الحد من الحدود خارج الحدود يتطلب فقط الحد من الجوانب اليمنى والسفلية إذا ((otailor.offsetleft+otailor.offsetwidth)> = (opicture.offsetleft+opicture.offsetwidth)) } if ((otailor.offsettop+otailor.offsetheight)> = (opicture.offsettop+opicture.offsetheight)) {stop = opicture.offsettop+opicture.offsetheight - otailor.offsettop ؛ } // منطقة المحاصيل رسم otailor.style.width = sleft + 'px' ؛ otailor.style.height = stop + 'px' ؛ // عرض منطقة المحاصيل otailor.style.display = 'block' ؛ // عرض منطقة الظل لـ (var i = 0 ؛ i <oshadow.length ؛ i ++) {Oshadow [i] .style.display = 'block' ؛ } // area shadow drawing Shadow (opicture ، otailor ، Oshadow) ؛ // إضافة محصول الحدود tailorborder (Odiv ، Ohandle ، Otailor) ؛ // حظر الحدث الافتراضي Oevent.preventDefault () ؛ } ؛ // قم بإطلاق الماوس لإلغاء مستند حدث الحركة. window.event ؛ // نقل حدث إلغاء المستند. onmousemove = null ؛ // حظر الحدث الافتراضي Oevent.preventDefault () ؛ } ؛ // قم بحظر الحدث الافتراضي Oevent.preventDefault () ؛}رسم منطقة الظل
/ *** param: opicture picture dom object* param: otailor crop area object* param: Oshadow shadow area dom object*/ function shadow (opicture ، otailor ، oshadow) {// left shadow area setassign (Oshadow [0] parseint (getCSS (opicture ، 'left'))) + 'px') ؛ Setassign (Oshadow [0] ، "الارتفاع" ، parseint (getCSS (opicture ، "left '))) +' px ') ؛ SetAssign (Oshadow [0] ، "الارتفاع" ، parseint (getCSS (opicture ، "الارتفاع")) + 'px') ؛ Setassign (Oshadow [0] ، "Left" ، Parseint (getCSS (opicture ، "Left ')) +' px ') Setassign (Oshadow [0] ،' top '، parseint (getCss (opicture ،' top ')) +' px ') (parseint (getCss (opicture ، 'width') - parseint (getCss (otailor ، 'width') - parseint (getCss (olkadow [0] ، 'width')) + 'px') ؛ Setassign (Oshadow [2] ، 'Left' ، (parseint (getCss (otailor ، 'left'))) + parseint (getCss (otailor ، 'width'))) + 'px') ؛ Setassign (Oshadow [2] ، "Top" ، Parseint (getCSS (opicture ، "Top ')) +' px ') ؛ // Upper Shadow Area Setassign (Oshadow [1] ، "العرض" ، parseint (getCSS (Otailor ، 'width')) + 'px') ؛ Setassign (Oshadow [1] ، "الارتفاع" ، (parseint (getCss (Otailor ، 'top')) - parseint (getCss (opicture ، 'top'))) + 'px') ؛ Setassign (Oshadow [1] ، 'Left' ، (parseint (getCss (opicture ، 'left'))) + parseint (getCss (Oshadow [0] ، "width '))) +' px ') ؛ Setassign (Oshadow [1] ، "Top" ، parseint (getCSS (opicture ، 'top')) + 'px') ؛ . Setassign (Oshadow [3] ، "الارتفاع" ، (parseint (getCss (opicture ، 'height')) - parseint (getCSS (otaLor ، 'height')) - parseint (getCSS (Oshadow [1] ، 'height'))) + 'px') ؛ Setassign (Oshadow [3] ، 'Left' ، (parseint (getCss (opicture ، 'left')) + parseint (getCSS (Oshadow [0] ، 'width'))) + 'px') ؛ Setassign (Oshadow [3] ، 'top' ، (parseint (getCss (otailor ، 'top')) + parseint (getCss (otailor ، 'height'))) + 'px') ؛}لاحظ أنه عند الاستخدام الفعلي لصفحات الويب ، إذا لم تكن هناك سمة يسارية أو أعلى في الصورة CSS في التصميم ، فإن الرمز أعلاه سيؤدي إلى خطأ. يجب استخدام OffseTleft و Offsettop بدلاً من ذلك.
أضف حدود المحاصيل
في مخطط التصميم الذي تم إطلاقه ، يمكنك رؤية حافة المحصول ، وكل من الزوايا الأربعة والأربعة على شكل صغير مربع. لا تعتبر الإضافة فقط التمييز بين منطقة القطع والمنطقة غير المقطوعة ، ولكن أيضًا لتوفير الراحة للخطوة التالية لإضافة منطقة القطع الممتدة. لنبدأ في كتابة الرمز:
/*** رسم حدود المحاصيل* param: ODIV جميع كائنات الحدود* param: Ohandle منقط حافة* param: Otailor crop object*/function tailorborder (odiv ، ohandle ، otailor) {// تهيئة الحدود لـ (var i = 0 ؛ i <odiv.length ؛ i ++) {setassign Setassign (Odiv [i] ، "Top" ، '0px') ؛ SetAssign (Odiv [i] ، 'Left' ، '0px') ؛ SetAssign (Odiv [i] ، 'Left' ، '0px') ؛ Setassign (Odiv [i] ، "العرض" ، parseint (getCSS (Otailor ، "width ')) +' px ') ؛ SetAssign (Odiv [i] ، 'height' ، parseint (getCss (otailor ، 'height')) + 'px') ؛ } /* رسم حافة يشبه DOT* / // رسم حافة شبيه بنقطة رباعية corner لـ (var i = 0 ؛ i <4 ؛ i ++) {// dot-like drawing setAssign (Ohandle [i] ، 'position' ، 'absolute') ؛ Setassign (Ohandle [i] ، "العرض" ، '5px') ؛ Setassign (Ohandle [i] ، "الارتفاع" ، "5px") ؛ // 0 2 تعني أن النقطة اليسرى تشبه (i ٪ 2 == 0) {setAssign (Ohandle [i] ، 'Left' ، '0px') ؛ Setassign (Ohandle [i] ، 'top' ، (i == 0؟ '0px': (parseint (getCss (otailor ، 'height')) - 8) + 'px')) ؛ } else {// right dot -like setassign (Ohandle [i] ، 'Left' ، (parseint (getCss (otailor ، 'width') - 6) + 'px') ؛ Setassign (Ohandle [i] ، 'top' ، (i == 1؟ '0px': parseint (getCss (otailor ، 'height')) - 8) + 'px') ؛ }} // الحدود المنقطة ذات أربعة جوانب لـ (var i = 4 ؛ i <ohandle.length ؛ i ++) {setAssign (Ohandle [i] ، 'position' ، 'appolute') ؛ Setassign (Ohandle [i] ، "العرض" ، '5px') ؛ Setassign (Ohandle [i] ، "الارتفاع" ، "5px") ؛ // 4 6 يشير إلى الحدود العلوية والسفلية المنقطعة إذا (i ٪ 2 == 0) {setAssign (Ohandle [i] ، 'Left' ، parseint (getCss (otailor ، 'width')) / 2 + 'px') ؛ Setassign (Ohandle [i] ، 'top' ، (i == 4؟ '0px': (parseint (getCss (otailor ، 'height')) - 8) + 'px')) ؛ } آخر {// اليسار واليمين setassign (Ohandle [i] ، 'top' ، parseint (getCss (otailor ، 'height')) / 2 + 'px') ؛ Setassign (Ohandle [i] ، 'top' ، parseint (getCss (otailor ، 'height')) / 2 + 'px') ؛ Setassign (Ohandle [i] ، 'Left' ، (i == 5؟ '0px': parseint (getCss (otailor ، 'width')) - 8) + 'px') ؛ }}} في التصميم ، تمثل أول أربعة divs مع اسم فئة القطع box_handle نقاط في أربع زوايا ، وتمثل آخر الأربعة نقاط في منتصف الحافة ، وكلها موزعة في اتجاه عقارب الساعة. بعد الانتهاء ، يكون التأثير كما يلي:
مراقبة المناطق المظللة
يتم رسم منطقة المحاصيل ومنطقة الظل. أضف الآن وظيفة صغيرة لإلغاء منطقة المحاصيل عندما ينقر الماوس على المنطقة غير المغلفة (أي منطقة الظل).
// ضبط الوقت لإعداد منطقة الظل ، عندما تختفي منطقة المحاصيل ، تختفي منطقة الظل لـ (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' ؛ من أجل (var i = 0 ؛ i <oshadow.length ؛ i ++) {Oshadow [i] .style.display = 'none' ؛ Oshadow [i] .style.left = '0px' ؛ Oshadow [i] .style.top = '0px' ؛ }}}مراقبة موقف حركة الماوس
بعد ذلك ، أضف وظيفة امتداد منطقة زراعة المحاصيل ، والتي تعطي تأثيرات مختلفة عندما ينتقل الماوس إلى الحدود على شكل نقطة على الحافة.
أضف تأثير عرض الماوس
// إعدادات مراقبة الحدود المدببة العمليات المقابلة otailor.onmousemove = function (ev) {var otarget = oevent.target ؛ Switch (otarget.id) {case 'box_1': // apport left setassign (otailor ، 'cursor' ، 'nw-resize') ؛ استراحة؛ Case 'Box_2': // apport right setassign (Otailor ، 'Cursor' ، 'ne-resize') ؛ استراحة؛ Case 'Box_3': // setassign Lower Left Left (Otailor ، 'Cursor' ، 'SW-resize') ؛ استراحة؛ Case 'Box_4': // setassign lower extassign (otailor ، 'Cursor' ، 'se-resize') ؛ استراحة؛ Case 'Box_5': // apport setassign (Otailor ، 'Cursor' ، 'n-resize') ؛ استراحة؛ Case 'Box_6': // left Setassign (Otailor ، 'Cursor' ، 'W-resize') ؛ استراحة؛ Case 'Box_7': // setassign Lower Left Left (Otailor ، 'Cursor' ، 's-resize') ؛ استراحة؛ Case 'Box_8': // right setassign (Otailor ، 'Cursor' ، 's-resize') ؛ استراحة؛ Case 'Box_8': // right setassign (Otailor ، 'Cursor' ، 'e-resize') ؛ استراحة؛ الافتراضي: // تعرض منطقة المحاصيل setAssign موجه متحرك (Otailor ، 'Cursor' ، 'Move') ؛ استراحة؛ }}نظرًا لوجود العديد من divs للمراقبة ، تتم إضافته بواسطة تفويض الأحداث ، وهو أمر غير مريح للمظاهرة. يمكن للطلاب المهتمين اختباره بأنفسهم.
أضف تأثير التمدد
شفرة
// نقل الحدث في منطقة المحاصيل otailor.onmousedown = function (ev) {// كائن الحدث var oevent = ev || window.event ؛ // الحصول على حالة المؤشر var ocur = getCss (otailor ، 'Cursor') ؛ // موقع الماوس الأولي var stmpx = oevent.clientx ؛ var stmpy = oevent.clienty ؛ // احصل على سمات منطقة المحاصيل لإنقاذها باستخدام كائن لتسهيل استدعاء Oattrs.left = getCSS (Otailor ، "اليسار") ؛ Oattrs.top = getCss (Otailor ، 'top') ؛ oattrs.width = getCss (Otailor ، 'width') ؛ oattrs.height = getCss (otailor ، 'height') ؛ document.onmousemove = function (ev) {// نقل كائن الحدث var oevent = ev || window.event ؛ // موضع الماوس الحالي ناقص موضع الماوس الأولي يساوي مسافة حركة الماوس var sleftt = oevent.clientx - stmpx ؛ var stopt = oevent.clienty - stmpy ؛ // يشير إلى مسافة حركة الماوس var otmpheight = '' ؛ var otmptop = '' ؛ var otmpwidth = '' ؛ var otmpleft = '' ؛ Switch (ocur) {case 'nw -resize': // otmpwidth otmpwidth = العلوي الأيسر = parseint (oattrs.width) - sleftt ؛ otmpheight = parseint (oattrs.height) - stopt ؛ otmpleft = parseint (oattrs.left) + sleftt ؛ otmptop = parseint (oattrs.top) + stopt ؛ استراحة؛ حالة "NE-RESISE": // العلوي اليمين // في هذا الوقت ، لا يمكن للعرض طرح مسافة حركة الماوس لأن مسافة الحركة في هذا الوقت هي قيمة إيجابية otmpwidth = parseint (oattrs.width) + sleftt ؛ otmpheight = parseint (oattrs.height) - stopt ؛ // لا يلزم وجود قيمة يسارية لتحريك الزاوية اليمنى العليا لأن الصوت الافتراضي يتم نقله إلى اليمين otmptop = parseint (Oattrs.top) + stopt ؛ استراحة؛ حالة "sw -resize": // أسفل اليسار // يجب إضافة نفس الارتفاع اليمين العلوي إلى مسافة حركة الماوس otmpwidth = parseint (oattrs.width) - sleftt ؛ otmpheight = parseint (oattrs.height) + stopt ؛ otmpleft = parseint (oattrs.left) + sleftt ؛ استراحة؛ حالة "se-resize": // السفلى اليمين // الجمع بين الجزء السفلي الأيسر والأعلى اليمين في نفس الوقت ، قم بإزالة otmpwidth الأيسر والأعلى = parseint (oattrs.width) + sleftt ؛ otmpheight = parseint (oattrs.height) + stopt ؛ استراحة؛ حالة "n -resize": // top otmpheight = parseint (oattrs.height) - stopt ؛ otmptop = parseint (oattrs.top) + stopt ؛ استراحة؛ حالة "w -resize": // اليسار otmpwidth = parseint (oattrs.width) - sleftt ؛ otmpleft = parseint (oattrs.left) + sleftt ؛ استراحة؛ حالة "s-resize": // تحت otmpheight = parseint (oattrs.height) + stopt ؛ استراحة؛ Case 'e-resize': // right var otmpwidth = parseint (oattrs.width) + sleftt ؛ استراحة؛ الافتراضي: // وإلا فإن منطقة المحاصيل المتحركة tailormove (Oevent ، Otailor ، opicture ، Oshadow) ؛ استراحة؛ }. (opicture.offsettop+parseint (getCSS (opicture ، 'height')))-parseint (getCSS (otailor ، 'top'))))) ؛ otmptop = opicture.offsettop ؛ } آخر إذا (opicture.offsettop+parseint (getCSS (opicture ، 'height')) <= (parseint (getCss (otaLor ، 'top')))+parseint (getCss (otailor ، 'height')))) {// الانسحاب إلى الحدود otmpheight = Opicture.OffSettop+Parseint (getCSS (opicture ، 'height'))) - parseint (getCSS (otailor ، 'top')) ؛ } // اسحب اليسار إلى الحدود if ((parseint (getCSS (otailor ، 'left'))) <= opicture.offsetleft) {otmpwidth = parseint (getCss (opicture ، 'width')) -) - (opicture.offsetleft+parseint (getCss (opicture) ، 'width')-parseint (getCss (otailor ، 'left'))) otmpleft = opicture.offsetleft ؛ } آخر إذا (parseint (getCss (otailor ، 'left'))+parseint (getCss (otailor ، 'left'))> = (opicture.offsetleft+opicture.offsetwidth)) Parseint (getCss (Otailor ، 'Left')) ؛ } // issign if (otmpwidth) {setAssign (otailor ، 'width' ، otmpwidth + 'px') ؛ } if (otmpheight) {setAssign (otailor ، 'height' ، otmpheight + 'px') ؛ } if (otmpleft) {setAssign (otailor ، 'left' ، otmpleft + 'px') ؛ } if (otmptop) {setAssign (otailor ، 'top' ، otmptop + 'px') ؛ } // area shadow drawing Shadow (opicture ، otailor ، Oshadow) ؛ // إضافة محصول الحدود tailorborder (Odiv ، Ohandle ، Otailor) ؛ } ؛ // عند إطلاق الماوس ، يرجى ملاحظة أنك تلغي مستند حدث الحركة. window.event ؛ document.onmousemove = null ؛ oevent.preventDefault () ؛ } oevent.preventDefault () ؛ } ؛انتبه إلى حساب المسافة المتحركة عند التمدد ، خاصة عند التحرك لأعلى ويسارًا. انتبه إلى تغيير القيم اليسرى والأعلى للمنطقة المزروعة في نفس الوقت ، وإلا فإنها ستزيد فقط إلى أسفل إلى اليمين. دعونا نتحدث عن كيفية حساب التفاصيل:
مبدأ
أخذ الماوس يمتد إلى الركن الأيسر العلوي كمثال ، فإن المسافة المتحركة من الماوس تتفق مع ما تم ذكره أعلاه ، ولكن في هذا الوقت ، يرجى ملاحظة أن القيمة المحسوبة هي رقم سالب. لذلك ، عند حساب القيمة المضافة لمنطقة المحاصيل ، يجب طرح القيمة بعرض أو ارتفاع مساحة المحاصيل الأصلية. في الوقت نفسه ، بقدر ما يتم زيادة العرض ، يجب طرح قيمة الإزاحة اليسرى لمنطقة المحاصيل. خلاف ذلك ، فإن التأثير المعروض هو أن مساحة المحاصيل تزيد إلى اليمين ، كما هو مبين في الشكل أدناه:
في الشكل أعلاه ، تتمثل المنطقة الخضراء في منطقة المحاصيل بعد إضافة العرض والارتفاع عند تمديدها. إذا لم يتم إجراء تعديل الإزاحة ، فإن المنطقة الصفراء هي منطقة الاقتصاد بعد قفزة الإزاحة ، والمنطقتين المتراكبين هما منطقة المحاصيل الأصلية.
هذا يمتد في الزاوية اليسرى العلوية ، والتمدد في الزاوية اليسرى السفلى يشبه الأشياء الأخرى. يمكنك وضعه في الاتجاه العلوي وفقًا للاتجاه العلوي.
والمفتاح الآخر هو أن تمديد الحدود وعبورها قد تم ذكرها أعلاه ، لذلك لن أصفها بعد الآن.
حركة المناطق المزروعة
الآن دعنا نتحدث عن الوظيفة الأخيرة ، حركة منطقة المحاصيل. عندما يتحرك الماوس داخل منطقة المحاصيل ، سيتم تشغيل حدث حركة. في هذا الوقت ، يمكن نقل منطقة المحاصيل. الرمز كما يلي:
/* حركة منطقة المحاصيل*/وظيفة 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) {oleft = opicture.offsetleft ؛ } آخر إذا (oleft> (opicture.offsetleft + opicture.offsetwidth - otailor.offsetwidth)) {oleft = opicture.offsetleft + opicture.offsetwidth - otailor.offsetwidth ؛ } if (otop <picture.offsettop) {otop = opicture.offsettop ؛ } آخر إذا (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) ؛ }}احصل على موقف المحصول
يتم الانتهاء من وظيفة تأثير زراعة المحاصيل ، لذلك تحتاج إلى الحصول على موضع المحصول. بادئ ذي بدء ، تحتاج إلى معرفة الخصائص التي تحتاج إلى الحصول عليها. وفقًا لعملية مكتبة GD من PHP ، تحتاج إلى معرفة إحداثيات نقطة البداية للمحصول وعرض وارتفاع المحصول. يمكنني استخدام وظيفة للحصول على هذه البيانات وتغليفها والعودة:
وظيفة getEle () {var opicture = $ ('img'). get (0) ؛ var otailor = $ ('. img_box'). get (0) ؛ oattrs.leftx = (parseint (getCss (otailor ، 'left'))) - opicture.offsetleft) ؛ oattrs.lefty = (parseint (getCss (otailor ، 'top'))) - opicture.offsettop) ؛ oattrs.twidth = (parseint (getCss (otailor ، 'width'))) ؛ oattrs.theight = (parseint (getCss (otailor ، 'height')))) ؛ إرجاع الشوفان ؛}هناك مشكلة أخرى. إذا تم ضغط الصور الموجودة على صفحة الويب باستخدام CSS ، فسيكون الموضع الذي تم الحصول عليه هنا مختلفًا عن حجم المحصول مما تخيلت. قد يصبح نطاق الصورة المزروعة أكبر (الصورة الأصلية أكبر) ، أو قد تصبح أصغر (الصورة الأصلية أصغر).
إذا كان يمكن الحصول على حجم الصورة الأصلية ، فيمكنك الخروج وفقًا لنسبة الصورة المضغوطة إلى الصورة الأصلية ، بحيث يمكن الحصول على صورة زراعة المحاصيل الصحيحة.
حسنًا ، يتم الانتهاء من وظيفة اقتصاص الصور البسيطة ، ويمكنك استخدام Ajax لتمريرها إلى الخلفية للمعالجة.
محتوى هذه المقالة ينتهي هنا. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لمناقشة. آمل أن يكون هذا المقال مفيدًا للجميع في تعلم JavaScript.