fabric.js: 如何设置选择框和控件的笔划粗细？

Question

在fabric.js中，如何调整对象select离子框和控制手柄的描边粗细？

有许多可用的自定义选项，但不清楚如何自定义笔触粗细。有可能吗，也许是通过间接的方式？

注意：属性 selectionColor、selectionBorderColor、selectionLineWidth 具有误导性...它们与尝试时出现的临时 selection 框有关在 canvas 上做一个新的拖动-select。一旦你的 selection 制作完成，它就会消失，然后你会看到带有控制手柄的持久对象 selection 框（我正在尝试自定义的东西）。

查看链接：

http://fabricjs.com/customization

http://fabricjs.com/controls-customization

Answer 1

好的，这是一个分为两部分的解决方案：

https://codepen.io/MarsAndBack/pen/bGExXzd

选择框笔画粗细为：

使用fabric.Object.prototype.set 全局自定义任何对象选择。此外，borderScaleFactor 已记录，但未包含在 fabric.js 自定义演示中：

fabric.Object.prototype.set({
  borderScaleFactor: 6
})

为控制手柄笔划粗细：

这里我们重写不同，实际上使用标准 HTML5 canvas 属性绘制新元素。通过这种方法，您还可以针对特定的控制手柄，甚至可以使用图像图标。

fabric.Object.prototype._drawControl = controlHandles
fabric.Object.prototype.cornerSize = 20

function controlHandles (control, ctx, methodName, left, top) {
  if (!this.isControlVisible(control)) {
    return
  }

  var size = this.cornerSize
  
  // Note 1: These are standard HTML5 canvas properties, not fabric.js.
  // Note 2: Order matters, for instance putting stroke() before strokeStyle may result in undesired effects.
  ctx.beginPath()
  ctx.arc(left + size / 2, top + size / 2, size / 2, 0, 2 * Math.PI, false);
  ctx.fillStyle = "pink"
  ctx.fill()
  ctx.lineWidth = 4 // This is the stroke thickness
  ctx.strokeStyle = "red"
  ctx.stroke()
}

SO 代码片段：

const canvas = new fabric.Canvas("myCanvas")
canvas.backgroundColor="#222222"

this.box = new fabric.Rect ({
  width: 240,
  height: 100,
  fill: '#fff28a',
  myType: "box"
})

canvas.add(this.box)
this.box.center()


// Selection box border properties
// ----------------------------------------
fabric.Object.prototype.set({
  borderColor: "white",
  borderScaleFactor: 6
})


// Control handle properties
// ----------------------------------------
fabric.Object.prototype._drawControl = controlHandles
fabric.Object.prototype.cornerSize = 20

function controlHandles (control, ctx, methodName, left, top) {
  if (!this.isControlVisible(control)) {
    return
  }
  var size = this.cornerSize
  
  // Note 1: These are standard HTML5 canvas properties, not fabric.js.
  // Note 2: Order matters, for instance putting stroke() before strokeStyle may result in undesired effects.
  ctx.beginPath()
  ctx.arc(left + size/2, top + size/2, size/2, 0, 2 * Math.PI, false);
  ctx.fillStyle = "pink"
  ctx.fill()
  ctx.lineWidth = 4
  ctx.strokeStyle = "red"
  ctx.stroke()
}

<script src="https://pagecdn.io/lib/fabric/3.6.3/fabric.min.js"></script>
<canvas id="myCanvas" width="700" height="400"></canvas>

fabric.js: 如何设置选择框和控件的笔划粗细？

fabric.js: How to set stroke thickness of selection box and controls?

fabricjs