4

プロジェクトでファブリック プラグインを使用しています。オブジェクトが選択されると、次のデザインの領域が選択されます。以下に示すように、選択した領域に画像をいくつかの写真で添付できますか?

、を使用してテキストを設定します

hw[i] = new fabric.Text($(this).val(), {
                left : 100,
                top : 100,
                fontSize : 20
            });

現在、私は得ています：

ここに画像の説明を入力

そして、私は取得したい、

ここに画像の説明を入力

ありがとう、

4

1 に答える 1

2

Fabric JS で直接行うことはできませんが、誰かが拡張機能を作成しました。

GitHub サイト: https://github.com/pixolith/fabricjs-customise-controls-extension

ライブ デモ: http://pixolith.github.io/fabricjs-customise-controls-extension/example/index.html )

これにより、ハンドル画像とそのアクションの変更を割り当てることができます。

拡張機能を追加した後、次のようなものを追加できます: アクションを取得する

fabric.Canvas.prototype.customiseControls({
    tl: {
        action: 'remove',
    },
    tr: {
        action: 'rotate'
    },
    br: {
        action: 'scaleY',
    },
});

次に、アイコンを次のように変更します。

fabric.Object.prototype.customiseCornerIcons({
    settings: {
        borderColor: 'black',
        cornerSize: 25,
        cornerShape: 'circle',
        cornerBackgroundColor: 'black',
        cornerPadding: 10
    },
    tl: {
        icon: 'icon/trashcan.svg'
    },
    tr: {
        icon: 'icon/rotate.svg'
    },
    br: {
        icon: 'icon/scale.svg'
    },
});
于 2016-12-06T18:31:16.893 に答える