Here, we are working in fabric.js with creating design tool.We have create custom selection area for canvas object in fabric.js. I read source code in fabric.js, it generates square box for bounding box, but I want change to my custom. Selection area appearance. Can someone please advise me?

We want custom selection area appearance.

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

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

Refer code from Github.But won`t working fine for my working area.

Here we have attached Borderdasharray Property creation in fabric function

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

But we need to create animated dancing dots/moving dots for that selection area in fabric.js.

How can we create custom selection area in fabric.js?

Here, we are working in fabric.js with creating design tool.We have create custom selection area for canvas object in fabric.js. I read source code in fabric.js, it generates square box for bounding box, but I want change to my custom. Selection area appearance. Can someone please advise me?

We want custom selection area appearance.

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

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

Refer code from Github.But won`t working fine for my working area.

Here we have attached Borderdasharray Property creation in fabric function

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

But we need to create animated dancing dots/moving dots for that selection area in fabric.js.

How can we create custom selection area in fabric.js?

• javascript
• canvas
• html5-canvas
• custom-controls
• fabricjs

• 1 Assuming you just want a dashed selection box, you can just set the borderDashArray property of the object (ex. obj.borderDashArray = [4,4]). – Ben Commented Dec 23, 2016 at 5:55
• Yes @Ben.. I have created dashed selection box, but i need to create dancing dots-dashing/Moving dots-dashing selection box. How it is possible ? – VIVEK-MDU Commented Dec 23, 2016 at 6:40
• 1 See fabricjs./clipping. You could create an animation to act on the borderDashArray and get some sort of effect like that. – Ben Commented Dec 23, 2016 at 18:39

2 Answers 2

For an animated "borderDashArray", the MDN Documentation on lineDashOffset provides a Marching Ants example with the following (fiddle demo) :

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();

Based on fabricjs object_interactivity.mixin.js drawBorders function, the above can be applied as follows :

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
      );
    })
  });

fabricjs border animation fiddle demo.

For customization :

  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.

For use this :

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