아래는 내가 쓴 그림의 기능에 대한 소개입니다.
마우스를 사용하여 자르기 상자를 끌고 만들 수 있습니다.
작물 상자의 크기를 변경할 수 있습니다
확인을 클릭하여 자르기 데이터로 돌아갑니다
원칙
자르기를 완료하는 두 가지 방법이 있습니다.
1. HTML5를 사용하여 드래그 이벤트 드래그 드롭 등을 추가하십시오
2. 전통적인 방법, 마우스 이벤트, 마우스 딩, 무질의 등을 사용합니다.
여기서 우리는 방법 2를 채택합니다.
자른 지역의 형성
자르려면 먼저 자르기 영역을 형성해야합니다. 이 자르기 영역의 형성은 마우스가 움직이는 거리와 관련 될 수 있습니다. 마우스가 멀어 질수록 작물 영역이 더 커집니다. 아래 그림과 같이 :
위 그림에서 볼 수 있듯이, 마우스의 수평 이동 거리와 수직 이동 거리가 함께 자르기 영역의 폭과 높이를 형성합니다.
수평과 수직 이동 사이의 거리를 계산하는 방법은 무엇입니까? 마우스를 클릭하면 event 이벤트 객체를 통해 마우스 클릭 위치를 얻을 수 있으며 마우스를 움직일 때 event 통해 마우스 위치를 얻을 수도 있습니다. 마우스 위치의 두 가지 변화를 통해 마우스 이동 거리를 얻을 수 있습니다.
마우스 위치를 얻는 속성은 ClientX 및 Clienty입니다.
음영 영역 형성
다음은 그림자 영역을 그리는 것입니다. 자른 영역을 제외한 자른 이미지의 일부는 그림자 부분에 속하며 영역도 그릴 수 없습니다. 이 영역은 사용자가 자른 영역을보다 명확하게 볼 수 있도록 그려집니다.
영역을 네 부분으로 나누었습니다. 상단, 하단, 왼쪽 및 오른쪽, 아래 그림의 분포를 참조하십시오.
그렇다면이 영역이 계산되면 어떻게됩니까? 현재 DOM 요소의 오프셋 값을 사용해야합니다. 클리핑 영역의 왼쪽 오프셋 값은 그림 자체의 왼쪽 오프셋 값에서 빼면 왼쪽 그림자의 너비입니다. 클리핑 영역의 상단 오프셋 값은 그림의 상단 오프셋 값에서 빼면 상단 그림자의 높이 값과 같습니다. 아래 그림과 같이 :
왼쪽 그림자와 상단 그림자의 값을 얻은 후, 다른 그림자의 특성은이 두 그림을 통해 계산할 수 있습니다.
그림의 오프셋 값을 얻는 두 가지 방법이 있습니다.
1. DOM 요소에 테두리 마진이 동등한 값을 갖는 경우 OffSetLeft 및 OffSetTop 값 사용의 단점은 다음 값을 계산합니다.
2. DOM의 CSS 속성을 얻는 단점은 왼쪽 상단이 정의되지 않은 경우 사전 정의 된 CSS와 관련된 사전 정의 된 CSS입니다.
두 방법 모두 고유 한 단점이 있으며 다른 상황에 따라 사용됩니다.
경계에서 자르기
작물 면적의 계산은 마우스의 움직이는 거리에 의해 계산되므로 작물 면적은 경계를 벗어나고이 상황은 두 가지 유형으로 나뉩니다.
1. 절단 과정에서 경계를 가로 지릅니다
2. 작물 영역을 움직일 때 경계를 넘어
선을 건너는 것을 방지하는 방법에 대해 이야기 해 봅시다.
라인 위로 자르기
절단 할 때 국경은 무엇입니까? 마우스 드래그 영역은 이미지를 초과하고 다음 그림과 같이 외형을 형성합니다.
이러한 바운드의 경우 브라우저의 왼쪽에있는 작물 영역의 오른쪽이 이미지의 오른쪽과 브라우저의 왼쪽 위치를 초과 할 수 없다고 판단해야합니다. 동시에, 브라우저 상단에 대한 작물 영역의 하단 위치는 이미지 상단에 해당하는 브라우저 상단의 위치를 초과 할 수 없습니다. 또는 설명하기 위해 :
TX >= PX 일 때 tx 값을 고정 값으로 강제하십시오.
자르기 영역이 oTailor 라고 가정하면 TX 및 PX의 계산 방법은 그림 영역의 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 id = "box_1"> </div id = "box_2"> </div> <div id = "box_3"> <div = "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> </div> </div> <!-div> </div> </div> </div> </div> </div>
여기서 img_box 작물 영역을 나타내고 outer 그림자 영역을 나타내고 img_box 의 DIV는 작물 영역의 경계입니다.
스타일 컨트롤은 다음과 같습니다.
* {패딩 : 0; 여백 : 0;} 바디 {배경 : #454545; } .main {너비 : 500px; 여백 : 50px Auto;}. Main IMG {너비 : 500px; 위치 : 절대; 왼쪽 : 450px; 상단 : 50px;}. img_box {오버 플로 : 숨겨; 위치 : 절대; 상단 : 0px; 왼쪽 : 0px; z-index : 2;}. 외부 {오버플로 : 숨겨진; 배경 : #000; 불투명도 : 0.4; 위치 : 절대; 상단 : 0px; 왼쪽 : 0px; z-index : 0;}. box_border1, .box_border2, .box_border3, .box_border4 {불투명도 : 0.5;}. box_border1 {background : url (./ images/border-anim-v.gif) 반복}. box_border2 {images/and alim-x) 상단;}. box_border3 {배경 : url (./ images/border-anim-v.gif) 반복-오른쪽 상단;} .box_border4 {background : url (./ images/border-anim-h.gif) 반복 X 오른쪽 하단;} .box_handle {background : #fff; 테두리 : 1px 고체 #000; 불투명도 : 0.5;}. contrim {너비 : 80px; 높이 : 35px;}레이아웃 효과는 다음과 같습니다.
일반적인 기능
위의 원리를 통해 이미지 자르기를 완료 한 후 많은 태그 객체와 태그의 CSS 속성 등을 얻어야한다는 것을 알 수 있으므로 일반 기능을 작성하여 이러한 값을 더 잘 얻을 수 있습니다. 다음과 같이 :
Dom은 기능을 얻습니다
/ * get */function $ (dom) {함수 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 (hoceb } else if (document.getElementsByName (dom) .length) {this.ele = document.getElementsByName (dom); } else {this.ele = null; }} 님이 reture; }; 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 속성의 획득은 두 가지 유형으로 나뉩니다. 하나는 currentStyle 사용하는 IE입니다. 다른 하나는 getComputedStyle 사용하는 다른 주류 브라우저이며 다음은 호환되는 버전입니다.
/* css get*/function getcss (o, key) {return o.currentStyle? O.CurrentStyle [키] : Document.DefaultView.GetComputedStyle (O, False) [키]; };할당 함수
글을 쓸 때 종종 Dom 스타일의 과제를 만납니다. 편의상, 나는 할당 함수를 특별히 썼습니다.
/** - 함수 할당 - @param : obj 할당 된 객체 - @param : 옵션에 의해 수행 된 작업 - @parma : value ansay 컨텐츠*/function setAssign (obj, 옵션, 값) {switch (옵션) {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) {// event object 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'; // 마우스는 클리핑 영역을 움직여 작물 영역 그림자 영역을 그리기 위해 섀도우 영역을 그립니다. Window.event; // 현재 마우스 위치에서 마우스의 마우스 위치에서 마우스 위치는 마우스 이동 거리와 동일합니다. var sleft = oevent.clientx -tempx; var stop = oevent.clienty -tempy; // 바운드 외부의 한계는 오른쪽과 하단을 제한하면 if ((otailor.offsetleft+otailor.offsetWidth)> = (opicture.OffSetLeft+opicture.OffSetWidth)) {sleft = Opicture.OffSetLeft+opicture.OffSetWidth- OffsetLeft; } 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 (); }; // 움직임 이벤트를 취소하려면 마우스를 릴리스합니다. Window.event; // 이벤트 취소 문서 이동. // 기본 이벤트를 차단합니다. Oevent.preventDefault (); }; // 기본 이벤트를 차단합니다. Oevent.preventDefault ();}그림자 영역 그리기
/ *** @param : opicture picture dom object* @param : Otailor crop area dom object* @param : Oshadow 섀도우 영역 dom object*/ function shadow (Opicture, Otailor, Oshadow) {// 좌회전 영역 setAssign (Oshadow [0], 'width', (parseints (letcsss, ') - Parseint'). '왼쪽'))) + 'px'); setAssign (Oshadow [0], '높이', parseint (getcss (opicture, 'left')) + 'px'); setAssign (Oshadow [0], '높이', parseint (getcss (opicture, 'height')) + 'px'); setAssign (Oshadow [0], '왼쪽', parseint (getcss (opicture, 'left') + 'px') setAssign (Oshadow [0], 'top', parseint (getcss (opicture, 'top')) // 오른쪽의 그림자 영역은 setAssign (Oshadow [2], '' '', '', '' (parseint (opicture, 'width')) - parseint (getcss (otailor, 'width') - parseint (getcss (Oshadow [0], 'width') + 'px'(Oshadow [2], 'getcss'); 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], '높이', (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 (getcss (otailor, 'width')) + 'px'); setAssign (Oshadow [3], '높이', (parseint (getcss (opicture, 'height')) - parseint (getcss (Otailor, 'Height')) - parseint (getcss (Oshadow [1], 'Height')) + 'px'); setAssign (Oshadow [3], '왼쪽', (parseint (getcss (opicture, 'left')) + parseint (getcss (Oshadow [0], 'width')) + 'px'); setAssign (Oshadow [3], 'top', (parseint (getcss (otailor, 'top')) + parseint (getcss (otailor, 'height')) + 'px');}실제로 웹 페이지를 사용하면 레이아웃의 그림 CSS에 왼쪽 또는 상단 속성이없는 경우 위의 코드는 오류가 발생합니다. 오프셋 레프트 및 오프셋 탑을 대신 사용해야합니다.
작물 테두리를 추가하십시오
해제 된 레이아웃 다이어그램에서 작물의 가장자리를 볼 수 있으며 4 개의 모서리와 4면 각각은 작은 정사각형 모양을 갖습니다. 추가는 절단 영역과 비 컷 영역을 구별 할뿐만 아니라 스트레치 절단 영역을 추가하는 다음 단계를 편리하게 제공하는 것입니다. 코드 작성을 시작합시다.
/*** 작물 테두리 드로잉* @Param : Odiv 모든 테두리 개체* @Param : Ohandle 점점 엣지* @Param : Otailor Crop 객체*/function tailorborder (odiv, ohandle, otailor) {// (var i = 0; i <odiv.length; i ++) {setAssign (Odiv [i], ',', ',', ',', ''); 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], '높이', parseint (getcss (otailor, 'height')) + 'px'); } /* 도트 형 가장자리 도면* / // 4 코너 점-유사 가장자리 드로잉 (var i = 0; i <4; i ++) {// 도트와 같은 드로잉 setAssign (ohandle [i], '위치', '절대'); setAssign (Ohandle [i], 'width', '5px'); setAssign (Ohandle [i], '높이', '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 {// 오른쪽 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], '위치', '절대'); setAssign (Ohandle [i], 'width', '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'); } else {// 왼쪽 및 오른쪽 dot 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'); }}} 레이아웃에서 클리핑 영역 클래스 이름 box_handle 갖는 처음 4 개의 div는 4 개의 모서리에있는 도트를 나타내고, 마지막 4 개는 가장자리의 중간에 도트를 나타냅니다. 완료 후 효과는 다음과 같습니다.
그림자가있는 영역을 모니터링합니다
작물 면적과 그림자 영역이 그려집니다. 이제 작은 기능을 추가하여 마우스가 곱셈 영역 (즉, 그림자 영역)을 클릭 할 때 작물 영역을 취소하십시오.
// 그림자 영역 설정 시간 설정, 작물 영역이 사라지면 그림자 영역이 사라집니다 (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.heegiht = '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-restize'); 부서지다; 사례 'box_2': // 오른쪽 상단 setAssign (Otailor, 'cursor', 'ne-Resize'); 부서지다; 사례 'box_3': // 왼쪽 하단 setAssign (Otailor, 'Cursor', 'SW-Resize'); 부서지다; 사례 'box_4': // 오른쪽 하단 setAssign (Otailor, 'Cursor', 'se-Resize'); 부서지다; 사례 'box_5': // 상단 setAssign (Otailor, 'cursor', 'n-reesize'); 부서지다; 사례 'box_6': // setAssign (Otailor, 'cursor', 'w-reesize'); 부서지다; 사례 'box_7': // 왼쪽 하단 setAssign (Otailor, 'cursor', 's-restize'); 부서지다; 사례 'box_8': // right setAssign (otailor, 'cursor', 's-restize'); 부서지다; 사례 'box_8': // right setAssign (otailor, 'cursor', 'e-restize'); 부서지다; 기본값 : // 작물 영역에는 움직일 수있는 프롬프트 SetAssign (Otailor, 'Cursor', 'Move')이 표시됩니다. 부서지다; }}모니터링 할 DIV가 많기 때문에 이벤트 대표단에 의해 추가되며, 이는 데모에 불편합니다. 관심있는 학생들은 스스로 테스트 할 수 있습니다.
스트레칭 효과를 추가하십시오
암호
// 작물 영역에서 이벤트 이동 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, 'left')를 호출 할 수 있도록 객체와 함께 저장합니다. aattrs.top = getcss (Otailor, 'top'); aattrs.width = getcss (otailor, 'width'); aattrs.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 (aattrs.height) - stopt; otmpleft = parseint (aattrs.left) + sleftt; otmptop = parseint (aattrs.top) + stopt; 부서지다; CASE 'NE-RESIZE': // 오른쪽 상단 // 현재이 시점에서 폭은 마우스 이동 거리를 빼낼 수 없습니다. otmpheight = parseint (aattrs.height) - stopt; // 기본 소리가 오른쪽으로 이동되므로 오른쪽 상단 코너를 이동하는 데 왼쪽 값이 필요하지 않습니다. 부서지다; CASE 'SW -RESIZE': // 왼쪽 하단 // 오른쪽 높이가 마우스 이동 거리에 추가되어야합니다. otmpheight = parseint (aattrs.height) + stopt; otmpleft = parseint (aattrs.left) + sleftt; 부서지다; CASE 'SE-RESIZE': // 하단 오른쪽 // 동시에 하단 왼쪽과 상단의 조합 왼쪽과 상단 OTMPWIDTH = PARSEINT (OATTRS.WIDTH) + SLEFTT; otmpheight = parseint (aattrs.height) + stopt; 부서지다; CASE 'N -RESIZE': // 상단 OTMPHEIGHT = PARSEINT (OATTRS.HEIGHT) - STOPT; otmptop = parseint (aattrs.top) + stopt; 부서지다; CASE 'W -RESIZE': // 왼쪽 otmpWidth = parseint (aattrs.width) - sleftt; otmpleft = parseint (aattrs.left) + sleftt; 부서지다; CASE 'S-RESIZE': // OTMPHEIGHT = PARSEINT (OATTRS.HEIGHT) + STOPT; 부서지다; CASE 'e-RESIZE': // 오른쪽 var var otmpwidth = parseint (aattrs.width) + sleftt; 부서지다; 기본값 : // 그렇지 않으면 움직이는 작물 지역 TailorMove입니다 (Oevent, Otailor, Opicture, Oshadow); 부서지다; } // (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'))) {// b. opicture.offsettop+parseint (getcss (opicture, 'height')) - parseint (getcss (otailor, 'top')); } // (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 (otcss (otailor, 'left'))> = (opicture.offsetleft+opicture.offsetwidth) {// 오른쪽을 경계 OTMPWIDTH = OPICTURE.OffTETFT+opictpest. 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); }; // 마우스를 출시 할 때 이동 이벤트 문서를 취소합니다. onmouseup = function (ev) {// 이벤트 객체 var oevent = ev || 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); }}작물의 위치를 얻으십시오
작물 효과의 기능은 기본적으로 완료되므로 작물의 위치를 얻어야합니다. 우선, 어떤 속성을 얻어야하는지 알아야합니다. PHP 의 GD 라이브러리 운영에 따르면 작물의 출발점 좌표와 작물의 폭과 높이를 알아야합니다. 기능을 사용 하여이 데이터를 가져 와서 캡슐화하고 반환합니다.
함수 getele () {var opicture = $ ( 'img'). get (0); var otailor = $ ( '. img_box'). get (0); aattrs.leftx = (parseint (getcss (otailor, 'left')) - opicture.offsetleft); aattrs.lefty = (parseint (getcss (otailor, 'top')) - opicture.offsettop); aattrs.twidth = (parseint (getcss (otailor, 'width'))); aattrs.theight = (parseint (getcss (otailor, 'height'))); 귀환 aattrs;}또 다른 문제가 있습니다. 웹 페이지의 사진이 CSS를 사용하여 압축되면 여기에서 얻은 위치는 상상했던 것과 다릅니다. 자른 이미지의 범위가 더 커질 수 있습니다 (원래 이미지가 커) 더 작아 질 수 있습니다 (원래 이미지는 더 작습니다).
원래 이미지의 크기를 얻을 수 있다면 압축 이미지의 비율에 따라 원래 이미지의 비율에 따라 자르고 올바른 자르기 이미지를 얻을 수 있습니다.
좋아, 간단한 이미지 자르기 기능이 완료되며 Ajax를 사용하여 처리를 위해 배경으로 전달할 수 있습니다.
이 기사의 내용은 여기서 끝납니다. 궁금한 점이 있으면 메시지를 남겨 두십시오. 이 기사가 JavaScript를 배우는 모든 사람들에게 도움이되기를 바랍니다.