如何在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中設置樣式

回答

相關問題