2

fabric.Pathを使用してシェイプを作成しようとしていますが、その中心を中心に回転できるようにしたいと思います。問題は、バウンディングボックスがオフセットされており、実際の形状がその中心を中心に踊っているということです。

ここに画像の説明を入力してください

this.canvas = new fabric.Canvas('c')
this.canvas.clear();

var triangle = new fabric.Triangle({
width: 20,
            height: 20,
            fill: '#35a2da',
left: 410,
top: 350,
angle: 90
});


var path = new fabric.Path(
  "M 200 175 A 25 25 0 1 0 217.678 217.678",
        {
        fill : '',
        stroke : '#35a2da',
        strokeWidth : 7,
        left: 200, 
        top:200
    });

var rotate = new fabric.Group([path, triangle], {left:200, top:200});

this.canvas.add(rotate);

上記のコードはここにあります。

4

1 に答える 1

0

fabric.Path描画しているSVG円弧に基づいてオブジェクトの寸法を固定し、の寸法を同じ寸法に固定する限りfabric.Group、形状を完全に中央に配置できるはずです。

フィドルの例

明示的にサイジングする理由

fabric.Path

の幅と高さを明示的に設定する理由fabric.Pathは、それ以外の場合、デフォルトのサイズに円弧のストロークからの追加のサイズが含まれるためです。

fabric.Group

のサイズを明示的に設定する理由fabric.Groupはfabric.Triangle、円弧の始点に配置すると、境界が完全に中心に配置する円の外側に広がるためです。

回転アイコンのSVGパスを動的に計算する方法

半径を指定して、SVG円弧をレンダリングするために必要なポイントを持つオブジェクトを返すこの関数を作成しました。

function rotatePoints(radius) {
    // Get 45 degrees in radians
    var angle = Math.PI / 4;
    return {
        radius: radius,
        startPos: {
            x: radius,
            y: 0
        },
        endPos: {
            x: radius + (radius * Math.cos(angle)),
            y: radius + (radius * Math.sin(angle))
        }
    }
}

たとえば、半径が30の場合、次のようにSVGパスを作成できます。

var pathPts = rotatePoints(30);
var pathSVG = [
    'M', pathPts.startPos.x, pathPts.startPos.y,
    'A', pathPts.radius, pathPts.radius,
    0, 1, 0,
    pathPts.endPos.x, pathPts.endPos.y
];    
pathSVG.join(' ') // result: "M 30 0 A 30 30 0 1 0 51.21320343559643 51.21320343559643"

キャンバス座標とグループ座標

Pathとを追加したTriangle後Group、どちらかの位置を設定する場合、座標はGroupキャンバス全体ではなく、の境界を基準にしていることに注意してください（位置の調整方法の例については、フィドルを参照してください。に追加されましたGroup。

于 2013-06-17T03:32:20.030 に答える