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です。