Fabric.js ActiveSelection cornerColor 属性

简介

Fabric.js是一个基于html5 canvas元素的前端绘图库，它提供了包括对象、基本形状、路径、文本、图片等元素在内的丰富绘图功能。在Fabric.js中，我们可以使用ActiveSelection对象表示当前选中的多个元素，然后通过设置其cornerColor属性来改变选中框中的控制点颜色。

属性

cornerColor属性是指选中框中控制点的颜色，默认颜色为白色。

代码演示

下面是使用cornerColor属性改变选中框中控制点颜色的代码演示：

// 创建canvas元素
var canvas = new fabric.Canvas('c');

// 创建两个矩形
var rect1 = new fabric.Rect({
  left: 50,
  top: 50,
  width: 100,
  height: 100,
  fill: 'red'
});

var rect2 = new fabric.Rect({
  left: 200,
  top: 50,
  width: 100,
  height: 100,
  fill: 'green'
});

// 将两个矩形添加到canvas中
canvas.add(rect1, rect2);

// 创建ActiveSelection对象
var selection = new fabric.ActiveSelection(canvas.getObjects());

// 设置选中框中控制点颜色为红色
selection.cornerColor = 'red';

// 将选中框添加到canvas中
canvas.setActiveObject(selection);

总结

Fabric.js中的ActiveSelection对象提供了一种表示多个元素选中状态的方式，并且可以通过cornerColor属性来改变选中框中控制点的颜色。开发者可以根据自己的需求进行定制，让选中状态更加醒目。