如何在fabric.js中设置样式

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

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

来源

2017-02-06 VINET

VINET，

只需添加事件鼠标：悬停和鼠标：出

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

UPDATE：

如果要单独突出每边，你必须创建自己的矩形行程喜欢这里：

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

来源

2017-02-06 14:02:29 Observer

感谢您的回复！我试过这种方法，但它不太像。有必要仅选择一个框架。 – VINET

请参阅上面更新后的文章 – Observer

因此，我计划解决这个问题。但是这个解决方案不是最优的。对于此解决方案，需要将范围与需要额外计算的对象相关联。你不知道这些控件在图书馆里的位置？我认为有一些地方可以改变，问题已经解决。 – VINET

如何在fabric.js中设置样式

回答

相关问题