如何使用 Fabric.js 绘制可调节的直角

Question

我正在尝试使用矩形绘制直角。

我的问题不是使用两个矩形来绘制可调节的直角，我想使用此图像中的精确直角

我正在使用下面的代码使用 fabric.js 添加矩形

  addRect = () => {
     this.canvas.add(new fabric.Rect({
        left: this.canvas.width / 2,
        top: this.canvas.height / 2,
        fill: '#ffa726',
        width: 100,
        centeredRotation: true,
        height: 100,
        originX: 'center',
        originY: 'center',
       strokeWidth: 0
                             }));
            }

请帮我解决这个问题。

Answer 1

您不能使用Rect来获得直角，但可以使用Polyline 。 这是一个例子：

const points = [
  {x: 5, y: 15},
  {x: 95, y: 15},
  {x: 95, y: 85},
]
const options = {
  strokeWidth: 20,
  stroke: 'orange',
  fill: null,
  strokeLineJoin: 'miter',
  strokeLineCap: 'butt'
}
const rightAngle = new fabric.Polyline(points, options)
canvas.add(rightAngle)

如果您想以交互方式调整点，您可以调整 Fabric.js 网站上自定义控件示例中的代码（多边形和折线类似）。