Как установить стиль в 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,

Просто добавьте события мыши: над и мышь: из

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