橢圓繪制組件

2024-01-22 18:03 更新

橢圓繪制組件。

說明

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

子組件

接口

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

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

參數(shù):

參數(shù)名

參數(shù)類型

必填

參數(shù)描述

width

string | number

寬度。

默認(rèn)值:0

說明:

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

height

string | number

高度。

默認(rèn)值:0

說明:

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

屬性

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

名稱

類型

默認(rèn)值

描述

fill

ResourceColor

Color.Black

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

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

說明:

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

fillOpacity

number | string | Resource

1

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

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

說明:

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

stroke

ResourceColor

-

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

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

說明:

異常值不會繪制邊框。

strokeDashArray

Array<Length>

[]

設(shè)置邊框間隙。

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

說明:

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

strokeDashOffset

number | string

0

邊框繪制起點的偏移量。

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

說明:

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

strokeLineCap

LineCapStyle

LineCapStyle.Butt

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

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

strokeLineJoin

LineJoinStyle

LineJoinStyle.Miter

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

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

說明:

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

strokeMiterLimit

number | string

4

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

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

說明:

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

strokeOpacity

number | string | Resource

1

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

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

說明:

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

strokeWidth

Length

1

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

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

說明:

該屬性若為string類型, 暫不支持百分比。

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

antiAlias

boolean

true

是否開啟抗鋸齒效果。

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

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct EllipseExample {
  5. build() {
  6. Column({ space: 10 }) {
  7. // 繪制一個 150 * 80 的橢圓
  8. Ellipse({ width: 150, height: 80 })
  9. // 繪制一個 150 * 100 、線條為藍(lán)色的橢圓環(huán)
  10. Ellipse()
  11. .width(150)
  12. .height(100)
  13. .fillOpacity(0)
  14. .stroke(Color.Blue)
  15. .strokeWidth(3)
  16. }.width('100%')
  17. }
  18. }

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

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號