CODEWITHSUNDEEP
fabricjs
Kalnode
Kalnode

Reputation: 11306

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

How to control stroke thickness on object selection box and handles

In fabric.js, how do you adjust stroke thickness for the object selection box and control handles?

There's a bunch of customization options available, however it isn't clear on how you can customized stroke thickness. Is it possible, perhaps through an indirect way?

Note: The properties selectionColor, selectionBorderColor, selectionLineWidth are misleading... they have to do with the temporary selection box that appears when attempting to do a fresh drag-select across the canvas. Once your selection is made, it disappears and then you see the persistent object selection box with control handles (the thing I'm trying to customize).

See links:

http://fabricjs.com/customization

http://fabricjs.com/controls-customization

Upvotes: 0

Views: 2185

Answers (1)

Kalnode
Kalnode

Reputation: 11306

Ok here's a 2-part solution:

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

For the selection box stroke thickness:

Use fabric.Object.prototype.set to customize any object selection globally. Also, borderScaleFactor is documented, but not included in the fabric.js customization demos:

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

For the control handle stroke thickness:

Here we override differently, and actually draw new elements using standard HTML5 canvas properties. Through this method you could also target specific control handles and even use image icons.

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 code snippet:

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>

Upvotes: 2

Related Questions