CODEWITHSUNDEEP
javascripthtmlcanvaswebfabricjs
VINET
VINET

Reputation: 661

How to set style in fabric.js

Help set the style as the style in the picture. For several days, I try the options, but do not understand how to solve the problem.

enter image description here

var rect = new fabric.Rect({
    left: 150,
    top: 200,
    originX: 'left',
    originY: 'top',
    width: 150,
    height: 120,
    angle: -10,
    fill: 'rgba(255,0,0,0.5)',
    transparentCorners: false
  });

Upvotes: 0

Views: 2411

Answers (1)

Observer
Observer

Reputation: 3706

VINET,

Just add events mouse:over and mouse:out

canvas.on('mouse:over', function(e){
    if (e.target.type == 'rect'){
    e.target.set({strokeWidth: 5, stroke: 'red'});
  }
  canvas.renderAll();
});

canvas.on('mouse:out', function(e){
    canvas.forEachObject(function(o){
    o.set({strokeWidth: 0});
  });
  canvas.renderAll();
});

Check fiddle

UPDATE:

If you want to highlight each side separately, you have to create your own stroke for rectangles like here:

function createPointsForLines(rectangle){
    let points = [];;
  var coordinates = rectangle.oCoords;
  points.push([coordinates.tl.x, 
        coordinates.tl.y, 
        coordinates.tr.x,
        coordinates.tr.y]);
  points.push([coordinates.tr.x, 
        coordinates.tr.y, 
      coordinates.br.x, 
      coordinates.br.y]);
  points.push([coordinates.br.x, 
        coordinates.br.y, 
      coordinates.bl.x, 
      coordinates.bl.y]);
  points.push([coordinates.bl.x, 
        coordinates.bl.y, 
      coordinates.tl.x, 
      coordinates.tl.y]);
  return points;
}

After that draw these strokes as a Lines:

for (var i in points){
    var line = new fabric.Line(points[i],{
    originX: 'center',
    originY: 'center',
    strokeWidth: 10,
    stroke: 'rgba(255,0,0,0)',
    transparentCorners: false
  });

canvas.add(line);
}

Updated fiddle

Upvotes: 1

Related Questions