繪制圓形的組件

2024-01-22 18:02 更新

用于繪制圓形的組件。

說(shuō)明

該組件從API Version 7開(kāi)始支持。后續(xù)版本如有新增內(nèi)容,則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

子組件

無(wú)

接口

Circle(options?: {width?: string | number, height?: string | number})

從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)名

參數(shù)類(lèi)型

必填

參數(shù)描述

width

string | number

寬度。

默認(rèn)值:0

說(shuō)明:

異常值按照默認(rèn)值處理。

height

string | number

高度。

默認(rèn)值:0

說(shuō)明:

異常值按照默認(rèn)值處理。

屬性

除支持通用屬性外,還支持以下屬性:

名稱(chēng)

類(lèi)型

描述

fill

ResourceColor

設(shè)置填充區(qū)域顏色。

默認(rèn)值:Color.Black

從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。

說(shuō)明:

異常值按照默認(rèn)值處理。

fillOpacity

number | string | Resource

設(shè)置填充區(qū)域透明度。

默認(rèn)值:1

從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。

說(shuō)明:

異常值按照默認(rèn)值處理。

stroke

ResourceColor

設(shè)置邊框顏色,不設(shè)置時(shí),默認(rèn)沒(méi)有邊框。

從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。

說(shuō)明:

異常值不會(huì)繪制邊框。

strokeDashArray

Array<Length>

設(shè)置邊框間隙。

默認(rèn)值:[]

從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。

說(shuō)明:

異常值按照默認(rèn)值處理。

strokeDashOffset

number | string

邊框繪制起點(diǎn)的偏移量。

默認(rèn)值:0

從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。

說(shuō)明:

異常值按照默認(rèn)值處理。

strokeLineCap

LineCapStyle

設(shè)置邊框端點(diǎn)繪制樣式。

默認(rèn)值:LineCapStyle.Butt

從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。

strokeLineJoin

LineJoinStyle

設(shè)置邊框拐角繪制樣式。

默認(rèn)值:LineJoinStyle.Miter

從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。

說(shuō)明:

Circle組件無(wú)法形成拐角,該屬性設(shè)置無(wú)效。

strokeMiterLimit

number | string

設(shè)置斜接長(zhǎng)度與邊框?qū)挾缺戎档臉O限值。

默認(rèn)值:4

從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。

說(shuō)明:

Circle組件無(wú)法設(shè)置尖角圖形,該屬性設(shè)置無(wú)效。

strokeOpacity

number | string | Resource

設(shè)置邊框透明度。

默認(rèn)值:1

從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。

說(shuō)明:

該屬性的取值范圍是[0.0, 1.0],若給定值小于0.0,則取值為0.0;若給定值大于1.0,則取值為1.0,其余異常值按1.0處理 。

strokeWidth

Length

設(shè)置邊框?qū)挾取?/p>

默認(rèn)值:1

從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。

說(shuō)明:

該屬性若為string類(lèi)型, 暫不支持百分比。

異常值按照默認(rèn)值處理。

antiAlias

boolean

是否開(kāi)啟抗鋸齒效果。

默認(rèn)值:true

從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct CircleExample {
  5. build() {
  6. Column({ space: 10 }) {
  7. // 繪制一個(gè)直徑為150的圓
  8. Circle({ width: 150, height: 150 })
  9. // 繪制一個(gè)直徑為150、線條為紅色虛線的圓環(huán)(寬高設(shè)置不一致時(shí)以短邊為直徑)
  10. Circle()
  11. .width(150)
  12. .height(200)
  13. .fillOpacity(0)
  14. .strokeWidth(3)
  15. .stroke(Color.Red)
  16. .strokeDashArray([1, 2])
  17. }.width('100%')
  18. }
  19. }


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)