繪制幾何圖形（Shape）

創(chuàng)建繪制組件

繪制組件可以由以下兩種形式創(chuàng)建：

• 繪制組件使用Shape作為父組件，實現(xiàn)類似SVG的效果。接口調(diào)用為以下形式：

  Shape(value?: PixelMap)

  該接口用于創(chuàng)建帶有父組件的繪制組件，其中value用于設置繪制目標，可將圖形繪制在指定的PixelMap對象中，若未設置，則在當前繪制目標中進行繪制。

  Shape() {
    Rect().width(300).height(50)
  }

形狀視口viewport

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

形狀視口viewport指定用戶空間中的一個矩形，該矩形映射到為關聯(lián)的 SVG 元素建立的視區(qū)邊界。viewport屬性的值包含x、y、width和height四個可選參數(shù)，x 和 y 表示視區(qū)的左上角坐標，width和height表示其尺寸。

以下3個示例講解Viewport具體用法：

• 通過形狀視口對圖形進行放大與縮小。

  // 畫一個寬高都為150的圓
  Text('原始尺寸Circle組件')
  Circle({width: 75, height: 75}).fill('#E87361')
  
  Row({space:10}) {
    Column() {
      // 創(chuàng)建一個寬高都為150的shape組件，背景色為黃色，一個寬高都為75的viewport。用一個藍色的矩形來填充viewport，在viewport中繪制一個直徑為75的圓。
      // 繪制結束，viewport會根據(jù)組件寬高放大兩倍
      Text('shape內(nèi)放大的Circle組件')
      Shape() {
        Rect().width('100%').height('100%').fill('#0097D4')
        Circle({width: 75, height: 75}).fill('#E87361')
      }
      .viewPort({x: 0, y: 0, width: 75, height: 75})
      .width(150)
      .height(150)
      .backgroundColor('#F5DC62')
    }
    Column() {
      // 創(chuàng)建一個寬高都為150的shape組件，背景色為黃色，一個寬高都為300的viewport。用一個綠色的矩形來填充viewport，在viewport中繪制一個直徑為75的圓。
      // 繪制結束，viewport會根據(jù)組件寬高縮小兩倍。
      Text('Shape內(nèi)縮小的Circle組件')
      Shape() {
        Rect().width('100%').height('100%').fill('#BDDB69')
        Circle({width: 75, height: 75}).fill('#E87361')
      }
      .viewPort({x: 0, y: 0, width: 300, height: 300})
      .width(150)
      .height(150)
      .backgroundColor('#F5DC62')
    }
  }

  

• 創(chuàng)建一個寬高都為300的shape組件，背景色為黃色，一個寬高都為300的viewport。用一個藍色的矩形來填充viewport，在viewport中繪制一個半徑為75的圓。

  Shape() {
    Rect().width("100%").height("100%").fill("#0097D4")
    Circle({ width: 150, height: 150 }).fill("#E87361")
  }
    .viewPort({ x: 0, y: 0, width: 300, height: 300 })
    .width(300)
    .height(300)
    .backgroundColor("#F5DC62")

  

• 創(chuàng)建一個寬高都為300的shape組件，背景色為黃色，創(chuàng)建一個寬高都為300的viewport。用一個藍色的矩形來填充viewport，在viewport中繪制一個半徑為75的圓，將viewport向右方和下方各平移150。

  Shape() {
    Rect().width("100%").height("100%").fill("#0097D4")
    Circle({ width: 150, height: 150 }).fill("#E87361")
  }
    .viewPort({ x: -150, y: -150, width: 300, height: 300 })
    .width(300)
    .height(300)
    .backgroundColor("#F5DC62")
  
  

  

自定義樣式

繪制組件支持通過各種屬性對組件樣式進行更改。

• 通過fill可以設置組件填充區(qū)域顏色。

  Path()
    .width(100)
    .height(100)
    .commands('M150 0 L300 300 L0 300 Z')
    .fill("#E87361")

  

• 通過stroke可以設置組件邊框顏色。

  Path()
    .width(100)
    .height(100)
    .fillOpacity(0)
    .commands('M150 0 L300 300 L0 300 Z')
    .stroke(Color.Red)

  

• 通過strokeOpacity可以設置邊框透明度。

  Path()
    .width(100)
    .height(100)
    .fillOpacity(0)
    .commands('M150 0 L300 300 L0 300 Z')
    .stroke(Color.Red)
    .strokeWidth(10)
    .strokeOpacity(0.2)

  

• 通過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)

  

• 通過strokeMiterLimit設置斜接長度與邊框寬度比值的極限值。
  斜接長度表示外邊框外邊交點到內(nèi)邊交點的距離，邊框寬度即strokeWidth屬性的值。strokeMiterLimit取值需大于等于1，且在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))
  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)

  

• 通過antiAlias設置是否開啟抗鋸齒，默認值為true（開啟抗鋸齒）。

  //開啟抗鋸齒
  Circle()
    .width(150)
    .height(200)
    .fillOpacity(0)
    .strokeWidth(5)
    .stroke(Color.Black)

  

  //關閉抗鋸齒
  Circle()
    .width(150)
    .height(200)
    .fillOpacity(0)
    .strokeWidth(5)
    .stroke(Color.Black)
    .antiAlias(false)

  

場景示例

• 在Shape的(-80, -5)點繪制一個封閉路徑，填充顏色0x317AF7,線條寬度10,邊框顏色紅色,拐角樣式銳角（默認值）。

  @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(0x317AF7)
        .stroke(Color.Red)
        .strokeWidth(3)
        .strokeLineJoin(LineJoinStyle.Miter)
        .strokeMiterLimit(5)
      }.width('100%').margin({ top: 15 })
    }
  }

  

• 繪制一個直徑為150的圓，和一個直徑為150、線條為紅色虛線的圓環(huán)（寬高設置不一致時以短邊為直徑）。

  @Entry
  @Component
  struct CircleExample {
    build() {
      Column({ space: 10 }) {
        //繪制一個直徑為150的圓
        Circle({ width: 150, height: 150 })
        //繪制一個直徑為150、線條為紅色虛線的圓環(huán)
        Circle()
          .width(150)
          .height(200)
          .fillOpacity(0)
          .strokeWidth(3)
          .stroke(Color.Red)
          .strokeDashArray([1, 2])
      }.width('100%')
    }
  }