如何在 fabric.js 中设置样式答案

【问题标题】：How to set style in fabric.js如何在 fabric.js 中设置样式
【发布时间】：2017-02-07 00:15:15
【问题描述】：

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

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

【问题讨论】：

标签： javascript html canvas web fabricjs

【解决方案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();
});

查看fiddle

更新：

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

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

更新fiddle

【讨论】：

感谢您的回复！我试过这个方法，但不太像。必须只选择一帧。
所以我打算解决这个问题。但是这个解决方案并不是最优的。对于此解决方案，需要将范围与需要额外计算的对象相关联。你不知道这些控件在库中的什么位置？我认为他们可以在某个地方进行更改并且问题已经解决。