fabric.js : 회전 후 그룹 축 재설정 재설정

Question

이 질문에 올바르게 제목을 붙 였는지 확신 할 수 없지만 SVG에서 그룹을 만들고 아이소 메트릭 상자 위에있는 것처럼 보이게해야합니다. 그래서 나는 그것을 45도 회전시킨 다음 높이를 내려야합니다.

문제는 회전 후 높이를 변경해도 원래 (회전 된) Y 축 그룹이 변경된다는 것입니다.

여기

fabric.loadSVGFromURL(patternURL, function (svgpattern) { 

    var ptnGroup = new fabric.Group(svgpattern, { 
     top: 0, 
     left: 0, 
     width: 500, 
     height: 500, 
     angle: 45 
    }); 

    ptnGroup.scaleY = .3; 
    canvas.add(ptnGroup); 
} 

Answer 1

문제는 스케일링 회전 전에 적용된다 ...

여기 내가 사용하고 관련 코드입니다 ... 시각적 인 설명입니다. 회전 후 일어날 확장 강제로 다른 그룹에 ptnGroup 포장 및 외부 그룹에 스케일을 적용 할 수

fabric.loadSVGFromURL(patternURL, function (svgpattern) { 

    var ptnGroup = new fabric.Group(svgpattern, { 
    top: 0, 
    left: 0, 
    width: 500, 
    height: 500, 
    angle: 45 
    }); 

    var scaleGroup = new fabric.Group([ ptnGroup ], { 
    scaleY: 0.3 
    }); 
    canvas.add(scaleGroup); 
} 

가 또는 당신은 변환 회전에 매트릭스와 올바른 순서로 곱 확장 변환을 사용할 수 있습니다 :

fabric.loadSVGFromURL(patternURL, function (svgpattern) { 

    var ptnGroup = new fabric.Group(svgpattern, { 
    top: 0, 
    left: 0, 
    width: 500, 
    height: 500 
    }); 

    ptnGroup.transformMatrix = [0.707, 0.212, -0.707, 0.212, 0, 0]; 
    canvas.add(ptnGroup); 
} 

여기에 0.707는 cos(45°)에서오고, 0.212는 cos(45°) * 0.3입니다.