Question

我想创建一个类似于Bounding Box的矩形元素框。这个盒子将在未来的开发中用作对齐元素（现在不是很重要......）目标是任何时候元素旋转，对齐框（AB）必须重绘自己......基本上。它需要保持静止，我的意思是不应用旋转（就像我之前提到的，与边界框完全相同的行为）。

我的问题是：

我点击元素AB的任何时候都会消失。
当我旋转元素时，AB与元素一起旋转。

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

var canvas = this.__canvas = new fabric.Canvas('canvas');

fabric.util.object.extend(fabric.Object.prototype, {
	redrawAlignmentLines: function(){
  	this.canvas.renderAll();
    const ctx = this.canvas.getContext("2d");
		const rad = fabric.util.degreesToRadians(this.angle);
    const bb = this.getBoundingRect();

		ctx.rect(bb.left, bb.top, bb.width, bb.height);
    ctx.stroke();
    console.log('angleangleangle', this.angle, rad);
  }
});

var red = new fabric.Rect({
	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){
	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/

document.getElementByClassName("?").className = "Testimonialboxfull";

如何重绘ctx.rect？

1 个答案: