Path bounds accounting for stroke

[jasonsturges]

Line bounding boxes appear to compensate for stroke, which makes sense but result in some obstacles.

For example, if I create a 100-pixel long line with a 10-pixel stroke:

const points = [{ x: 0, y: 0 }, { x: 100, y: 0 }];
const line = new fabric.Polyline(points, {
  strokeWidth: 10,
  originY: 'center',
  originX: 'center',
})

That results in 5-pixels padding around the end caps of the line:

When origin is set to center, this works fine for positioning / snapping things together as the x/y coordinates report the start of the line. Here in this case, x would be 100 whereas the start of the bounds would be 95.

But when origin is not center, the coordinate is offset:

Stroke offsets are a classical issue, but I think what's hard for me to wrap my head around is that usually I deal with the individual vertex data and not the bounds. With bounds, I start to think of it as a fill... which would be an option.

For myself, I'm trying to construct a complex snapping of assemblies - lines and curves at various rotations.

To snap them together, I'm using an object moving handler

toGridHandler(options) {
  options.target
    .set({
      left: Math.round(options.target.left / gridSize) * gridSize,
      top: Math.round(options.target.top / gridSize) * gridSize
    })
    .setCoords();
}

I've also tried translating snapping to your Custom Controls Polygon editing example, which is awesome after adjusting for local to world coordinates, but still leaves me unable to handle curved paths

Though I'm not recommending any changes, just wondering your thoughts on that - how to snap together many segments of paths and lines.

[asturur]

So as you said the line is using this:

fabric.Line.prototype._getNonTransformedDimensions = function() {
      var dim = this.callSuper('_getNonTransformedDimensions');
      if (this.strokeLineCap === 'butt') {
        if (this.width === 0) {
          dim.y -= this.strokeWidth;
        }
        if (this.height === 0) {
          dim.x -= this.strokeWidth;
        }
      }
      return dim;
    };

And this seems to work well for polyline too, and eventually for everything having a width/height of 0.

You should try to add this to your project:

fabric.Polyline.prototype._getNonTransformedDimensions = function() {
      var dim = this.callSuper('_getNonTransformedDimensions');
      if (this.strokeLineCap === 'butt') {
        if (this.width === 0) {
          dim.y -= this.strokeWidth;
        }
        if (this.height === 0) {
          dim.x -= this.strokeWidth;
        }
      }
      return dim;
    };

And check if the situation is better and if other strange things happen, we may consider using it too if things looks better in general.

Just a question, the yellow dots, what are those?
If those are controls, why aren't them on the bounding box? is something you did with the control api or just a side effect of a flat ployline?

[jasonsturges]

@asturur The yellow dots are generally mirroring the Custom Controls Polygon example.

On select, they enter edit mode where the dots are the control points, like in the polygon example.

That code snippet is awesome, but I think this polyline approach is going to end up too complicated for what I'm trying to do. If I want to move and snap those control points to a grid, I'm going to constantly be fighting the bounding box.

Really appreciate this, but I think I'm going to focus on using paths (discussed here: #6722)