Fabric.js 组cornerStyle 属性

简介

Fabric.js 是一个基于 HTML5 Canvas 实现的开源、轻量、易用的前端绘图库。它提供了相对完整的绘图功能，并且在功能扩展方面也很灵活。

cornerStyle 是 Fabric.js 中 Group（组）对象的属性之一，默认值为 'rect'，表示组对象的角部分采用矩形。除此之外，还可以设置为 'circle'、'inward' 或 'outward' 等值，实现不同的角效果。

用法

设置组的角效果

通过设置 cornerStyle 属性可以给组对象设置角效果。例如，将 cornerStyle 设为 'circle' 即可使组的角变为圆形。

var rect = new fabric.Rect({
  width: 200,
  height: 100,
  fill: 'red',
  stroke: 'blue',
  strokeWidth: 2
});
var circle = new fabric.Circle({
  radius: 30,
  fill: 'green',
  left: 100,
  top: 50
});
var group = new fabric.Group([ rect, circle ], {
  left: 150,
  top: 150,
  cornerStyle: 'circle'
});

改变角效果

在运行时可以通过设置 setCornerStyle 方法改变组的角效果。例如，将 cornerStyle 从 'rect' 改变为 'inward' 即可使组的角变为内凹效果。

group.set({
  cornerStyle: 'inward'
});

自定义角效果

Fabric.js 提供了 cornerStyleProperties 属性，可以用来自定义角效果。通过设置 cornerStyleProperties 属性，我们可以为内、外、边角分别设置不同的效果，从而实现更加丰富的组角效果。

var group = new fabric.Group([ rect, circle ], {
  left: 150,
  top: 150,
  cornerStyle: 'custom',
  cornerStyleProperties: {
    topLeftCorner: 'circle',
    topRightCorner: 'inward',
    bottomLeftCorner: 'outward',
    bottomRightCorner: 'custom',
    bottomRightCornerRadius: 10
  }
});

上述代码中，我们将 cornerStyle 设置为 'custom'，并通过 cornerStyleProperties 自定义了组的四个角的效果。其中 topLeftCorner 采用圆形，topRightCorner 采用内凹效果，bottomLeftCorner 采用外凸效果，bottomRightCorner 采用自定义效果，需要指定 bottomRightCornerRadius 为 10。

总结

通过 cornerStyle 属性和 cornerStyleProperties 属性，可以在 Fabric.js 中实现不同的组角效果。在实际开发中，可以根据需求自定义组角效果以满足项目需求。