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 回答