Fabric.js ActiveSelection cornerStyle 属性介绍

在使用Fabric.js时，可能会涉及到将多个对象进行选择并进行操作。在这种情况下，我们需要使用Fabric.js提供的ActiveSelection对象。当我们选中ActiveSelection对象时，会出现一些特殊的控制点，用于改变其大小或者角度。这些控制点被称为“角点”，并且可以使用ActiveSelection的cornerStyle属性进行自定义。

cornerStyle属性定义

cornerStyle属性是一个字符串，表示角点的样式。默认情况下，ActiveSelection的cornerStyle属性为“rect”，即矩形。目前，Fabric.js仅支持矩形和圆形两种角点样式。

activeSelection.cornerStyle = "rect"; // 矩形角点
activeSelection.cornerStyle = "circle"; // 圆形角点

修改角点样式

为了自定义角点样式，我们需要使用Fabric.js提供的Corner类。Corner类允许我们通过继承来自定义角点的样式和行为。

下面是一个示例，通过继承Corner类并覆盖render和onMouseDown方法来自定义角点样式。该角点样式为“+”号，可以单击该角点进行删除。

var PlusCorner = fabric.util.createClass(fabric.Object, {
  // 绘制角点
  render: function (ctx) {
    var size = this.cornerSize;
    var x = size / 2;
    var y = size / 2;

    // 画出'+'
    ctx.beginPath();
    ctx.strokeStyle = this.borderColor;
    ctx.lineWidth = this.borderWidth;
    ctx.lineCap = "round";
    ctx.moveTo(-x, 0);
    ctx.lineTo(x, 0);
    ctx.moveTo(0, -y);
    ctx.lineTo(0, y);
    ctx.stroke();
  },

  // 角点被单击
  onMouseDown: function (eventData, transform) {
    var fabricObject = transform.target;
    var activeSelection = fabricObject.canvas._activeObject;
    if (activeSelection && fabricObject && fabricObject.corner) {
      activeSelection.removeWithUpdate(fabricObject);
    }
  }
});

// 自定义角点样式
activeSelection.cornerStyle = new PlusCorner({
  size: 10,
  borderColor: "white",
  borderWidth: 2,
  cornerColor: "black",
  cornerStrokeColor: "black",
  cornerSize: 10,
  transparentCorners: false,
  hasBorders: false
});

总结

ActiveSelection的cornerStyle属性允许我们自定义角点样式以及使用自定义的Corner类实现更高级的角点行为。这些功能为我们开发更出色的应用程序提供了更多的可能性。