그룹으로의 변환 및 변형 (비뚤어 짐)

Question

이 문제를 해결하는 방법을 알아내는 데 어려움이 있습니다.

내부에 다각형을 보유하고있는 KineticGroup이 있습니다. 또한 다각형의 오른쪽 상단 구석에있는 버튼 (KineticCircle)이있어 사용자가 드래그하여 다각형을 비뚤어지게 할 수 있습니다.

모두 작동합니다. 내 문제는 :

버튼이 다각형으로 비뚤어집니다! 스큐가 움직이기 때문에 버튼의 이미지 상단이 다각형을 따라 가야하지만 원래 모양을 유지해야합니다.

메인 그룹 내부의 다른 그룹으로 버튼을 이동하고 제거/추가하려했지만 여전히 비뚤어졌습니다.

또한 폴리곤 그룹과 버튼 그룹을 유지하면서 부모 그룹을 만들려고 시도했지만 버튼 그룹은 여전히 ​​그대로 유지됩니다. 이는 나에게 좋지 않습니다.

모든 아이디어이 문제를 해결하는 방법은 무엇입니까? 상위 그룹 변환에 영향을받지 않도록 하위 그룹을 만들 수 있습니까?

은 사전에 감사

Answer 1

어떻게 재산 VAR의 제어 스큐와 구형 영역의 사용자 정의 KineticJS 모양을 만드는 방법에 대한.

는 그런 다음 레이어 왜곡 필요가 없습니다 : 도움을

// skewRect properties to manipulate skew, etc. 
var skewY=0; 
var skewX=0; 
var width=50; 
var height=25; 

var skewRect = new Kinetic.Shape({ 
    drawFunc: function(canvas) { 
    var context = canvas.getContext(); 
    context.save(); 
    context.beginPath(); 
    context.transform(1, skewX, skewY, 1, 0, 0); 
    context.fillRect(-width/2, -height/2, width, height); 
    context.closePath(); 
    canvas.fillStroke(this); 
    context.restore(); 
    }, 
    fill: 'red', 
    stroke: 'black', 
    strokeWidth: 4 
});