Middle Coordinates of Polygon Vertices in Fabric.js

Introduction

If you're a developer working with Fabric.js, you've likely encountered challenges when working with object coordinates and connecting lines between asymmetrical shapes. These issues are common topics on Stack Overflow and GitHub, where developers share tips and techniques for working with this powerful library.

In this blog series, we'll provide practical solutions to common Fabric.js issues, such as object coordinates and connecting lines between asymmetrical shapes. In our first post, we'll show you how to find the middle coordinates of a polygon's vertices in Fabric.js. Specifically, we'll address a scenario involving a parallelogram with circles at each vertex, positioned dynamically as the shape is transformed. We'll provide a step-by-step guide and offer tips for working with polygons in Fabric.js. Whether you're an experienced developer or just starting out, this post will help you overcome a common challenge.

‍

We will use fabric.Polygon instead of core classes like rect, circle, and triangle. Using polygons can be advantageous when dealing with asymmetrical shapes because they can be defined by an arbitrary number of points, allowing for greater flexibility in defining the shape.

For instance, a parallelogram cannot be accurately represented by a rectangle or a triangle. However, it can be represented by a polygon with four vertices. Additionally, connecting lines between asymmetrical shapes can be challenging because they may not align with the edges of core shapes.

Using polygons allows for more precise placement of connecting lines, as they can be defined to match the exact shape of the object.

In this blog series, I will provide practical solutions to common Fabric.js issues related to working with object coordinates and connecting lines between asymmetrical shapes using polygons.


const points = [
    { x: -50, y: 150 },
    { x: 100, y: 150 },
    { x: 50, y: 50 },
    { x: -100, y: 50 }
  ],
  polygon = new fabric.Polygon(points, {
    fill: "red",
    angle: 0
  });

var group = new fabric.Group([], {
  subTargetCheck: true
});
canvas.add(group);
canvas.centerObjectH(polygon);
group.addWithUpdate(polygon);

Ref: https://github.com/dinesh-rawat-dev/fabricjs-get-poly-vertices/blob/main/src/index.ts#L12

The above code uses the Fabric.js library to create a new polygon object and add it to a group on a canvas. Here's what each part of the code does: -

- The points array defines the vertices of the polygon using an x,y coordinate system. This particular polygon has four vertices and represents a parallelogram.

- The new fabric.Polygon(points, {...}) line creates a new fabric.Polygon objects with the specified vertices and additional properties such as the fill color and angle.

- The new fabric.Group([], {...}) line creates a new fabric.Group object with an empty array of sub-objects and additional properties such as the subTargetCheck flag, which enables mouse events to be detected on sub-objects of the group.

- canvas.add(group) adds the group to the canvas.

- canvas.centerObjectH(polygon) centers the polygon horizontally on the canvas.

- group.addWithUpdate(polygon) adds the polygon object to the group and updates the group's bounding box.

Overall, this code creates a red parallelogram polygon object and adds it to a group on a canvas, which allows for easier manipulation and interaction with the object.

The parallelogram below is defined by the points:

‍

The points are defined in the object's plane, not as coordinates relative to the canvas (keep in mind that in Fabric.js, the Y axis increases downward). To adjust for this, we must convert the coordinates to align with the canvas plane.

How the points appear when viewed with each plane.

Create a function

Let’s create a function getPolyVertices.The objective of the getPolyVertices function is to calculate and return the transformed vertices of a polygon object in the canvas plane. It achieves this by applying transformation matrices to each vertex, using the canvas viewportTransform and the polygon's transform matrix, while also adjusting the origin of the polygon's plane to its center.


function getPolyVertices(poly) {
  const points = poly.points,
    vertices = [];
  for (let i = 0; i < points.length; i++) {
    const point = pointsi,
      nextPoint = points(i + 1) % points.length,
      midPoint = {
        x: (point.x + nextPoint.x) / 2,
        y: (point.y + nextPoint.y) / 2
      };
    const x = midPoint.x - poly.pathOffset.x,
      y = midPoint.y - poly.pathOffset.y;
    vertices.push(
      fabric.util.transformPoint(
        { x: x, y: y },
        fabric.util.multiplyTransformMatrices(
          poly.canvas.viewportTransform,
          poly.calcTransformMatrix()
        )
      )
    );
  }
  return vertices;
}

Ref: https://github.com/dinesh-rawat-dev/fabricjs-get-poly-vertices/blob/main/src/index.ts#L61

The getPolyVertices function takes a polygon object (poly) as an argument and returns an array of vertices of that polygon in the canvas plane.

It first retrieves the points of the polygon and initializes an empty array called vertices to store the transformed vertices.

Next, the function iterates through each point in the "points" array, calculates the midpoint between the current point and the next point, and stores it in "midPoint". Then, it subtracts the polygon's "pathOffset" coordinates from "midPoint" to adjust for any offsets in the polygon's path.

Then, for each point in the polygon, it subtracts the pathOffset values of the polygon from the point's x and y coordinates. pathOffset is the difference between the center of the polygon and the origin of the polygon's plane.


const x = point.x - poly.pathOffset.x,
      y = point.y - poly.pathOffset.y;

Ref: https://github.com/dinesh-rawat-dev/fabricjs-get-poly-vertices/blob/main/src/index.ts#L71

Next, the function uses the transformPoint method of the fabric.util object to transform the x and y coordinates of the point to the canvas plane. This transformation is performed using the viewport transform of the canvas and the transformation matrix of the polygon object.

Finally, the transformed x and y coordinates are pushed to the vertices array. The function then returns this array of transformed vertices.

After completing the difficult part, we simply utilize the vertex positions obtained from the getPolyVertices function in the canvas plane to display the circles.


const polyVertices = getPolyVertices(polygon);

const circles = [];

polyVertices.forEach((Vertex) => {
  const circle = new fabric.Circle({
    radius: 5,
    originX: "center",
    originY: "center",
    fill: "red",
    left: Vertex.x,
    top: Vertex.y
  });
  circles.push(circle);
  canvas.add(circle);
});

Ref: https://github.com/dinesh-rawat-dev/fabricjs-get-poly-vertices/blob/main/src/index.ts#L90

The code creates an array of circles that will be placed at each vertex of the polygon. The position of each circle is determined by the X and Y coordinates of the corresponding vertex obtained from the polyVertices array returned by the getPolyVertices function. Each circle is instantiated with the new fabric.Circle() constructor and its properties are defined, such as radius, fill, left, top, and originX, originY for the circle's center. Finally, each circle is added to the canvas using canvas.add(circle).

Ultimately, we develop a function that modifies the placement of the circles each time the parallelogram undergoes movement, resizing, skewing, or rotation.


function updateCirclesPosition() {
  const newVertices = getPolyVertices(polygon);
  newVertices.forEach((vertice, idx) => {
    const circ = circlesidx;
    circ.left = vertice.x;
    circ.top = vertice.y;
  });
}

group.on("scaling", updateCirclesPosition);
group.on("skewing", updateCirclesPosition);
group.on("rotating", updateCirclesPosition);
group.on("moving", updateCirclesPosition);

Ref: https://github.com/dinesh-rawat-dev/fabricjs-get-poly-vertices/blob/main/src/index.ts#L103

We now have a parallelogram that has circles located at its vertices, which update their position in real time.

‍

This article answers:

https://stackoverflow.com/questions/53796053/how-to-connect-fabric-js-objects-programmatically-with-a-connector

https://github.com/fabricjs/fabric.js/discussions/8732

https://github.com/fabricjs/fabric.js/discussions/8718

https://github.com/fabricjs/fabric.js/issues/2779

https://stackoverflow.com/questions/75541658/how-to-create-a-connecting-line-between-two-asymmetrical-shapes-in-fabric-js

https://stackoverflow.com/questions/74441682/in-fabricjs-how-to-give-multiple-function-in-fabric-controlsutils-actionhandler

https://stackoverflow.com/questions/75541563/obtaining-object-coordinates-in-fabric-js-actual-coordinates-vs-bounding-rectan

https://stackoverflow.com/questions/58063289/fabricjs-function-to-join-2-objects-with-line

https://stackoverflow.com/questions/17347216/how-to-use-fabric-js-to-do-visio-like-drawings-with-connections

https://stackoverflow.com/questions/56800134/unable-to-connect-endpoints-by-line-in-fabric-js

https://stackoverflow.com/questions/20418153/connecting-two-canvas-objects-in-fabric-js

Frequently Asked Questions (FAQs)

1. How can I find the middle coordinates of the vertices of a polygon in Fabric.js?

To find the middle coordinates of a polygon's vertices in Fabric.js, you can iterate through the array of points that define the polygon using the get("points") method. Sum up the X and Y coordinates of all the points, and then divide by the number of vertices to calculate the average or middle point.

2. What is the significance of finding the middle coordinates of a polygon's vertices?

Finding the middle coordinates allows you to determine the centroid or center point of the polygon. This can be useful for various purposes, such as positioning labels or annotations at the center of a shape, calculating the center of mass, or aligning objects based on the polygon's center.

3. Can I update the middle coordinates if I modify the polygon's shape in Fabric.js?

Yes, you can recalculate the middle coordinates whenever you modify the polygon's shape. You should listen for events like object:modified or object:scaling to trigger the recalculation and update the middle coordinates accordingly.

4. Are there any built-in functions in Fabric.js for finding the middle coordinates of a polygon?

Fabric.js does not have a built-in function specifically for finding the middle coordinates of a polygon. You'll need to implement this calculation using JavaScript by iterating through the polygon's points.

5. Can I use the middle coordinates to perform transformations or animations on the polygon?

Absolutely! Once you have the middle coordinates, you can use them as reference points for transformations, animations, or any other operations you want to apply to the polygon in Fabric.js. It's a convenient way to work with the center point of the shape.

‍