Proposal: The boundaries of the shape no longer include the border.

[zhe-he]

1. Visual Consistency: In design and layout, it may be necessary for the actual occupied space of a shape to remain consistent with its visual representation. Excluding the border from the boundary calculation can ensure more precise layout positioning of the shape, avoiding layout shifts caused by changes in border width.
   
2. Interaction Design: In interaction design, the border may serve only as a visual decoration and should not affect the actual interactive area of the shape. For example, the area responsive to mouse clicks or touches should be based on the main body of the shape, not its decorative border.
   

The consequences: After setting the border size, the effect of the old version selected on the left will all turn into the effect shown on the right.

[ShaMan123]

It is planned to remove originX/Y thus positioning the object by its center internally while keeping the methods that are able to position objects.
Those methods could be overridden to accommodate any needs and could as well include flags such as you suggest here.
I suggest you work only with originX/Y center from now on.
#9736

[asturur]

Fabric around 1.3 or 1.4 had borders across the bounding box, but then after many requests it was moved as it is today.
The issue with the 'border is not part of the shape' apart the debate itself is that for hollow shapes the border is the body.
If i give you an empty rect that is made only with a large stroke or a path that is rectangular and hollow inside, the 2 objects will behave differently, one will have the bounding box over the stroke, the other outside. But conceptually those objects are the same.

I think that whoever wants to have fabric behave in that way can probably find a path either in the render logic or in the geometry functions to exclude the stroke.
Like setting the stroke to 0 and painting something other new property during renderStroke

[zhe-he]

@asturur
Well, it's like this. I have a requirement similar to Figma, where I need to set the shape's outer border, inner border, and the default middle border. If the shape's boundaries are not defined to exclude the borders first, then the above requirements are difficult to achieve in a reasonable manner, and it would result in writing a lot of cumbersome code, which is quite painful. If no modifications are made, then how should this kind of requirement for different types of borders be updated on the existing basis?

In simple demo, I only wrote rect2 to implement the requirements, but there was a bug like the one mentioned in the comment about the border occupying position.
In Complete demo, I rewrote the logic of calculating boundaries in the graph to fix this bug.
#9727

[vaynevayne]

I did not understand, my scene is very simple, just draw a rectangle, how do I draw innerBorder?

[zhe-he]

I did not understand, my scene is very simple, just draw a rectangle, how do I draw innerBorder?

这是一个很大的工程，涉及到的地方包括但不限于：
1 缩放矩形，矩形的边框可以缩放或不缩放
2 边框可以设置圆角，如果是外边框或者内边框，它的圆角应该怎么计算
3 边框可以设置渐变，外边框起始点的定义影响到的缓存怎么处理
4 如果给边框填充图片，单独水平缩放，背景图片应该怎么变更
5 路径对象，他的边框应该怎么定义

你的需求简单的处理方式为：
把边框设置为0，然后你新增2个属性自定义边框，自定义描边类型。然后重写render

This is a large project, involving but not limited to:

1. Scaling rectangles, where the rectangle's border can be scaled or not.
2. Borders can have rounded corners; how should the rounding be calculated for outer or inner borders?
3. Borders can have gradients; how to handle the cache affected by the definition of the starting point of the outer border?
4. If an image is filled in the border, how should the background image change with separate horizontal scaling?
   Path objects; how should their borders be defined?

A simple way to handle your requirements is:
Set the border to 0, then add 2 new properties to customize the border and the custom stroke type. Then override the render method.

[asturur]

To draw an innerborder you have to draw your rectangle in isolation and use a global composition operation of 'source-in' between the fill and the stroke, that is something that fabricJS does not do by default. So you have to create your custom classes

[vaynevayne]

How to create a custom class? Can you provide a little demo?

[vaynevayne]

方便加微信吗? @zhe-he

[usamshen]

我建了一个微信群 我们可以将用fabric的使用中文的人拉在一起互相帮助 方便一点

…

On Mon, Sep 9, 2024 at 4:14 AM vaynevayne ***@***.***> wrote: 方便加微信吗? @zhe-he <https://github.com/zhe-he> — Reply to this email directly, view it on GitHub <#9805 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AARXUUTC5GL46QY6HGDK3S3ZVVKHVAVCNFSM6AAAAABGMNMCW6VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTANJYHAYDAOI> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.*** com>

[zhe-he]

@vaynevayne
提议中的2个例子，就是你要的自定义图形

The two examples proposed are the custom graphics you want.