在 fabric.js 中更改对象的选择样式答案

【问题标题】：Change selection style of object in fabric.js在 fabric.js 中更改对象的选择样式
【发布时间】：2013-09-02 19:16:19
【问题描述】：

我正在使用我的项目中的Fabric插件。选择对象时，我们将获得具有以下设计的选定区域。我可以用一些图片将图像附加到选定区域，如下所示：-

我使用 , 设置文本

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

目前，我得到：

我希望得到，

谢谢，

【问题讨论】：

你只能自定义角颜色，角大小，透明边框和类似的东西来选择，我不确定这是否可行..
@PrasannaAarthi 我正在尝试 textShadow: 'rgba(0,0,0,0.3) 5px 5px 5px' ，但是如果我只想更改 blur Sixe 即最后一个值怎么办？？
试试 rgba(0,0,0.3) 0 0 5px ..
@PrasannaAarthi 不，我想要类似 obj.set('top', h);这仅设置顶部值我只想设置模糊大小，并在另一个按钮上设置阴影颜色。希望你能得到我的问题
您想使用 textshadow 在文本上设置模糊，或者您想模糊一个对象，比如图像？

标签： javascript jquery html fabricjs

【解决方案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'
    },
});

【讨论】：