Fabric.js：边框为虚线时如何指定选框的次要边框颜色

嘿，这个问题我之前也碰到过！当选框颜色和重叠的对象颜色一致时，确实会出现边框被遮挡、看不清选中范围的情况。咱们可以通过扩展Fabric.js的对象渲染逻辑，给选框添加次要边框颜色，完美解决这个问题。

Fabric.js原生没有直接提供secondaryBorderColor这类配置，但我们可以重写对象的_renderBorder方法，让它先绘制一层对比色的次要边框（比如白色，和黑色形成强烈反差），再绘制原本的主边框。这样哪怕主边框被遮挡，次要边框也能清晰凸显选框位置。

完整可运行代码 #

var canvas = window.__canvas = new fabric.Canvas('canvas');

// 创建两个重叠的黑色矩形
var rect = new fabric.Rect({
  left: 10,
  strokeWidth: 0,
  top: 10,
  width: 100,
  height: 100,
  fill: 'black'
});
var rect2 = new fabric.Rect({
  left: 40,
  strokeWidth: 0,
  top: 60,
  width: 200,
  height: 200,
  fill: 'black'
});

// 给所有Fabric对象添加次要边框的配置项
fabric.Object.prototype.set({
  borderColor: 'black',
  // 自定义次要边框颜色
  secondaryBorderColor: 'white',
  // 次要边框的宽度（可以按需调整）
  secondaryBorderWidth: 2,
  cornerColor: 'black',
  cornerSize: 6,
  transparentCorners: true,
  borderDashArray: [4, 4],
  rotatingPointOffset: 20,
  padding: 2 // 给次要边框留出显示空间
});

// 重写_renderBorder方法，实现双层边框渲染
fabric.Object.prototype._renderBorder = function(ctx) {
  if (!this.borderColor) return;
  
  // 第一步：绘制次要边框（比主边框宽，作为底层）
  ctx.save();
  ctx.strokeStyle = this.secondaryBorderColor;
  ctx.lineWidth = this.borderWidth + this.secondaryBorderWidth;
  ctx.setLineDash(this.borderDashArray || []);
  ctx.strokeRect(
    -this.width/2 - this.padding,
    -this.height/2 - this.padding,
    this.width + this.padding * 2,
    this.height + this.padding * 2
  );
  ctx.restore();
  
  // 第二步：绘制原本的主边框
  ctx.save();
  ctx.strokeStyle = this.borderColor;
  ctx.lineWidth = this.borderWidth;
  ctx.setLineDash(this.borderDashArray || []);
  ctx.strokeRect(
    -this.width/2 - this.padding,
    -this.height/2 - this.padding,
    this.width + this.padding * 2,
    this.height + this.padding * 2
  );
  ctx.restore();
};

rect.cornerSize = 8;
rect.padding = 0;
canvas.add(rect);
canvas.add(rect2);
canvas.setActiveObject(rect2);

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="canvas" width="400" height="400"></canvas>

效果说明 #

• 我们新增了secondaryBorderColor和secondaryBorderWidth两个自定义配置项，方便你灵活调整次要边框的样式
• 渲染时先画一层更宽的白色次要边框，再叠加黑色主边框，这样即使主边框被黑色矩形遮挡，白色边框也能清晰显示选框范围
• 你可以根据需求修改次要边框的颜色、宽度，甚至调整padding值来控制边框和对象的间距

可选优化方向 #

• 如果想要次要边框在主边框内部，可以修改strokeRect的坐标参数，让次要边框的范围比主边框小一圈
• 也可以给次要边框设置独立的borderDashArray，让主次边框的虚线样式不同，进一步提升辨识度

内容的提问来源于stack exchange，提问作者Kombye