在fabric.js中更改對象的選擇樣式

Question

我在我的項目中使用了面料插件。當選擇了對象時，我們使用以下設計獲得選定的區域。 我可以將圖像附加到選定區域，如下圖所示： -

我用文字設置，

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

目前，我得到：

我希望得到，

謝謝，

Answer 1

雖然你不能直接用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'
    },
});