如何在 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();
});

勾选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

如何在 fabric.js 中设置样式

How to set style in fabric.js

html

javascript

canvas

fabricjs

web