繪制組件的父組件

子組件

包含Rect、Path、Circle、Ellipse、Polyline、Polygon、Image、Text、Column、Row子組件。

接口

Shape(value?: PixelMap)

從API version 9開始，該接口支持在ArkTS卡片中使用，卡片中不支持使用PixelMap對象。。

參數(shù)：

屬性

除支持通用屬性外，還支持以下屬性：

示例

// xxx.ets
@Entry
@Component
struct ShapeExample {
  build() {
    Column({ space: 10 }) {
      Text('basic').fontSize(11).fontColor(0xCCCCCC).width(320)
      // 在Shape的(-2, -2)點繪制一個 300 * 50 帶邊框的矩形,顏色0x317AF7,邊框顏色黑色,邊框?qū)挾?,邊框間隙20,向左偏移10,線條兩端樣式為半圓,拐角樣式圓角,抗鋸齒(默認開啟)
      // 在Shape的(-2, 58)點繪制一個 300 * 50 帶邊框的橢圓,顏色0x317AF7,邊框顏色黑色,邊框?qū)挾?,邊框間隙20,向左偏移10,線條兩端樣式為半圓,拐角樣式圓角,抗鋸齒(默認開啟)
      // 在Shape的(-2, 118)點繪制一個 300 * 10 直線路徑,顏色0x317AF7,邊框顏色黑色,寬度4,間隙20,向左偏移10,線條兩端樣式為半圓,拐角樣式圓角,抗鋸齒(默認開啟)
      Shape() {
        Rect().width(300).height(50)
        Ellipse().width(300).height(50).offset({ x: 0, y: 60 })
        Path().width(300).height(10).commands('M0 0 L900 0').offset({ x: 0, y: 120 })
      }
      .viewPort({ x: -2, y: -2, width: 304, height: 130 })
      .fill(0x317AF7)
      .stroke(Color.Black)
      .strokeWidth(4)
      .strokeDashArray([20])
      .strokeDashOffset(10)
      .strokeLineCap(LineCapStyle.Round)
      .strokeLineJoin(LineJoinStyle.Round)
      .antiAlias(true)
      // 分別在Shape的(0, 0)、(-5, -5)點繪制一個 300 * 50 帶邊框的矩形,可以看出之所以將視口的起始位置坐標設為負值是因為繪制的起點默認為線寬的中點位置，因此要讓邊框完全顯示則需要讓視口偏移半個線寬
      Shape() {
        Rect().width(300).height(50)
      }
      .viewPort({ x: 0, y: 0, width: 320, height: 70 })
      .fill(0x317AF7)
      .stroke(Color.Black)
      .strokeWidth(10)

      Shape() {
        Rect().width(300).height(50)
      }
      .viewPort({ x: -5, y: -5, width: 320, height: 70 })
      .fill(0x317AF7)
      .stroke(Color.Black)
      .strokeWidth(10)

      Text('path').fontSize(11).fontColor(0xCCCCCC).width(320)
      // 在Shape的(0, -5)點繪制一條直線路徑,顏色0xEE8443,線條寬度10,線條間隙20
      Shape() {
        Path().width(300).height(10).commands('M0 0 L900 0')
      }
      .viewPort({ x: 0, y: -5, width: 300, height: 20 })
      .stroke(0xEE8443)
      .strokeWidth(10)
      .strokeDashArray([20])
      // 在Shape的(0, -5)點繪制一條直線路徑,顏色0xEE8443,線條寬度10,線條間隙20,向左偏移10
      Shape() {
        Path().width(300).height(10).commands('M0 0 L900 0')
      }
      .viewPort({ x: 0, y: -5, width: 300, height: 20 })
      .stroke(0xEE8443)
      .strokeWidth(10)
      .strokeDashArray([20])
      .strokeDashOffset(10)
      // 在Shape的(0, -5)點繪制一條直線路徑,顏色0xEE8443,線條寬度10,透明度0.5
      Shape() {
        Path().width(300).height(10).commands('M0 0 L900 0')
      }
      .viewPort({ x: 0, y: -5, width: 300, height: 20 })
      .stroke(0xEE8443)
      .strokeWidth(10)
      .strokeOpacity(0.5)
      // 在Shape的(0, -5)點繪制一條直線路徑,顏色0xEE8443,線條寬度10,線條間隙20,線條兩端樣式為半圓
      Shape() {
        Path().width(300).height(10).commands('M0 0 L900 0')
      }
      .viewPort({ x: 0, y: -5, width: 300, height: 20 })
      .stroke(0xEE8443)
      .strokeWidth(10)
      .strokeDashArray([20])
      .strokeLineCap(LineCapStyle.Round)
      // 在Shape的(-80, -5)點繪制一個封閉路徑,顏色0x317AF7,線條寬度10,邊框顏色0xEE8443,拐角樣式銳角（默認值）
      Shape() {
        Path().width(200).height(60).commands('M0 0 L400 0 L400 150 Z')
      }
      .viewPort({ x: -80, y: -5, width: 310, height: 90 })
      .fill(0x317AF7)
      .stroke(0xEE8443)
      .strokeWidth(10)
      .strokeLineJoin(LineJoinStyle.Miter)
      .strokeMiterLimit(5)
    }.width('100%').margin({ top: 15 })
  }
}