可以参考 SVG 的 <rect> 元素。

如下 示例 定义了一个圆角矩形，左上角顶点位置为 (200, 100)：

const rect = new Rect({
    style: {
        x: 200,
        y: 100,
        width: 300,
        height: 200,
        fill: '#1890FF',
        stroke: '#F04864',
        lineWidth: 4,
        radius: 8,
    },
});

继承自

继承了 DisplayObject 的 样式属性。

anchor

默认值为 [0, 0]。详见 DisplayObject anchor

transformOrigin

默认值为 left top。详见 DisplayObject transformOrigin

额外属性

x

局部坐标系下，矩形左上角顶点的 x 轴坐标。

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/x

y

局部坐标系下，矩形左上角顶点的 y 轴坐标。

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/y

width

矩形宽度。支持取负数，效果为沿 Y 轴反转，示例：

这与 Canvas2D API 保持一致，详见。在 SVG 规范中指出 <rect> 宽高属性取负数时不予展示，例如在 Chrome 中这么做会报如下错误 Error: <rect> attribute height: A negative value is not valid. ("-100")：

The width and height properties define the overall width and height of the rectangle. A negative value for either property is illegal and must be ignored as a parsing error. A computed value of zero for either dimension disables rendering of the element.

我们在 g-svg 中使用 <path> 代替 <rect> 绘制规避了这个问题。

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/width

height

矩形高度。支持取负数，效果为沿 X 轴反转，示例：

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/height

radius

圆角半径，不同于 SVG <rect> 仅支持 cx/cy 统一设置，这里可以分别指定四个角的圆角半径，示例：

rect.style.radius = [0, 4, 8, 16];
rect.style.radius = '0 4px 8px 16px';

支持以下取值，设置顺序依次为 左上，右上，右下，左下：

• number 统一设置四个圆角半径
• number[] 分别设置四个圆角半径，会补足缺省的分量：
  • [ 1 ] 相当于 [ 1, 1, 1, 1 ]
  • [ 1, 2 ] 相当于 [ 1, 2, 1, 2 ]
  • [ 1, 2, 3 ] 相当于 [ 1, 2, 3, 2 ]
  • [ 1, 2, 3, 4 ]
• string 与 CSS padding 属性类似，使用空格分隔

在实际绘制时，会限制圆角半径的最大值为矩形宽高最大值的一半：

const [tlr, trr, brr, blr] = radius.map((r) =>
    clamp(
        r.value,
        0,
        Math.min(Math.abs(width.value) / 2, Math.abs(height.value) / 2),
    ),
);