Ability to override frame selection area in fabricjs option - controls

Question

Here we work in fabric.js with the creation of a design tool. We have created a custom selection area for the canvas object in the fabric.js file. I am reading the source code in the fabric.js file, it generates a square border for the bounding box, but I want to change my custom. View of the selection area. Can someone please advise me?

We need the look of the selection area.

We tried this code for the selection area. context.setLineDash()

if (fabric.StaticCanvas.supports('setLineDash') === true) {
    ctx.setLineDash([4, 4]);
}

Refer to the code from Github . But it will not work perfectly for my work area.

Here we have attached the creation of the property in the function of the fabric Borderdasharray

fabric.Object.prototype.set({  
        borderColor: 'green',  
        cornerColor: 'purple',  
        cornerSize: 33,
        transparentCorners: false,padding:4,
        borderDashArray:[50,25]          
    });

/ fabric.js.

fabric.js?

Answer 1

"borderDashArray"

: https://developer.mozilla.org/fr/docs/Web/API/CanvasRenderingContext2D/lineDashOffset

: https://jsfiddle.net/bp4u8tsr/

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var offset = 0;

function draw() {
  ctx.clearRect(0,0, canvas.width, canvas.height);
  ctx.setLineDash([4, 2]);
  ctx.lineDashOffset = -offset;
  ctx.strokeRect(10,10, 100, 100);
}

function march() {
  offset++;
  if (offset > 16) {
    offset = 0;
  }
  draw();
  setTimeout(march, 20);
}

march();

fabricjs: object_interactivity.mixin.js drawBorders,

:

fabric.Object.prototype.set({  
        borderColor: 'green',  
        cornerColor: 'purple',  
        cornerSize: 33,
        transparentCorners: false,padding:14,
        borderDashArray:[50,25]          
    });
// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c',{width: 500, height: 500});
textbox = new fabric.Textbox('Hello, World!', {
  width: 200,
  height: 200,
  top: 80,
  left: 80,
  fontSize: 50,
  textAlign: 'center',
});
canvas.add(textbox);
textbox2 = new fabric.Textbox('Hello, World!', {
  width: 200,
  height: 200,
  top: 160,
  left: 160,
  fontSize: 50,
  textAlign: 'center',
});
canvas.add(textbox2);
canvas.renderAll();
canvas.setActiveObject(textbox);
var offset = 0;

  (function animate() {
    offset++;
    if (offset > 75) {
      offset = 0;
    }  
    canvas.contextContainer.lineDashOffset = -offset;
    canvas.renderAll();
    fabric.util.requestAnimFrame(animate);
  })();

  canvas.on('after:render', function() {
    canvas.contextContainer.strokeStyle = 'green';
        canvas.contextContainer.setLineDash([50,25]);
    canvas.forEachObject(function(obj) {
      var bound = obj.getBoundingRect();            
      canvas.contextContainer.strokeRect(
        bound.left + 0.5,
        bound.top + 0.5,
        bound.width,
        bound.height
      );
    })
  });

: https://jsfiddle.net/Da7SP/398/

Answer 2

:

  borderDashArray: Dash stroke of borders
  cornerDashArray: Dash stroke of corners
  cornerStrokeColor: If corners are filled, this property controls the color of the stroke
  cornerStyle: standrd 'rect' or 'circle'
  selectionBackgroundColor: add an opaque or transparent layer to the selected object.

:

fabric.Object.prototype.set({
    transparentCorners: false,
    borderDashArray: ......