2012-05-22 2 views
2

예를 들어 면적이 예를 들어 200 x 100 픽셀. 그리고 그 필드 안의 자르기를 선택하는 대신, 필드 자체를 자르기 영역으로 지정하고 자르기 필드 대신 이미지를 드래그합니다.Jquery crop plugin, 이와 비슷한 것이 있는지 모르겠 음

Crop image example

그래서 당신은 전체 이미지의 가장자리를 볼 수 있지만 당신은 단지 자르기 영역 내에서 이미지를 참조하십시오. 이미지를 드래그하여 주위를 볼 수 있습니다.

+0

아시겠지만, 저는 여기에서 새로 왔습니다. 팁 주셔서 감사합니다;) –

답변

4

간단한 개념이 있습니다. 경계 밖으로 드래그 할 수 없는지 확인하기 위해 약간의 정제가 필요할 것입니다 (빨간색 테두리가있는 div에 드래그를 시작하면 포함 규칙이 적용되지 않음). 그러나 개념 증명을 제공해야합니다.

http://jsfiddle.net/foxwisp/G7cEP/1/

는 분리되도록 기본적으로 당신은 단지 마스크 상자의 위치를 ​​업데이트하고, 이동 나타나도록 한 후 배경 이미지의 위치를 ​​업데이트합니다.

내가 더 설명해 줄 수 있으면 알려주세요.

+0

와우 이것은 완벽합니다! 고마워요. 그것은 나입니까, 아니면 한 가지 문제가 있습니까? 바깥 쪽 이미지는 아래에서 오른쪽으로 끌어 올 수 있지만 가운데에서 위아래로 끌 수는 없습니다. 이 원인은 무엇입니까? –

+0

Nevermind. 그것은 스크립트에 추가 한 함수입니다. 이미 많은 도움이되었습니다. 그러나 자르기가 여전히 동일하면서 이미지의 크기를 조정하기 위해 이미지의 바깥 쪽 모서리 부분을 어떻게 끌 수 있는지 알고 있습니까? –

+0

내일 피들을 게시 하겠지만, 위의 접근 방식으로 작업하는 것을 볼 수있는 유일한 방법은 background-size 속성을 사용하여 resize 이벤트 (jquery_ui로 구현 됨)에 배경 이미지를 축척하는 것입니다. 배경 크기는 아주 새롭다. –

관련 문제