TMUI4x(鸿蒙Next)

Appearance

TMUI4x2025-09-25
655
2.5m

ICanvas - 图形系统 ​

IQrcode ​

二维码图形类，用于在画布上绘制可配置的二维码，可支持带圆角背景矩形、描边与前景色控制。

属性 ​

继承自 Shape 的所有属性，并包含以下特定属性：

属性名类型默认值说明
typestring"IQrcode"图形类型标识
radiusnumber0背景矩形圆角半径（非二维码点阵圆角）
foregroundstring"#000000"二维码前景块颜色
qrcodeTextstring""二维码内容文本
fillstring""背景填充色（可用于留白/底色）
strokestring""背景描边色
strokeWidthnumber1背景描边宽度

说明：二维码点阵绘制会铺满设置的 width×height 区域；fill/stroke 作用于背景路径（支持圆角）。

方法 ​

构造函数 ​

typescript
constructor(config: IShapeOptional, canvas: ICanvas)
  • config: 配置对象，支持 qrcodeText、foreground、radius 等
  • canvas: 画布实例

设置方法 ​

setRadius(value: number): IQrcode ​

设置背景矩形圆角半径。

setQrcodeLabel(text: string): void ​

设置二维码内容文本，设置后会标记为需更新并在下次绘制时生效。

继承方法 ​

继承自 Shape 的常用方法，包括但不限于：

  • draw(ctx: CanvasRenderingContext2D)
  • isPointInPath(x: number, y: number, shapeId: string): boolean
  • getBoundRect(): IShapeBoundRect
  • setWidth(value: number), setHeight(value: number) 等（已重写，均以左上角为定位）

使用示例 ​

typescript
// 创建一个二维码
const qr = new IQrcode({
    x: 100,
    y: 100,
    width: 200,
    height: 200,
    radius: 16,               // 背景圆角
    fill: "#ffffff",          // 背景色（用于留白）
    stroke: "#e5e6eb",
    strokeWidth: 1,
    foreground: "#111111",    // 前景点阵颜色
    qrcodeText: "https://tmui.design"
}, canvas);

canvas.addShape(qr);

// 动态更新二维码内容
qr.setQrcodeLabel("TMUI4X · Canvas QR");

行为说明 ​

  • 二维码纠错级别当前为固定高等级（"H"），有利于在中心覆盖图标或有轻微遮挡时保持可扫性。
  • 点阵单元大小按 width / 实际点阵宽度 自动计算，当前未内置"静区"边距；如需留白，建议：
    • 使用 fill 设为背景白色，并在外层通过布局留边，或
    • 适当增大 width/height 并在容器中留出间距。
  • foreground 控制点阵颜色；背景与描边由 fill/stroke 控制。

注意事项 ​

  1. 请确保 qrcodeText 非空，否则绘制的二维码无意义。
  2. radius 仅影响背景矩形的圆角，不影响二维码点阵本身形状。
  3. 当 stroke 非空时，边界矩形计算会包含 strokeWidth/2 的扩展。
  4. 对于超小尺寸二维码，可能因采样与显示器物理像素导致观感粗糙，建议 width ≥ 160。
  5. 如需在二维码中心叠加 Logo，建议使用更高容错级别（当前已为 "H"），并预留足够的背景留白。
最近更新