how to draw adjustable Right Angle Using Fabric.js

user_5658942 0
Viewed 25

I am trying to Draw a Right Angle using Rectangles.

My Problem is instead of Using two Rectangles to Draw the Adjustable Right Angle,I want to use a Exact Right Angle as in this Image

RightAngle

I am using the Below code to add the Rectangle using 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
                             }));
            }

Kindly Help me to solve this issue.

fabricjs angle javascript
1 Answers

You can't use a Rect to get just a right angle, but you can use a Polyline. Here's an example:

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)

If you want to interactively adjust the points, you could adapt the code from the custom controls example on the Fabric.js site (Polygon and Polyline are similar).

user_4648270
Related