모양을 그룹으로 변환

Question

스테이지에서 다른 모양을 사용하고 있으며 크기를 선택할 때 크기를 조정할 수있게하려고합니다.

모양을 그룹으로 "변환"하고 리사이저를 추가한다고 생각했습니다. 셰이프 선택을 취소하면 resizer를 제거한 다음 그룹에서 셰이프를 제거하고 이전 부모에 다시 추가 할 수 있습니다.

나는 그걸 시도해 보았고, 좌표 원점이 Shape에서 바뀌었고 실제로 dragBoundFunc가 있다면 그것은 더 나쁘다. 그래서 그것은 많은 일로 보입니다. 그리고 그것은 틀린 느낌입니다. 아마 널리 퍼진 그런 일에 더 나은 접근이 있어야한다고 생각했습니다.

제 질문은 모양을 다시 선택하지 않을 때 resizer를 기존 모양에 즉시 추가하고 제거하는 가장 좋은 방법은 무엇입니까?

Answer 1

합의, 크기 조정 "앵커는"시각적으로 어색한 이미지에 별도의 resizers 추가 코드

시각적 호소력이 복잡한되고 있습니다

(O/s의 창을 활성화하기 위해 투박한 찾고 resizers를 추가하지 마십시오 크기 조정).

별도의 리사이저 추가는 또한 매우 복잡해집니다.

는 은유 적으로, 태양 모양에 관해 궤도를 도는 리사이저 행성을 별도로 관리해야합니다.

모양이 dragBoundFunc에 의해 제한 될 때 그 위성을 관리하는 것은 복잡합니다.

KineticJS가 회전 지점을 정의하기 위해 오프셋을 사용하기 때문에 모양을 회전 할 때 해당 위성을 관리하는 작업은 놀랍게 복잡해집니다.

다른 방법 : 모양 자체의 경계 상자를 사용하여 크기 조정을 관리 할 수 ​​있습니다.

• 무대에서 마우스 이벤트를 수신합니다.
• 사용자가 모양의 테두리에 마우스를 놓으면 크기 조정 작업이 시작됩니다.
• 사용자가 드래그 할 때 드래그 한면과 반대쪽에서 마우스를 드래그 한 거리를 기준으로 모양의 크기를 조정합니다.

장점 :

• 없음 앵커는
• 는 사용자가 자신이 관여
• 만 모양 O/s의 창 크기를 조정하면 잘 알고있는 같은 크기 조정 방법을 사용하여 필요 복잡 "위성 - 앙코르 "관리가 필요하지 않습니다.

여기서 예이다 : http://jsfiddle.net/m1erickson/T4E9Y/

이 형상 (이 예에서는 화상을 사용)를 정의.

kImage = new Kinetic.Image({ 
    image:img, 
    x:10, 
    y:10, 
    width:img.width, 
    height:img.height, 
}); 
layer.add(kImage); 
layer.draw(); 

저장 현재 크기

무대에 이는 MouseDown 이벤트를 수신에서 모양의 경계 영역.

저장 모양 BoundingBox의 국경

$(stage.getContent()).on('mousedown', function (event) { 
    var pos=stage.getPointerPosition(); 
    var mouseX=parseInt(pos.x); 
    var mouseY=parseInt(pos.y); 
    var ipos=kImage.position(); 
    var isize=kImage.getSize(); 
    var right=ipos.x+isize.width; 
    if(mouseX>right-10 && mouseX<right+10){ 
     startRight=mouseX; 
     startWidth=isize.width; 
     startHeight=isize.height; 
    } 
}); 

내부 사용자 mousedowns가 무대에서 mousemove 이벤트를 듣기 시작 드래그 위치.

시작 드래그 위치에서 드래그 한 거리에 따라 모양을 조정합니다.

$(stage.getContent()).on('mousemove', function (event) { 
    if(startRight>=0){ 
     var pos=stage.getPointerPosition(); 
     var mouseX=parseInt(pos.x); 
     var mouseY=parseInt(pos.y); 
     var dx=mouseX-startRight; 
     var scaleFactor=(mouseX-(startRight-startWidth))/startWidth; 
     kImage.width(startWidth*scaleFactor); 
     kImage.height(startHeight*scaleFactor); 
     layer.draw(); 
    } 
}); 

스테이지에서 mouseup 이벤트를 수신합니다.

사용자가 여기에서 갈 수있는 마우스

$(stage.getContent()).on('mouseup', function (event) { 
    startRight=-1; 
}); 

놓을 때 드래그 크기 조정을 종료 :

이 예는 오른쪽 테두리에서 크기 조절을 활성화합니다. 비슷하게 다른 테두리를 활성화 할 수 있습니다.

mousedown에서 대상을 변경하여 크기를 조정할 수 있습니다.

매우 불규칙한 모양의 경우 사용자가 해당 경계 상자로 이동할 때 모양의 경계 상자를 표시 할 수 있습니다. 그런 다음 경계 상자 테두리를 사용하여 사용자의 크기를 조정할 수 있습니다.

마우스가 끌기 경계에있을 때 모든 유형의 도형에 대한 경계 상자를 강조 표시 할 수 있습니다. 테두리 상자는 사용자에게 유용한 비주얼이됩니다.