绘制自定义图形：Shape组件（Circle, Rect, Path）的高级用法（32）
在 ArkUI 框架中Shape是所有几何图形组件的父组件基类它不仅自身支持通用属性还可以作为容器包裹Circle圆形、Rect矩形、Path路径等子组件实现类似 SVG 的复合绘制效果。以下梳理这三种核心绘制组件的高级用法与实战技巧一、 Shape 组件的高级特性Shape的核心优势在于组合绘制与视口控制viewPort组合绘制可以在Shape内部放置多个基础图形并通过统一的填充、描边属性控制外观。viewPort 缩放与平移通过viewPort({ x, y, width, height })属性可以指定用户空间中的一个矩形映射到组件边界从而实现绘制内容的放大、缩小或平移效果。网格扭曲Mesh当传入PixelMap作为绘制目标时可以使用.mesh()属性实现网格扭曲效果。实战示例Shape() { // 底层背景矩形 Rect().width(100%).height(100%).fill(#0097D4) // 叠加圆形 Circle({ width: 75, height: 75 }).fill(#E87361) } .viewPort({ x: 0, y: 0, width: 150, height: 150 }) // 视口控制 .width(300).height(300) // 组件实际尺寸配合viewPort实现放大 .backgroundColor(#F5DC62)二、 Rect 组件灵活的圆角与渐变Rect除了基础的宽高和颜色设置还支持高度定制化的圆角和渐变效果独立控制四角圆角通过.radius([[40, 40], [20, 20], [40, 40], [20, 20]])可以分别设置左上、右上、右下、左下四个角的圆角半径。宽高分离的圆角使用.radiusWidth()和.radiusHeight()可以绘制椭圆形的圆角。裁剪与渐变结合从 API 18 开始结合.linearGradient()和.clipShape()可以绘制带有复杂倒角边界的渐变色矩形。实战示例Rect({ width: 90%, height: 80 }) .radius([[40, 40], [20, 20], [40, 40], [20, 20]]) // 四角不同圆角 .fill(Color.Pink)三、 Path 组件基于 SVG 规范的自由绘制Path是绘制复杂自定义图形如心形、不规则曲线的核心组件。它通过.commands()属性接收符合 SVG 路径描述规范的字符串。常用命令速查M x y移动画笔到指定起点。L x y画直线到指定点。H x / V y画水平/垂直线。C x1 y1 x2 y2 x y三次贝塞尔曲线常用于绘制平滑的心形等。A rx ry ... x y椭圆弧。Z闭合路径自动连接终点与起点。实战示例绘制心形Path() .commands( M150 80 C150 74 140 50 100 50 C40 50 40 125 40 125 C40 160 80 204 150 240 C220 204 260 160 260 125 C260 125 260 50 200 50 C170 50 150 74 150 80 Z ) .fill(Color.Red) .stroke(Color.Orange) .strokeWidth(3)四、 通用高级属性无论是Shape还是其子组件都支持以下链式调用的渲染控制属性填充与透明度.fill(color)、.fillOpacity(value)。描边与样式.stroke(color)、.strokeWidth(value)、.strokeLineJoin()拐角样式、.strokeDashArray()虚线样式。抗锯齿.antiAlias(true)默认开启保证图形边缘平滑。1、 动态属性控制AttributeModifier在复杂业务中图形的颜色、透明度、边框等属性往往需要随状态动态变化。ArkUI 提供了attributeModifier机制允许将多个图形属性封装在一个类中实现统一管理避免在组件上挂载大量零散的修饰符。核心逻辑实现AttributeModifierShapeAttribute接口在applyNormalAttribute中集中设置属性。class MyShapeModifier implements AttributeModifierShapeAttribute { applyNormalAttribute(instance: ShapeAttribute): void { instance.fill(#707070) .fillOpacity(0.5) .stroke(#2787D9) .strokeWidth(10) .strokeLineCap(LineCapStyle.Round) .antiAlias(true); } } Entry Component struct ShapeModifierDemo { State modifier: MyShapeModifier new MyShapeModifier(); build() { Column() { Shape() { Rect().width(200).height(100) } .attributeModifier(this.modifier) // 统一应用属性 } } }2、 Canvas 组件面向复杂交互的 2D 画布当需要实现手绘、签名、复杂图表或高频重绘场景时Shape的声明式渲染可能面临性能瓶颈。此时应使用Canvas组件配合CanvasRenderingContext2D进行命令式绘制。核心逻辑初始化CanvasRenderingContext2D。在onReady中配置画笔属性。绑定触摸事件如onTouch在onActionUpdate中调用context的绘图 API如lineTo,stroke并调用context.invalidate()触发重绘。Entry Component struct CanvasDrawDemo { private context: CanvasRenderingContext2D new CanvasRenderingContext2D(new RenderingContextSettings(true)); private path: Path2D new Path2D(); build() { Canvas(this.context) .width(100%) .height(100%) .onReady(() { this.context.lineWidth 3; this.context.strokeStyle #000000; }) .onTouch((event: TouchEvent) { if (event.type TouchType.Down) { this.path.moveTo(event.touches[0].x, event.touches[0].y); } else if (event.type TouchType.Move) { this.path.lineTo(event.touches[0].x, event.touches[0].y); this.context.stroke(this.path); this.context.invalidate(); // 关键触发画布重绘 } }) } }3、 路径动画联动MotionPathPath组件中的 SVG 路径字符串不仅可以用于静态绘制还可以作为组件运动的轨迹。通过.motionPath()属性可以让任意 UI 组件沿着自定义的贝塞尔曲线或直线进行平滑动画。核心逻辑将 SVG 路径字符串传递给motionPath的path属性并设置rotatable: true让组件在移动时自动跟随路径切线方向旋转。Image($r(app.media.car)) .width(50) .height(50) .motionPath({ path: M10 10 L100 10 C150 50 200 100 300 200, // 复用 Path 的 SVG 语法 from: 0.0, to: 1.0, rotatable: true })
)
