Ниже приведено введение в функции картинки, которую я написал сам:
Вы можете использовать мышь для перетаскивания и создания коробки для обрезки
Может изменить размер коробки
Нажмите OK, чтобы вернуться к данным обрезки
принцип
Есть два способа завершить обрезку:
1. Добавьте падение перетаскивания событий и т. Д. Использование HTML5
2. Традиционные методы, использующие события мыши, Mousedown, MouseMove и т. Д.
Здесь мы принимаем метод 2.
Формирование обрезанных областей
Чтобы сократить, мы должны сначала сформировать зону обрезки. Образование этой площади обрезки может быть связано с расстоянием, которое движется мышь. Чем дальше движется мышь, тем больше площадь урожая. Как показано на рисунке ниже:
Как показано на приведенном выше рисунке, горизонтальное расстояние движения мыши и вертикальное расстояние движения вместе образуют ширину и высоту площади обрезки.
И как рассчитать расстояние между горизонтальным и вертикальным движением? Когда мы нажимаем на мышь, мы можем получить позицию щелчка мыши через объект event , и когда мы перемещаем мышь, мы также можем получить положение мыши через event . Благодаря двум изменениям в положении мыши мы можем получить расстояние движения мыши.
Атрибуты для получения позиции мыши являются ClientX и клиентским
Заштрихованная площадь
Далее нарисовать область тени. Часть обрезанного изображения, за исключением обрезанной площади, принадлежит части тени, и область также не может быть нарисована. Эта область нарисована, чтобы позволить пользователю более четко видеть обрезанную область.
Я разделил область на четыре части: верхняя, нижняя, слева и справа, см. Распределение рисунка ниже:
Так что, если эта область рассчитана? В настоящее время необходимо использовать значение смещения элемента DOM. Значение смещения левого смещения в области отсечения вычитается из левого значения смещения самого изображения, является шириной левой тени. Верхнее значение смещения площади отсечения вычитается из верхнего значения смещения изображения, равно значению высоты верхней тени. Как показано на рисунке ниже:
После получения значений левой тени и верхней тени свойства других теней могут быть рассчитаны через эти два.
Есть два способа получить значение смещения изображения
1. Недостатки с использованием значений offsetleft и offsetTop Если элемент 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"> <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" id = "box_5"> </div> <div id = "box_6"> </div> <div id = "box_7"> </div> <div id = "box_8"> </div> <!-слева-> <div> </div> <!-top-> </div> <!
Где img_box представляет площадь урожая, outer представляет область тени, а DIV в img_box - это граница площади урожая
Управление стиля следующим образом:
* {Padding: 0; Маржа: 0;} Body {founale: #454545; } .main {width: 500px; Маржа: 50px Auto;}. Main img {ширина: 500px; позиция: абсолютно; Слева: 450px; Top: 50px;}. Img_box {overflow: hidden; позиция: абсолютно; Верх: 0px; слева: 0px; z-index: 2;}. Внешний {Overflow: Hidden; Фон: #000; непрозрачность: 0,4; позиция: абсолютно; Верх: 0px; слева: 0px; z-index: 0;}. box_border1, .box_border2, .box_border3, .box_border4 {opacity: 0.5;}. Box_border1 {founal: url (./ Images/border-anim-v.gif) повторный левый топ;} .box_border2 {founal: url (./ Image-anim-h.g.g.g.g.x.xborder2 top;}. box_border3 {founale: url (./ Images/border-anim-v.gif) повторный правый вершина;} .box_border4 {founal: url (./ Images/border-anim-h.gif) x rought-hold;} .box_handle {founal: #fff; Граница: 1PX SOLID #000; непрозрачность: 0,5;}. confrim {width: 80px; Высота: 35px;}Эффект макета заключается в следующем:
Общие функции
После завершения обрезки изображения, по приведенному выше принципу, мы можем знать, что нам нужно получить большое количество объектов TAG и атрибутов CSS тега и т. Д., Чтобы мы могли написать общие функции, чтобы лучше получить эти значения. следующее:
Дом получает функцию
/ * Get */function $ (dom) {function getDom (dom) {var str = dom.charat (0); Switch (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); } else 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: значение назначения содержимого*/function setAssign (obj, option, value) {switch (option) {case 'width': obj.style.width = value; перерыв; Дело «высота»: obj.style.height = value; перерыв; case 'top': obj.style.top = value; перерыв; Дело «слева»: obj.style.left = value; перерыв; Дело «позиция»: obj.style.position = value; перерыв; case 'cursor': obj.style.cursor = value; }}Подготовка была в основном завершена, и теперь письмо официально началось.
Полный рисунок площади культуры, нажав и перемещая события
Установите мониторинг событий mousedown и mousemove для изображений следующим образом:
// Мышь нажимает на изображение, чтобы запустить opicture.onmousedown = function (ev) {// объект события var oevent = ev || window.event; // начальное положение мыши var tempx = oevent.clientx; var tepy = oevent.clienty; // Отрегулируйте положение площади культуры Otailor.style.left = oevent.clientx + 'px'; otailor.style.top = oevent.clienty + 'px'; // Мышь перемещает область отсечения, чтобы нарисовать область площади обрезки. window.event; // Положение текущего мыши минус положение мыши перед мышью равна расстоянию движения мыши var sleft = oevent.clientx - tempx; var stop = oevent.clienty - tepy; // обрезка предела вне борьбы только требует ограничения правых и нижних сторон, если ((otailor.offsetleft+otailor.offsetwidth)> = (opicture.offsetleft+opicture.offsetwidth)) {sleft = opicture.offsetleft+opicture.OffSetWidth-otailor.OffsetSlet; } 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'; } // Треальная область тени (Opicture, Otailor, Oshadow); // Добавить пограничный портбордер (Odiv, Ohandle, Otailor); // заблокировать событие по умолчанию oevent.preventdefault (); }; // Отпустите мышь, чтобы отменить документ события движения. Onmouseup = function (ev) {var oevent = ev || window.event; // переместить событие отменить документ. OnmouseMove = null; // заблокировать событие по умолчанию oevent.preventdefault (); }; // заблокировать событие по умолчанию oevent.preventdefault ();}Теневая область рисунка
/ *** @param: Opicture Picture Dom объект* @param: otailor reeam Объекта Dom* @param: oshadow shadow reae dom object*/ function shadow (oshador, otailor, oshadow) {// левая область Setassign (oshadow [0], 'ширина', (parseint (getCss (oShaister, 'stread') - 'слева'))) + 'px'); setAssign (oshadow [0], 'height', parseint (getcss (opicture, 'left'))) + 'px'); setAssign (oshadow [0], 'height', parseint (getcss (opicture, 'height')) + 'px'); setAssign (oshadow [0], 'left', parseint (getcss (ospicture, 'left')) + 'px') setAssign (oshadow [0], 'top', parseint (getcss (oshadure, 'top')) + 'px') // область тени справа - oshadow [2], ',', oshadow [2]). (Parseint (getcss (Opicture, 'width')) - parseint (getcss (otailor, 'width')) - parseint (getcss (oshadow [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'); // Верхняя область тени setAssign (oshadow [1], 'width', parseint (getcss (otailor, 'width')) + 'px'); setAssign (oshadow [1], 'height', (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], 'width', parseint (otailor, 'width')) + 'px'); setAssign (oshadow [3], 'height', (parseint (getcss (opicture, 'height')) - parseint (getcss (otailor, '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 Dotted Edge* @param: Otailor Crop Object*/Function Tailorborder (Odiv, Ohandle, Otailor) {// Инициализируйте границу для (var i = 0; i <Odiv.length; i ++) {setAssign (odiv [i], ', Ablessute'); setAssign (Odiv [i], 'top', '0px'); setAssign (Odiv [i], 'Left', '0px'); setAssign (Odiv [i], 'Left', '0px'); setAssign (Odiv [i], 'width', parseint (getcss (otailor, 'width')) + 'px'); setAssign (Odiv [i], 'height', parseint (getcss (otailor, 'height')) + 'px'); } /* Dot-подобное чертеж с краем* / // Четырехлокоподобный рисунок с точками для (var i = 0; i <4; i ++) {// dot-подобное чертеж SetAssign (Ohandle [i], 'position', 'Absolute'); setassign (ohandle [i], 'width', '5px'); setAssign (ohandle [i], 'height', '5px'); // 0 2 означает левый точечный, похожий на if (i % 2 == 0) {setAssign (ohandle [i], 'left', '0px'); setAssign (ohandle [i], 'top', (i == 0? '0px': (parseint (getcss (otailor, 'height')) - 8) + 'px')); } else {// правый точечный 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', 'Absolute'); setassign (ohandle [i], 'width', '5px'); setAssign (ohandle [i], 'height', '5px'); // 4 6 указывает на верхнюю и нижнюю пунктирную границу, если (i % 2 == 0) {setAssign (ohandle [i], 'left', parseint (getcss (otailor, 'width')) / 2 + 'px'); setAssign (Ohandle [i], 'top', (i == 4? } else {// левая и правая точка 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'); }}} В макете первые четыре DIV с названием класса области Clipping Class 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'; for (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': // Верхний левый setassign (otailor, 'cursor', 'nw-resize'); перерыв; case 'box_2': // Верхний правый setassign (otailor, 'cursor', 'ne-resize'); перерыв; case 'box_3': // нижний левый setAssign (otailor, 'cursor', 'sw-resize'); перерыв; case 'box_4': // нижний правый setAssign (otailor, 'cursor', 'se-resize'); перерыв; case 'box_5': // overs setassign (otailor, 'cursor', 'n-resize'); перерыв; case 'box_6': // Left setAssign (otailor, 'cursor', 'w-resize'); перерыв; case 'box_7': // нижний левый setassign (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'); перерыв; }}Поскольку есть много DOV для мониторинга, он добавляется делегированием событий, что неудобно для демонстрации. Заинтересованные студенты могут проверить это сами.
Добавить эффект растяжения
Код
// Событие перемещения в площади обрезки 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, 'ширина'); 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 = parseint (oattrs.width) - sleftt; otmpheight = parseint (oattrs.height) - stopt; otmpleft = parseint (oattrs.left) + sleftt; otmptop = parseint (oattrs.top) + stopt; перерыв; case 'ne-resize': // Верхняя справа // В настоящее время ширина не может вычесть расстояние движения мыши, потому что расстояние движения в это время является положительным значением Otmpwidth = parseint (oattrs.width) + sleftt; otmpheight = parseint (oattrs.height) - stopt; // Для перемещения верхнего правого угла не требуется левое значение, потому что звук по умолчанию перемещается вправо OTMPTOP = parseInt (oattrs.top) + stopt; перерыв; Case 'SW -Resize': // нижний левый // То же, что и верхняя высота правой, должна быть добавлена к расстоянию движения мыши OTMPWidth = parseInt (Oattrs.width) - SLEFTT; otmpheight = parseint (oattrs.height) + stopt; otmpleft = parseint (oattrs.left) + sleftt; перерыв; case 'se-resize': // нижний правый // Комбинация нижнего левого и верхнего справа одновременно Удалить левую и верхнюю otmpwidth = parseint (oattrs.width) + sleftt; otmpheight = parseint (oattrs.height) + stopt; перерыв; case 'n -resize': // top otmpheight = parseint (oattrs.height) - stopt; otmptop = parseint (oattrs.top) + stopt; перерыв; case 'w -resize': // Left otmpwidth = parseint (oattrs.width) - sleftt; otmpleft = parseint (oattrs.left) + sleftt; перерыв; case 'Resize': // под otmpheight = parseint (oattrs.height) + stopt; перерыв; case 'e-resize': // right var otmpwidth = parseint (oattrs.width) + sleftt; перерыв; по умолчанию: // в противном случае это движущаяся площадь урожая (oevent, otailor, Opicture, Oshadow); перерыв; } // Потянувшись к границе if (parseint (getcss (otailor, 'top')) <= opicture.offsettop) {otmpheight = parseint (getcss (opicture, 'height')) - (opicture.offsettop+parseint (getcss (opicture, 'height')))-parseint (getcss (otailor, 'top')))); otmptop = opicture.offsettop; } else if (opicture.offsettop+parseint (getcss (opicture, 'height')) <= (parseint (getcss (otailor, '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; } else if (parseint (getcss (otailor, 'left'))+parseint (getcss (otailor, 'left'))> = (opicture.offsetleft+opicture.offsetwidth)) {// Потянуть направо к границе otmpwidth = opicture.offsetleft+opictsesetsesetsesetsetsetsetsetsetset. parseint (getcss (otailor, 'left')); } // назначить 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'); } // Треальная область тени (Opicture, Otailor, Oshadow); // Добавить пограничный портбордер (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; } 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.offsetheight - otailor.offsetheight)) {otop = opicture.offsettop + opicture.offsetheight - otailor.offsetheight; } otailor.style.left = (oleft)+ 'px'; otailor.style.top = (OTOP) + 'px'; тень (Opicture, Otailor, Oshadow); }}Получить положение урожая
Функция эффекта обрезки в основном завершена, поэтому вам необходимо получить положение урожая. Прежде всего, вам нужно знать, какие свойства вам нужно получить. Согласно операции библиотеки GD PHP , вам необходимо знать координаты отправной точки урожая и ширину и высоту урожая. Я использую функцию, чтобы получить эти данные и инкапсулировать их и возвращать:
function 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.theast = (parseint (getcss (otailor, 'height'))); вернуть Oattrs;}Есть еще одна проблема. Если изображения на веб -странице сжимаются с использованием CSS, позиция, полученная здесь, будет отличаться от размера урожая, чем вы себе представляли. Диапазон обрезанного изображения может стать больше (исходное изображение больше), или оно может стать меньше (исходное изображение меньше).
Если размер исходного изображения может быть получен, вы можете обрезать в соответствии с соотношением сжатого изображения к исходному изображению, чтобы можно было получить правильное изображение обрезки.
ОК, простая функция обрезки изображения завершена, и вы можете использовать Ajax для передачи его на фон для обработки.
Содержание этой статьи заканчивается здесь. Если у вас есть какие -либо вопросы, пожалуйста, оставьте сообщение для обсуждения. Я надеюсь, что эта статья будет полезна всем в изучении JavaScript.