maybe rect strokeUniform not work will

[vaynevayne]

STROKE_WIDTH Both are 1. In 4.5, use zoom to zoom out the picture, and the rectangular border will be clear.
In v6, the rectangular border is not clear,
setViewport is used in v6
In v4, only setZoom is used
It feels like strokeUniform is ineffective

fabric 4.5.0

const STROKE_WIDTH =1
const base_config = {
    width: isOuter ? w - STROKE_WIDTH : w,
    height: isOuter ? h - STROKE_WIDTH : h,
    left: x + (scaleObj.left || 0),
    top: y + (scaleObj.top || 0),
    stroke: '#04aa65',
    strokeWidth: STROKE_WIDTH,
    fill: 'transparent',
    class: CLASS_RECT,
    // 将元素的 strokeUniform 属性设置为 true 后，元素在缩放后，边框会恢复成最初设置的大小。
    strokeUniform: true,
    data,
    ...(data.config || {}),
    // strokeUniform: true,
  }

fabric 6.4.3

{
    "rx": 0,
    "ry": 0,
    "type": "Rect",
    "version": "6.5.0",
    "originX": "left",
    "originY": "top",
    "left": -1430.3856,
    "top": -305.0278,
    "width": 1429.3856,
    "height": 790.7743,
    "fill": "transparent",
    "stroke": "#04aa65",
    "strokeWidth": 1,
    "strokeDashArray": null,
    "strokeLineCap": "butt",
    "strokeDashOffset": 0,
    "strokeLineJoin": "miter",
    "strokeUniform": true,
    "strokeMiterLimit": 4,
    "scaleX": 1,
    "scaleY": 1,
    "angle": 0,
    "flipX": false,
    "flipY": false,
    "opacity": 1,
    "shadow": null,
    "visible": true,
    "backgroundColor": "",
    "fillRule": "nonzero",
    "paintFirst": "fill",
    "globalCompositeOperation": "source-over",
    "skewX": 0,
    "skewY": 0
}

[vaynevayne]

@zhe-he Hello, do you have any ideas based on the known information?
I don't have time to provide a recurring demo yet, when I can provide more information

[zhe-he]

When scaling the shape, strokeUniform takes effect. demo

2024-12-09.10.31.59.mov

[vaynevayne]

objectCaching={false} It takes effect, but the border still looks very thin. Is this expected behavior?
I want it to look the same as version 4.5, is there any solution?

4.5 version, i use api not react-fabric, I zoom the canvas and background image first, and Promise.then draw a rect,
In version 6.x, I drew rectangles and zoomed separately
Is that why? @zhe-he

[zhe-he]

objectCaching={false} It takes effect, but the border still looks very thin. Is this expected behavior?

Yes
No matter how you scale the canvas, the border size of the shape will not change. The value of strokeUniform is related to the scaling of the shape itself.

I implemented the same demo using version 4.5.0 and found that they exhibit the same behavior.
4.5.0 demo

[vaynevayne]

This is the 4.5 frame method, calculate the scale and then frame the frame. You mean that it has nothing to do with the order, zoom will not cause the border to fade? So what caused this problem? How should I solve it? What do you suggest? @zhe-he

[zhe-he]

The canvas scaling I’m discussing refers to ctx scaling, whereas the scaling you mentioned appears to be CSS scaling. If the border size change is caused by CSS scaling, you might need to proportionally increase the border size of the shape to compensate.
Maybe I misinterpreted it; after all, the code is just a snippet, so I can only make guesses.

[vaynevayne]

@asturur Hello, do you have time to help take a look?

[asturur]

i didn't have yet, i have to many emails and open issues

[vaynevayne]

#10323
I see an image that is blurry because the zoom factor is too small. Is this the reason why the border is blurry? @zhe-he