绘制几何图形 (Shape)
==============

绘制组件用于在页面绘制图形，Shape组件是绘制组件的父组件，包含所有绘制组件的通用属性。具体用法请参考[Shape](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-drawing-components-shape)。

#### 创建绘制组件

绘制组件可以由以下两种形式创建：

*   绘制组件使用Shape作为父组件，实现类似SVG的效果。接口调用为以下形式：
    
    Shape(value?: PixelMap)
    
    该接口用于创建带有父组件的绘制组件，其中value用于设置绘制目标，可将图形绘制在指定的PixelMap对象中，若未设置，则在当前绘制目标中进行绘制。
    
    Shape() {
      Rect().width(300).height(50)
    }
    
*   绘制组件单独使用，用于在页面上绘制指定的图形。有7种绘制类型，分别为[Circle](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-drawing-components-circle)（圆形）、[Ellipse](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-drawing-components-ellipse)（椭圆形）、[Line](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-drawing-components-line)（直线）、[Polyline](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-drawing-components-polyline)（折线）、[Polygon](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-drawing-components-polygon)（多边形）、[Path](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-drawing-components-path)（路径）、[Rect](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-drawing-components-rect)（矩形）。以Circle的接口调用为例：
    
    Circle(value?: { width?: string | number, height?: string | number })
    
    该接口用于在页面绘制圆形，其中width用于设置圆形的宽度，height用于设置圆形的高度，圆形直径由宽高最小值确定。
    
    Circle({ width: 150, height: 150 })
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/b9/v3/VN1Oawn7QMej3yGvtn1rNA/zh-cn_image_0000002634008546.jpg?HW-CC-KV=V1&HW-CC-Date=20260709T132305Z&HW-CC-Expire=86400&HW-CC-Sign=0AFF50ECEA77EAC128A02DF886316AD83A0E28CD43D2A58FCE77D4FCF3A2E9C5)
    

#### 形状视口viewPort

viewPort(value: { x?: number | string, y?: number | string, width?: number | string, height?: number | string })

形状视口viewPort指定用户空间中的一个矩形，该矩形映射到为关联的SVG元素建立的视区边界。viewPort属性的值包含x、y、width和height四个可选参数，x和y表示视区的左上角坐标，width和height表示其尺寸。

以下三个示例说明如何使用viewPort：

*   通过形状视口对图形进行放大与缩小。
    
    class Tmp {
      public x: number = 0;
      public y: number = 0;
      public width: number = 75;
      public height: number = 75;
    }
    
    class TmpOne {
      public x: number = 0;
      public y: number = 0;
      public width: number = 300;
      public height: number = 300;
    }
    
    @Entry
    @Component
    struct ViewPort1 {
      viep: Tmp = new Tmp();
      viep1: TmpOne = new TmpOne();
    
      build() {
        Column() {
          // 画一个宽高都为75的圆
          // 请将$r('app.string.OriginalSizeCircle')替换为实际资源文件，在本示例中该资源文件的value值为"原始尺寸Circle组件"
          Text($r('app.string.OriginalSizeCircle')).margin({ top: 20 })
          Circle({ width: 75, height: 75 }).fill('rgb(39, 135, 217)')
    
          Row({ space: 10 }) {
            Column() {
            // 创建一个宽高都为150的shape组件，背景色为青绿色，一个宽高都为75的viewPort。
              // 用一个蓝色的矩形来填充viewPort，在viewPort中绘制一个直径为75的圆。
              // 绘制结束，viewPort会根据组件宽高放大两倍。
              // 请将$r('app.string.EnlargedCircle')替换为实际资源文件，在本示例中该资源文件的value值为"shape内放大的Circle组件"
              Text($r('app.string.EnlargedCircle'))
              Shape() {
                Rect().width('100%').height('100%').fill('rgb(39, 135, 217)')
                Circle({ width: 75, height: 75 }).fill('rgb(213, 213, 213)')
              }
              .viewPort(this.viep)
              .width(150)
              .height(150)
              .backgroundColor('rgb(23, 169, 141)')
            }
    
            Column() {
              // 创建一个宽高都为150的shape组件，背景色为青绿色，一个宽高都为300的viewPort。
              // 用一个灰色的矩形来填充viewPort，在viewPort中绘制一个直径为75的圆。
              // 绘制结束，viewPort会根据组件宽高缩小两倍。
              // 请将$r('app.string.ShrunkCircle')替换为实际资源文件，在本示例中该资源文件的value值为"Shape内缩小的Circle组件"
              Text($r('app.string.ShrunkCircle'))
              Shape() {
                Rect().width('100%').height('100%').fill('rgb(213, 213, 213)')
                Circle({ width: 75, height: 75 }).fill('rgb(39, 135, 217)')
              }
              .viewPort(this.viep1)
              .width(150)
              .height(150)
              .backgroundColor('rgb(23, 169, 141)')
            }
          }
        }
      }
    }
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/d6/v3/XRmg0-mOQD6LaLnZEyv9Kw/zh-cn_image_0000002664207693.png?HW-CC-KV=V1&HW-CC-Date=20260709T132305Z&HW-CC-Expire=86400&HW-CC-Sign=4A01052AD65749E4934A834CA6812AD1E70042783106C39223E7567147255FF9)
    
*   创建一个宽高都为300的shape组件，背景色为黄色，创建一个宽高都为300的viewPort。用一个蓝色的矩形来填充viewPort，在viewPort中绘制一个半径为75的圆。
    
    class TmpTwo {
      public x: number = 0;
      public y: number = 0;
      public width: number = 300;
      public height: number = 300;
    }
    
    @Entry
    @Component
    struct ViewPort2 {
      viep: TmpTwo = new TmpTwo();
    
      build() {
        Column() {
          Shape() {
            Rect().width('100%').height('100%').fill('#0097D4')
            Circle({ width: 150, height: 150 }).fill('#E87361')
          }
          .viewPort(this.viep)
          .width(300)
          .height(300)
          .backgroundColor('#F5DC62')
        }
      }
    }
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/b0/v3/lboINHR2So6OnZX6amtEWA/zh-cn_image_0000002664327753.jpg?HW-CC-KV=V1&HW-CC-Date=20260709T132305Z&HW-CC-Expire=86400&HW-CC-Sign=931C2EEEEAD7AD6177D31474075E2417CBF1E070B52983BF6A3F7160FBA91FAE)
    
*   创建一个宽高都为300的shape组件，背景色为黄色，创建一个宽高都为300的viewPort。用一个蓝色的矩形来填充viewPort，在viewPort中绘制一个半径为75的圆，将viewPort向右方和下方各平移150。
    
    class TmpThree {
      public x: number = -150;
      public y: number = -150;
      public width: number = 300;
      public height: number = 300;
    }
    
    @Entry
    @Component
    struct ViewPort3 {
      viep: TmpThree = new TmpThree();
    
      build() {
        Column() {
          Shape() {
            Rect().width('100%').height('100%').fill('#0097D4')
            Circle({ width: 150, height: 150 }).fill('#E87361')
          }
          .viewPort(this.viep)
          .width(300)
          .height(300)
          .backgroundColor('#F5DC62')
        }
      }
    }
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/2f/v3/JlPEZ3wnRtKC_Kg79LaxYA/zh-cn_image_0000002633848644.jpg?HW-CC-KV=V1&HW-CC-Date=20260709T132305Z&HW-CC-Expire=86400&HW-CC-Sign=95BAFF4E9D756BC64E58FFF9BE3924095A173B2C84842C15341D264C6D52BA6B)
    

#### 自定义样式

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/d2/v3/kdYcumHWQ3mxO_x8MRSyQQ/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260709T132305Z&HW-CC-Expire=86400&HW-CC-Sign=E47E1817C82F90B642E60B1D94CE0DB9BC9F881D9094F31FD176965DA8FD1D8A)

示例通过commands来绘制路径，commands参数说明请参考[SVG路径描述规范](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-drawing-components-path#svg路径描述规范)。

绘制组件支持通过各种属性更改组件样式。

*   通过[fill](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-drawing-components-path#fill)可以设置组件填充区域颜色。
    
    Path()
      .width(100)
      .height(100)
      .commands('M150 0 L300 300 L0 300 Z')
      .fill('#E87361')
      .strokeWidth(0)
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/63/v3/faf_hEF9RhSi9GvCiU4ULw/zh-cn_image_0000002634008548.jpg?HW-CC-KV=V1&HW-CC-Date=20260709T132305Z&HW-CC-Expire=86400&HW-CC-Sign=01A5B8E304A615342A93437B5E93DDCD4D8D8187D3BFCCCC427B72EB34E26186)
    
*   通过[stroke](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-drawing-components-path#stroke)可以设置组件边框颜色。
    
    Path()
      .width(100)
      .height(100)
      .fillOpacity(0)
      .commands('M150 0 L300 300 L0 300 Z')
      .stroke(Color.Red)
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/8/v3/gFMTSXvPQ0WN7hUI5VQn-w/zh-cn_image_0000002664207695.jpg?HW-CC-KV=V1&HW-CC-Date=20260709T132305Z&HW-CC-Expire=86400&HW-CC-Sign=9BEAD9D76F8E3CCCD5FE8A3C2CC86B165DA4034CA8014C401C93676ABE3499EC)
    
*   通过[strokeOpacity](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-drawing-components-path#strokeopacity)可以设置边框透明度。
    
    Path()
      .width(100)
      .height(100)
      .fillOpacity(0)
      .commands('M150 0 L300 300 L0 300 Z')
      .stroke(Color.Red)
      .strokeWidth(10)
      .strokeOpacity(0.2)
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/23/v3/W5-i-K0UT_CzIQOm5vgVCQ/zh-cn_image_0000002664327755.jpg?HW-CC-KV=V1&HW-CC-Date=20260709T132305Z&HW-CC-Expire=86400&HW-CC-Sign=F669A56811EE6A789CDA717295007B94D74C1D1067BE2A6C0F49644398769EA1)
    
*   通过[strokeLineJoin](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-drawing-components-polyline#strokelinejoin)可以设置线条拐角绘制样式。拐角绘制样式分为Bevel(使用斜角连接路径段)、Miter(使用尖角连接路径段)、Round(使用圆角连接路径段)。
    
    Polyline()
      .width(100)
      .height(100)
      .fillOpacity(0)
      .stroke(Color.Red)
      .strokeWidth(8)
      .points(\[\[20, 0\], \[0, 100\], \[100, 90\]\])
      // 设置折线拐角处为圆弧
      .strokeLineJoin(LineJoinStyle.Round)
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/2f/v3/88Dm_MADREeo_TlNbJ1OfA/zh-cn_image_0000002633848646.jpg?HW-CC-KV=V1&HW-CC-Date=20260709T132305Z&HW-CC-Expire=86400&HW-CC-Sign=CBC32F1F90A36821FA240CBA9BF239BDE8857FFC0028F22A1384A19332AC6A61)
    
*   通过[strokeMiterLimit](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-drawing-components-polyline#strokemiterlimit)设置斜接长度与边框宽度比值的极限值。
    
    斜接长度表示外边框外边交点到内边交点的距离，边框宽度即[strokeWidth](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-drawing-components-polyline#strokewidth)属性的值。
    
    strokeMiterLimit取值需大于等于1，且在[strokeLineJoin](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-drawing-components-polyline#strokelinejoin)属性取值LineJoinStyle.Miter时生效。
    
    Polyline()
      .width(100)
      .height(100)
      .fillOpacity(0)
      .stroke(Color.Red)
      .strokeWidth(10)
      .points(\[\[20, 0\], \[20, 100\], \[100, 100\]\])
      // 设置折线拐角处为尖角
      .strokeLineJoin(LineJoinStyle.Miter)
      // 设置斜接长度与线宽的比值
      .strokeMiterLimit(1 / Math.sin(45 \* Math.PI / 180))
    Polyline()
      .width(100)
      .height(100)
      .fillOpacity(0)
      .stroke(Color.Red)
      .strokeWidth(10)
      .points(\[\[20, 0\], \[20, 100\], \[100, 100\]\])
      .strokeLineJoin(LineJoinStyle.Miter)
      .strokeMiterLimit(1.42)
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/23/v3/6RpzPsHIR6GhW8J08iR5XQ/zh-cn_image_0000002634008550.jpg?HW-CC-KV=V1&HW-CC-Date=20260709T132305Z&HW-CC-Expire=86400&HW-CC-Sign=C6CCFBCD116E50968F994627DA74AA749F42589210CC1081897A308266E33CD8)
    
*   通过[antiAlias](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-drawing-components-circle#antialias)设置是否开启抗锯齿，默认值为true（开启抗锯齿）。
    
    // 开启抗锯齿
    Circle()
      .width(150)
      .height(200)
      .fillOpacity(0)
      .strokeWidth(5)
      .stroke(Color.Black)
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/3f/v3/C3AWiIfSRUyj1j0bhizo0g/zh-cn_image_0000002664207697.png?HW-CC-KV=V1&HW-CC-Date=20260709T132305Z&HW-CC-Expire=86400&HW-CC-Sign=8C433D018C49CE0CD5471B8725F1E3259871B0C0FAD2E35595327EF7B4C2ADF1)
    
    // 关闭抗锯齿
    Circle()
      .width(150)
      .height(200)
      .fillOpacity(0)
      .strokeWidth(5)
      .stroke(Color.Black)
      .antiAlias(false)
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/d/v3/gdfknz86Qi-8VgY6hLOCyQ/zh-cn_image_0000002664327757.jpg?HW-CC-KV=V1&HW-CC-Date=20260709T132305Z&HW-CC-Expire=86400&HW-CC-Sign=A43CF06492E09D5DAF3A126EAF36470F109A1AF6FB4BCBBC95D916E11CED363E)
    
*   通过[mesh](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-drawing-components-shape#mesh8)设置网格效果，实现图像局部扭曲。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/d7/v3/GCL0pAD6TgCdYIVDcW0CfA/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260709T132305Z&HW-CC-Expire=86400&HW-CC-Sign=FCFD37CE287EAF1F0DF57F17C63F41A9DA9FAA6954B586E641EF62329FC9F094)
    
    示例通过commands来绘制路径，commands参数说明请参考[SVG路径描述规范](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-drawing-components-path#svg路径描述规范)。
    
    import { FrameNode, NodeController, RenderNode } from '@kit.ArkUI';
    import { image } from '@kit.ImageKit';
    import { drawing } from '@kit.ArkGraphics2D';
    
    let offCanvas: OffscreenCanvas = new OffscreenCanvas(150, 150);
    let ctx = offCanvas.getContext('2d');
    
    class DrawingRenderNode extends RenderNode {
    
      async draw(context: DrawContext) {
        const canvas = context.canvas;
        let pixelMap = ctx.getPixelMap(0, 0, 150, 150);
        const brush = new drawing.Brush(); // 只支持brush，使用pen没有绘制效果。
        canvas.attachBrush(brush);
        let verts: number\[\] = \[0, 0, 410, 0, 50, 0, 0, 180, 50, 180, 410, 180, 0, 360, 410, 360, 50, 360\];
        canvas.drawPixelMapMesh(pixelMap, 2, 2, verts, 0, null, 0);
        canvas.detachBrush();
      }
    }
    
    const renderNode = new DrawingRenderNode();
    renderNode.frame = {
      x: 0,
      y: 0,
      width: 150,
      height: 150
    };
    
    class MyNodeController extends NodeController {
      private rootNode: FrameNode | null = null;
    
      makeNode(uiContext: UIContext): FrameNode | null {
        this.rootNode = new FrameNode(uiContext);
    
        const rootRenderNode = this.rootNode.getRenderNode();
        if (rootRenderNode !== null) {
          rootRenderNode.appendChild(renderNode);
        }
        return this.rootNode;
      }
    }
    
    @Entry
    @Component
    struct Mesh {
      private myNodeController: MyNodeController = new MyNodeController();
      @State showShape: boolean = false;
      @State pixelMap: image.PixelMap | undefined = undefined;
      @State shapeWidth: number = 150;
      @State strokeWidth: number = 1;
      @State meshArray: Array<number> = \[0, 0, 50, 0, 410, 0, 0, 180, 50, 180, 410, 180, 0, 360, 50, 360, 410, 360\];
    
      aboutToAppear(): void {
        // 'resources/base/media/image.png'需要替换为开发者所需的图像资源文件
        let img: ImageBitmap = new ImageBitmap('resources/base/media/image.png');
        ctx.drawImage(img, 0, 0, 100, 100);
        this.pixelMap = ctx.getPixelMap(0, 0, 150, 150);
      }
    
      build() {
        Column() {
          Image(this.pixelMap)
            .backgroundColor('#86C5E3')
            .width(150)
            .height(150)
            .onClick(() => {
              // 'resources/base/media/image.png'需要替换为开发者所需的图像资源文件
              let img: ImageBitmap = new ImageBitmap('resources/base/media/image.png');
              ctx.drawImage(img, 0, 0, 100, 100);
              this.pixelMap = ctx.getPixelMap(1, 1, 150, 150);
              this.myNodeController.rebuild();
              this.strokeWidth += 1;
            })
    
          NodeContainer(this.myNodeController)
            .width(150)
            .height(150)
            .backgroundColor(Color.Grey)
            .onClick(() => {
              this.meshArray = \[0, 0, 50, 0, 410, 0, 0, 180, 50, 180, 410, 180, 0, 360, 50, 360, 410, 360, 0\];
            })
          Button('change mesh')
            .margin(5)
            .onClick(() => {
              this.meshArray = \[0, 0, 410, 0, 50, 0, 0, 180, 50, 180, 410, 180, 0, 360, 410, 360, 50, 360\];
            })
          Button('Show Shape')
            .margin(5)
            .onClick(() => {
              this.showShape = !this.showShape;
            })
    
          if (this.showShape) {
            Shape(this.pixelMap) {
              Path().width(150).height(60).commands('M0 0 L400 0 L400 150 Z')
            }
            .fillOpacity(0.2)
            .backgroundColor(Color.Grey)
            .width(this.shapeWidth)
            .height(150)
            .mesh(this.meshArray, 2, 2)
            .fill(0x317AF7)
            .stroke(0xEE8443)
            .strokeWidth(this.strokeWidth)
            .strokeLineJoin(LineJoinStyle.Miter)
            .strokeMiterLimit(5)
    
            Shape(this.pixelMap) {
              Path().width(150).height(60).commands('M0 0 L400 0 L400 150 Z')
            }
            .fillOpacity(0.2)
            .backgroundColor(Color.Grey)
            .width(this.shapeWidth)
            .height(150)
            .fill(0x317AF7)
            .stroke(0xEE8443)
            .strokeWidth(this.strokeWidth)
            .strokeLineJoin(LineJoinStyle.Miter)
            .strokeMiterLimit(5)
            .onDragStart(() => {
            })
    
            // mesh只对shape传入pixelMap时生效，此处不生效
            Shape() {
              Path().width(150).height(60).commands('M0 0 L400 0 L400 150 Z')
            }
            .fillOpacity(0.2)
            .backgroundColor(Color.Grey)
            .width(this.shapeWidth)
            .height(150)
            .mesh(this.meshArray, 2, 2)
            .fill(0x317AF7)
            .stroke(0xEE8443)
            .strokeWidth(this.strokeWidth)
            .strokeLineJoin(LineJoinStyle.Miter)
            .strokeMiterLimit(5)
            .onClick(() => {
              this.pixelMap = undefined;
            })
          }
        }
      }
    }
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/30/v3/ZGgU8-eiTVG5NqXKOp33bw/zh-cn_image_0000002633848648.png?HW-CC-KV=V1&HW-CC-Date=20260709T132305Z&HW-CC-Expire=86400&HW-CC-Sign=0D7FD18F770A93C75D80C88465FE905614383CABE33457E3B86D363F67DE99B3)
    

#### 场景示例

#### \[h2\]绘制封闭路径

在Shape的(-80, -5)点绘制一个封闭路径，填充颜色rgb(213, 213, 213)，线条宽度3，边框颜色rgb(39, 135, 217)，拐角样式锐角（默认值）。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/60/v3/qbFRCfehQCuH-o3VGT3tBg/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260709T132305Z&HW-CC-Expire=86400&HW-CC-Sign=77B2D05DDC0E6C60FA24B769051599D4827514F489D6EF15CC83E20BCF23E421)

示例通过commands来绘制路径，commands参数说明请参考[SVG路径描述规范](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-drawing-components-path#svg路径描述规范)。

@Entry
@Component
struct ShapeExample {
  build() {
    Column({ space: 10 }) {
      Shape() {
        Path().width(200).height(60).commands('M0 0 L400 0 L400 150 Z')
      }
      .viewPort({
        x: -80,
        y: -5,
        width: 500,
        height: 300
      })
      .fill('rgb(213, 213, 213)')
      .stroke('rgb(39, 135, 217)')
      .strokeWidth(3)
      .strokeLineJoin(LineJoinStyle.Miter)
      .strokeMiterLimit(5)
    }.width('100%').margin({ top: 15 })
  }
}

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/12/v3/GqSPDLQcQTKIqYNcqLPcrw/zh-cn_image_0000002634008552.png?HW-CC-KV=V1&HW-CC-Date=20260709T132305Z&HW-CC-Expire=86400&HW-CC-Sign=A0EA03BE6F34C2558F6CC04C8250157B4554C34536AA6597734E9A4D6C9DE2BD)

#### \[h2\]绘制圆和圆环

绘制一个直径为150的圆，和一个直径为150、线条为红色虚线的圆环（宽高设置不一致时以短边为直径）。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/47/v3/L1oPVMISStiu0QS3vFvvuw/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260709T132305Z&HW-CC-Expire=86400&HW-CC-Sign=960C0DD53762C956AA7EAE68BF8A9DB1F06D66615896F3BEA19494A0C6DEF74D)

本示例通过strokeDashArray属性设置边框间隙来实现红色虚线的圆环，strokeDashArray属性参考[strokeDashArray](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-drawing-components-shape#strokedasharray)。

@Entry
@Component
struct CircleExample {
  build() {
    Column({ space: 10 }) {
      // 绘制一个直径为150的圆
      Circle({ width: 150, height: 150 })
      // 绘制一个直径为150、线条为红色虚线的圆环
      Circle()
        .width(150)
        .height(200)
        .fillOpacity(0)
        .strokeWidth(3)
        .stroke(Color.Red)
        .strokeDashArray(\[1, 2\])
      // ...
    }.width('100%')
  }
}

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/be/v3/Cmuj19aVTEqVV8jzDHf3XA/zh-cn_image_0000002664207699.jpg?HW-CC-KV=V1&HW-CC-Date=20260709T132305Z&HW-CC-Expire=86400&HW-CC-Sign=81919E3DFB5C70D526F8BC26F66A00D0242339F27266D49B00ED1ECCCD8ADF0A)

#### \[h2\]UI视觉属性作用效果

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/7c/v3/quc9TI_ATASurEXd42jPng/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260709T132305Z&HW-CC-Expire=86400&HW-CC-Sign=0A9981DD422E7DE75475C3A3FFC258FA429F203BD7D40E6E1DC3A5B8813A3B38)

[backgroundColor](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-background#backgroundcolor)、[linearGradient](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-gradient-color#lineargradient)等通用属性作用于组件的背景区域，而不会在组件具体的内容区域生效。

@Entry
@Component
struct CircleExample {
  build() {
    Column({ space: 10 }) {
      // ...
      // 绘制一个直径为150的圆
      Circle()
        .width(150)
        .height(200)
        .backgroundColor(Color.Pink) // 会生效在一个150\*200大小的矩形区域，而非仅在绘制的一个直径为150的圆形区域
    }.width('100%')
  }
}

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/a7/v3/cZsK-MabSUqjMYeLWZMFDQ/zh-cn_image_0000002664327759.jpg?HW-CC-KV=V1&HW-CC-Date=20260709T132305Z&HW-CC-Expire=86400&HW-CC-Sign=586CDB1F5A26920746EBA3A36A6D2474D63E414B20CD9E10086A12F37B9D0FD5)