paperjs에서 직사각형을 드래그하여 크기를 조정하려면 직사각형을 회전시키고 마우스의 모서리 중 하나 (앵커)를 드래그하여 마우스의 크기를 조정할 수 있어야합니다. paperjs에서 어떤 수학이나 기능이 도움이됩니까?paperjs에서 사각형을 드래그/크기 조정 및 회전하는 방법은 무엇입니까?
스케일링을 사용하거나 모서리를 수정하여 시도했지만 원하는대로 작동하지 않습니다. 누군가 해결책을 가르쳐 줄 수 있습니까?
미리 감사드립니다.
다음은 간단한 시작 방법입니다. UI를 어떻게 사용 하는지를 잘 모르기 때문에 회전을 처리하지는 않지만 테두리 상자의 크기를 변경하여 경계 상자를 문제없이 회전 할 수 있어야합니다.
나는 내 자신의 UI를 구성하고 가서 자세한 내용은없이 내가 할 수있는 당신이 질문의 많은 문제를 해결하기 위해 예제가 더 복잡하기로 결정했다. 여기에 새 스케치입니다 :UI를 크기를 조정하는 코너와 드래그
모서리를 클릭하는 것은 약간 까다 롭지 만 그것은 독자에게 남겨진 운동입니다. 그들은 단지 Path의 각 세그먼트 지점이 어디에 위치하는지 강조하기 위해 색칠 된 원입니다. 코드의
요점 :
가 확장 사각형의 경계를 사용합니다. Path.Rectangle은 종이에 관한 한 직사각형이 아닙니다. 네 개의 세그먼트 점을 연결하는 것은 4 개의 곡선 (직선형)입니다. 가운데, 왼쪽 위 등을 얻기 위해 직사각형을 사용해야하는 경우 Rectangle이 필요합니다. 사각형의 경계 (Path.Rectangle.bounds)를 사용하여 표시되는 사각형의 크기를 조정합니다. 코드는 추가 아쿠아 사각형이있는 경계를 보여 주므로 표시됩니다 (회전 할 때 가장 쉽게 볼 수 있습니다).
onMouseDown()은 상태를 onMouseDrag()으로 설정하고 각 상태에 필요한 데이터를 설정합니다 (예 : 크기 조정을위한 축척 기준 저장).
onMouseDrag()은 이동, 크기 조정 및 회전을 구현합니다.
tool.onMouseDrag = function(e) { if (rect.data.state === 'moving') { rect.position = rect.position + e.point - e.lastPoint; adjustRect(rect); } else if (rect.data.state === 'resizing') { // scale by distance from down point var bounds = rect.data.bounds; var scale = e.point.subtract(bounds.center).length/ rect.data.scaleBase.length; var tlVec = bounds.topLeft.subtract(bounds.center).multiply(scale); var brVec = bounds.bottomRight.subtract(bounds.center).multiply(scale); var newBounds = new Rectangle(tlVec + bounds.center, brVec + bounds.center);
rect.bounds = newBounds;
adjustRect(rect); } else if (rect.data.state === 'rotating') { // rotate by difference of angles, relative to center, of // the last two points. var center = rect.bounds.center; var baseVec = center - e.lastPoint; var nowVec = center - e.point; var angle = nowVec.angle - baseVec.angle; rect.rotate(angle); adjustRect(rect); } }
이동
크기 조정이 명확하지 않습니다.전략은 mousedown 지점과 직사각형 중심 사이의 원래 거리 (scaleBase.length)를 기반으로 x 및 y 경계를 조정하는 것입니다. paper-full.js는 점들에 연산자 ("+", "-", "*", "/")를 사용할 수 있지만, 나는 subtract()과 multiply() 메쏘드를 몇 번 사용했습니다. 그렇게 계산.
회전 기능은 한 점도 벡터를 정의하고 벡터는 각도를 갖는다는 매우 좋은 개념을 사용합니다. 사각형의 중심을 기준으로 이벤트 lastPoint과 point 사이의 각도의 차이를 기록하고 그 차이만큼 사각형을 회전합니다.
moveCircles() 및 adjustRect()은 모서리 원과 아쿠아 사각형을 업데이트하는 부기 기능입니다.