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