ctx.rectを再描画する方法は？

Question

私は、境界ボックスに似た矩形要素の周囲にボックスを作成したいと思います。このボックスは、将来の開発におけるアラインメント要素として使用されます（今は本当に重要ではありません...） いつでも要素が回転し、アラインメントボックス（AB）はそれ自身を再描画する必要があります。それはまだ留まる必要があります、私は回転を適用せずに（私が前に述べたように、バウンディングボックスとまったく同じ振る舞いをします）。

私の問題は次のとおりである：私はABが消え要素をクリック

1. いつでも。
2. 要素を回転すると、ABは要素とともに回転します。

https://jsfiddle.net/redlive/7npzqcf2/

var canvas = this.__canvas = new fabric.Canvas('canvas'); 
 

 
fabric.util.object.extend(fabric.Object.prototype, { 
 
\t redrawAlignmentLines: function(){ 
 
    \t this.canvas.renderAll(); 
 
    const ctx = this.canvas.getContext("2d"); 
 
\t \t const rad = fabric.util.degreesToRadians(this.angle); 
 
    const bb = this.getBoundingRect(); 
 

 
\t \t ctx.rect(bb.left, bb.top, bb.width, bb.height); 
 
    ctx.stroke(); 
 
    console.log('angleangleangle', this.angle, rad); 
 
    } 
 
}); 
 

 
var red = new fabric.Rect({ 
 
\t id: 1, 
 
    left: 200, 
 
    top: 200, 
 
    width: 100, 
 
    height: 100, 
 
    fill: 'red', 
 
    angle: 30, 
 
    originX: 'center', 
 
    originY: 'center' 
 
}); 
 
canvas.add(red); 
 
canvas.renderAll(); 
 

 
red.redrawAlignmentLines(); 
 

 
canvas.on("object:rotating", function(e){ 
 
\t e.target.redrawAlignmentLines(); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.0.0-rc.3/fabric.js"></script> 
 
<canvas id="canvas" width="800" height="500" style="border:1px solid #ccc"></canvas>

Answer 1

私は私が必要とする目標を達成するために管理してきました。 基本的には、fabricJS demoの例を使用し、ロジックを少し変更しました。

https://jsfiddle.net/redlive/7npzqcf2/8/

var canvas = this.__canvas = new fabric.Canvas('canvas'); 

fabric.util.object.extend(fabric.Object.prototype, { 
    redrawAlignmentLines: function(){ 
    const ctx = this.canvas.getContext("2d"); 
    const bb = this.getBoundingRect(); 

    this.setCoords(); 
    canvas.contextContainer.strokeStyle = 'magenta'; 
    ctx.save(); 

    if (this.alignmentLines.left) { 
     ctx.moveTo(bb.left, 0); 
     ctx.lineTo(bb.left, 600); 
     ctx.stroke(); 
    } 
    ctx.restore(); 
    } 
}); 

var red = new fabric.Rect({ 
    id: 1, 
    left: 200, 
    top: 200, 
    width: 100, 
    height: 100, 
    fill: 'red', 
    angle: 30, 
    originX: 'center', 
    originY: 'center', 
    alignmentLines: { 
    top: true, 
    left: true 
    } 
}); 
canvas.add(red); 
canvas.renderAll(); 

canvas.on('after:render', function() { 
    canvas.forEachObject(function(obj) { 
     obj.redrawAlignmentLines(); 
    }) 
});