bug(Path): stroke projection on bbox

[ShaMan123]

I see I didn't impl #7478 on path which is strange.
I'll wait until we migrate and decide the fate of all the shapes that should subclass Path.
We should discuss how to impl this on Path at that point.
And remove the flag exactBoundingBox

[ShaMan123]

Could it be that path accounts for stroke acute angles?

[ShaMan123]

Take a look at this image that corresponds to projectStrokeOnPoints:

With strokeUniform we need to project a different vector because the plane is transformed with inverse scaling

The confusing part is that it isn't visible to our eyes, only in the eyes of the object's plane

Originally posted by @ShaMan123 in #7847 (comment)

The blue opaic lines are probably how the object sees the vectors that create the bisector... which mean we ought to rotate the vectors in the angle diff (tried that without luck)... BUT it makes no sense to me and is pretty impossible to debug

Originally posted by @ShaMan123 in #7847 (comment)

[luizzappa]

@ShaMan123 If you plot the points it's easier to understand.

Plotting a triangle with the points:
A (0, 0)
B (50, -200)
C (100, 0)

The angle of the bisector is alpha.

But when I apply a scaling of 2 only on the X axis, the angle of the bisector changes (beta < alpha), hence the miter vector too. To calculate this new angle we must apply the scaling on the points to find the new vectors that form A, B and C.

scaleX = 2 ; scaleY = 1

scaled A (0 * scaleX , 0 * scaleY) --> (0, 0)
scaled B (50 * scaleX, -200 * scaleY) --> (100,-200)
scaled C (100 * scaleX, 0 * scaleY) --> (200,0)

With these vectors we were able to correctly calculate the miter vector.

I changed the projectStrokeOnPoints function to include this logic:

//[misc.js]
projectStrokeOnPoints: function (points, options, openPath) {

      var coords = [], s = options.strokeWidth / 2,
          strokeUniformScalar = options.strokeUniform ? new fabric.Point(1 / options.scaleX, 1 / options.scaleY) : new fabric.Point(1, 1),
          getStrokeHatVector = function (v) {
            var scalar = s / (Math.hypot(v.x, v.y));
            return new fabric.Point(v.x * scalar * strokeUniformScalar.x, v.y * scalar * strokeUniformScalar.y);
          };

      if (points.length <= 1) {return coords;}

      points.forEach(function (p, index) {
        var A = new fabric.Point(p.x, p.y), B, C;
        if (index === 0) {
          C = points[index + 1];
          B = openPath ? getStrokeHatVector(fabric.util.createVector(C, A)).addEquals(A) : points[points.length - 1];
        }
        else if (index === points.length - 1) {
          B = points[index - 1];
          C = openPath ? getStrokeHatVector(fabric.util.createVector(B, A)).addEquals(A) : points[0];
        }
        else {
          B = points[index - 1];
          C = points[index + 1];
        }

        var bisector
        if (options.strokeUniform) {
          let scaledA = new fabric.Point(A.x * options.scaleX, A.y * options.scaleY),
              scaledB = new fabric.Point(B.x * options.scaleX, B.y * options.scaleY),
              scaledC = new fabric.Point(C.x * options.scaleX, C.y * options.scaleY)
          bisector = fabric.util.getBisector(scaledA, scaledB, scaledC)
        } else {
          bisector = fabric.util.getBisector(A, B, C)
        }
        
        var bisectorVector = bisector.vector,
            alpha = bisector.angle,
            scalar,
            miterVector;

        if (options.strokeLineJoin === 'miter') {
           scalar = -s / Math.sin(alpha / 2);
          miterVector = new fabric.Point(
            bisectorVector.x * scalar * strokeUniformScalar.x,
            bisectorVector.y * scalar * strokeUniformScalar.y
          );
          if (Math.hypot(miterVector.x, miterVector.y) / s <= options.strokeMiterLimit) {
            coords.push(A.add(miterVector));
            coords.push(A.subtract(miterVector));
            return;
          }
        }
        scalar = -s * Math.SQRT2; // alpha = 45 deg?
        miterVector = new fabric.Point(
          bisectorVector.x * scalar * strokeUniformScalar.x,
          bisectorVector.y * scalar * strokeUniformScalar.y
        );
        coords.push(A.add(miterVector));
        coords.push(A.subtract(miterVector));
      });
      return coords;
    }

It was also necessary to change the _setPositionDimensions function to subtract the correct stroke size from the width

////[polyline.class.js]
_setPositionDimensions: function(options) {
      options || (options = {});
      var calcDim = this._calcDimensions(options), correctLeftTop,
          correctSizeX = this.exactBoundingBox
                        ? this.strokeUniform
                          ? this.strokeWidth/this.scaleX
                          : this.strokeWidth
                        : 0,
          correctSizeY = this.exactBoundingBox
                        ? this.strokeUniform
                          ? this.strokeWidth/this.scaleY
                          : this.strokeWidth
                        : 0;
      this.width = calcDim.width - correctSizeX
      this.height = calcDim.height - correctSizeY
      if (!options.fromSVG) {
        correctLeftTop = this.translateToGivenOrigin(
          {
            // this looks bad, but is one way to keep it optional for now.
            x: calcDim.left - this.strokeWidth  + correctSizeX / 2,
            y: calcDim.top - this.strokeWidth + correctSizeY / 2
          },
          'left',
          'top',
          this.originX,
          this.originY
        );
      }
      if (typeof options.left === 'undefined') {
        this.left = options.fromSVG ? calcDim.left : correctLeftTop.x;
      }
      if (typeof options.top === 'undefined') {
        this.top = options.fromSVG ? calcDim.top : correctLeftTop.y;
      }
      this.pathOffset = {
        x: calcDim.left + this.width / 2 + correctSizeX / 2,
        y: calcDim.top + this.height / 2 + correctSizeY / 2
      };
    }

I compiled a version with these changes, and it seems to be working:

https://codesandbox.io/s/fabricjs-project-uniform-stroke-vuilj2?file=/src/index.js

The only problem that still needs to be adjusted is when it goes over the stroke miter limit. See this example: https://codesandbox.io/s/fabricjs-project-uniform-stroke-mitter-yzvoe4?file=/src/index.js

I don't quite understand the calculation here:

        scalar = -s * Math.SQRT2; // alpha = 45 deg?
        miterVector = new fabric.Point(
          bisectorVector.x * scalar * strokeUniformScalar.x,
          bisectorVector.y * scalar * strokeUniformScalar.y
        );

Why is the scalar calculated this way?

[ShaMan123]

@luizzappa GREAT JOB! Could you open a PR? I can back you with any help you need.
I tried scaling the points but missed out the change to _setPositionDimensions. Excellent.
Regarding stroke limit I wonder if scaling should be applied to the limit calculation....

---

Regarding this:
I don't quite understand the calculation here:

       scalar = -s * Math.SQRT2; // alpha = 45 deg?
       miterVector = new fabric.Point(
         bisectorVector.x * scalar * strokeUniformScalar.x,
         bisectorVector.y * scalar * strokeUniformScalar.y
       );

Why is the scalar calculated this way?

You are right. This part is wrong. It is junk to approximate bevel and round since I have no clue of the definition of these 2. After experimenting I thought round is a curve with a control point that is the intersection of vertexes creating it but I am not convinced. Which is why I stopped working on it.
Now, looking at the images it seems round is a simple arc placed somehow. But I am not sure if there's an option that makes it asymmetric.
bevel seems the same as round accept it doesn't draw the arc

round

bevel

[luizzappa]

@ShaMan123 let me try the round and bevel cases, then I open the PR

Regarding stroke limit I wonder if scaling should be applied to the limit calculation....

That's right, it needs to be scaled too. I think that solves it:

var miterLimitLenght = options.strokeMiterLimit * s,
    miterLimitVector = new fabric.Point(
          bisectorVector.x * miterLimitLenght * strokeUniformScalar.x,
          bisectorVector.y * miterLimitLenght * strokeUniformScalar.y
    ),
    strokeMiterLimit = Math.hypot(miterLimitVector.x, miterLimitVector.y) / s;

Regardind round and bevel :

Take a look here (you can change the vectors direction by holding the red circles): https://hypertolosana.github.io/efficient-webgl-stroking/index.html

Based on that, does my logic make sense?

In the case of bevel, returning the points in orange would be enough for the calculation of the bbox:

In the case of the round, if not asymmetric, it is the endpoint of the vector in orange

[ShaMan123]

Looks fantastic.
I would like this link https://hypertolosana.github.io/efficient-webgl-stroking/index.html to be part of the documentation of the fix

[ShaMan123]

I think I tried to calculate bevel like that. Or at least intended to. Projecting perpendicular vectors to the stroke vertexes seems correct (light green ones). And it seems the orange vector has the same size as them.
Is there a case in which the orange vector is different in size?

[luizzappa]

@ShaMan123 I implemented the logic for these cases. In the case of the round join it is not exactly the orange vector. I opened a pull request #8083 , there I explain better.