如何更改Fabric.js调整大小手柄的默认外观？

Question

Fabric.js的交互模式非常有用，允许像在矢量绘图程序（如Inkscape）中操作对象一样进行操作。我想将这种功能用于我的Web应用程序项目中，需要一种拼贴编辑器。

默认情况下，选择对象时，边界框和调整大小手柄以蓝色显示，并且手柄是大的蓝色空心正方形。我想改变这个以适应我的项目设计。

文档有一个专门的页面介绍如何执行此类自定义： http://fabricjs.com/customization/

使用上述指南，我能够在我的应用程序中获得外观更好的选择框。但是，这个解决方案是基于每个对象的。当使用Shift键执行组选择时，手柄和边界框恢复为默认的蓝色。

如何实现与文档中所述的同等程度的自定义，并自动将其应用于整个画布，包括组选择？

- DavGin

---

链接已损坏。 - undefined

Answer 1

您可以全局覆盖默认的对象控制属性，并根据您的偏好进行设置。以下是您的代码示例：

fabric.Object.prototype.set({
    transparentCorners: false,
    borderColor: '#ff00ff',
    cornerColor: '#ff0000'
});

你可以在代码开头设置这个。这将覆盖控件的默认样式，并且将应用于任何地方。你可以在这里找到一个可用的代码片段: http://jsfiddle.net/apyeLeut/1/

- Swapnil Jain

---

嗨Swapnil，你知道把手的方形能不能变成圆形吗？ - undefined

Answer 2

您可以在object:selected事件中覆盖该行为。例如，

canvas.on('object:selected',function(e){
     e.target.transparentCorners = false;
     e.target.borderColor = 'green';
     e.target.cornerColor = 'purple';
});

FIDDLE

- Khawer Zeshan

---

很好。运行得非常顺畅。+1 - RJParikh

Answer 3

我正在使用Fabric 1.7.19版本，并尝试按照Swapnil JainJain的回答进行操作，但在我的情况下并没有起作用。

作为替代方案，我想到了这个解决方案:

 fabric.Object.prototype.selectionColor ='rgba(255,119,0,0.3)';
 fabric.Object.prototype.cornerSize = 20;
 fabric.Object.prototype.transparentCorners = false;
 fabric.Object.prototype.cornerColor = '#eee';

我在以下情况下进行了测试：

1. 文档准备就绪之前；
2. 文档准备就绪之后；
3. 按钮点击后。

- Ricardo Rocha

Answer 4

除了上述解决方案，您还可以在object:added事件上进行覆盖。

对于所有对象：

canvas.on("object:added", (event) => {
  event.target.set({
    transparentCorners: false,
    borderColor: "lime",
    cornerColor: "tomato"
  });
});

针对特定的对象类型:

canvas.on("object:added", (event) => {
  const object = event.target;

  switch (object.type) {
    case "circle":
    case "rect":
      object.set({
        fill: "lime",
        stroke: "tomato"
      });
      break;
    case "line":
      object.set(stroke, "tomato");
      break;
    default:
      // all other objects
      object.set(transparentCorners, false);
  }
});

- sn3p

---

你知道是否有可能将手柄的方形变成圆形吗？ - undefined