如何在fabric.js中设置样式

Question

帮助将样式设置为图片中的样式。 几天以来，我尝试了这些选项，但不了解如何解决该问题。

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

Answer 1

VINET，

只需添加事件mouse：over和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();
});

检查小提琴

更新：

如果要分别突出显示每一侧，则必须为矩形创建自己的笔触，如下所示：

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

之后，将这些笔划绘制为线条：

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

更新的小提琴