Rounded control-knobs in fabric.js

Question

Consider this example:

 var canvas = new fabric.Canvas('c');
  canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));

  canvas.item(0).set({
    borderColor: 'red',
    cornerColor: 'green',
    cornerSize: 10,
    cornerRadius: 10,
    transparentCorners: false
  });
  canvas.setActiveObject(canvas.item(0));
  this.__canvases.push(canvas);

The fiddle is on http://jsfiddle.net/SsCh6/

Is it possible to make the control knobs circular? Setting the cornerRadius doesn't work. And by the way, why is the color of the controls changing when moving the object? How can that be adjusted?

Answer 1

the controls have an opacity when moving which by default is set to 0.4. To prevent that you can do this:

canvas.item(0).set({
 borderOpacityWhenMoving: 1
});

As far as I know the control knobs cannot be changed. You'd have to change the function that actually draws the controls. This is done in the function drawControls which either uses strokeRect or fillRect depending on the settings to draw the controls. You should be able to change the function to draw a circle.

hope this helps.

Answer 2

For circular knobs control use cornerStyle :String in the element to be added to canvas, specify style of control, 'rect' or 'circle'

let text = new fabric.Text('Hello world')
text.cornerStyle = 'circle'
canvas.add(text)

Documentation here

Answer 3

If you're looking to change this globally, you can modify the fabric object like so:

fabric.Object.prototype.set({
    borderColor: 'red',
    cornerColor: 'pink',
    cornerStyle: 'circle',
    padding: 10,
    transparentCorners: false,
});