Polygon
多邊形繪制組件。
說(shuō)明:
開(kāi)發(fā)前請(qǐng)熟悉鴻蒙開(kāi)發(fā)指導(dǎo)文檔 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
該組件從API Version 7開(kāi)始支持。后續(xù)版本如有新增內(nèi)容,則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。
子組件
無(wú)
接口
Polygon(value?: {width?: string | number, height?: string | number})
從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。
參數(shù):
| 參數(shù)名 | 參數(shù)類型 | 必填 | 默認(rèn)值 | 參數(shù)描述 |
|---|---|---|---|---|
| width | string | number | 否 | 0 |
| height | string | number | 否 | 0 |
屬性
除支持[通用屬性]外,還支持以下屬性:
| 名稱 | 類型 | 默認(rèn)值 | 描述 |
|---|---|---|---|
| points | Array | [] | 多邊形的頂點(diǎn)坐標(biāo)列表。 從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。**說(shuō)明:**異常值按照默認(rèn)值處理。 |
| fill | [ResourceColor] | Color.Black | 設(shè)置填充區(qū)域顏色。 從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。**說(shuō)明:**異常值按照默認(rèn)值處理。 |
| fillOpacity | number | string | [Resource] |
| stroke | [ResourceColor] | - | 設(shè)置邊框顏色,不設(shè)置時(shí),默認(rèn)沒(méi)有邊框線條。 從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。**說(shuō)明:**異常值不會(huì)繪制邊框線條。 |
| strokeDashArray | Array | [] | 設(shè)置邊框間隙。 從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。**說(shuō)明:**異常值按照默認(rèn)值處理。 |
| strokeDashOffset | number | string | 0 |
| strokeLineCap | [LineCapStyle] | LineCapStyle.Butt | 設(shè)置邊框端點(diǎn)繪制樣式。 從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。 |
| strokeLineJoin | [LineJoinStyle] | LineJoinStyle.Miter | 設(shè)置邊框拐角繪制樣式。 從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。 |
| strokeMiterLimit | number | string | 4 |
| strokeOpacity | number | string | [Resource] |
| strokeWidth | Length | 1 | 設(shè)置邊框?qū)挾取?從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。**說(shuō)明:**該屬性若為string類型, 暫不支持百分比。 異常值按照默認(rèn)值處理。 |
| antiAlias | boolean | true | 是否開(kāi)啟抗鋸齒效果。 從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。 |
Point
點(diǎn)坐標(biāo)類型。
從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。
| 名稱 | 類型定義 | 描述HarmonyOS與OpenHarmony鴻蒙文檔籽料:mau123789是v直接拿 |
|---|---|---|
| Point | [number, number] | 第一個(gè)參數(shù)為x軸坐標(biāo),第二個(gè)參數(shù)為y軸坐標(biāo)(相對(duì)坐標(biāo))。 |

示例
// xxx.ets
@Entry
@Component
struct PolygonExample {
build() {
Column({ space: 10 }) {
// 在 100 * 100 的矩形框中繪制一個(gè)三角形,起點(diǎn)(0, 0),經(jīng)過(guò)(50, 100),終點(diǎn)(100, 0)
Polygon({ width: 100, height: 100 })
.points([[0, 0], [50, 100], [100, 0]])
.fill(Color.Green)
// 在 100 * 100 的矩形框中繪制一個(gè)四邊形,起點(diǎn)(0, 0),經(jīng)過(guò)(0, 100)和(100, 100),終點(diǎn)(100, 0)
Polygon().width(100).height(100)
.points([[0, 0], [0, 100], [100, 100], [100, 0]])
.fillOpacity(0)
.strokeWidth(5)
.stroke(Color.Blue)
// 在 100 * 100 的矩形框中繪制一個(gè)五邊形,起點(diǎn)(50, 0),依次經(jīng)過(guò)(0, 50)、(20, 100)和(80, 100),終點(diǎn)(100, 50)
Polygon().width(100).height(100)
.points([[50, 0], [0, 50], [20, 100], [80, 100], [100, 50]])
.fill(Color.Red)
.fillOpacity(0.6)
}.width('100%').margin({ top: 10 })
}
}
審核編輯 黃宇
-
組件
+關(guān)注
關(guān)注
1文章
556瀏覽量
18940 -
鴻蒙
+關(guān)注
關(guān)注
60文章
2865瀏覽量
45396
發(fā)布評(píng)論請(qǐng)先 登錄
鴻蒙開(kāi)發(fā)基礎(chǔ)-Web組件之cookie操作
開(kāi)源啦?。?!基于鴻蒙ArkTS封裝的圖表組件《McCharts》,大家快來(lái)一起共創(chuàng)
HarmonyOS應(yīng)用開(kāi)發(fā)-Svg組件polygon練習(xí)
鴻蒙開(kāi)發(fā)之ArkTS基礎(chǔ)知識(shí)
鴻蒙實(shí)戰(zhàn)開(kāi)發(fā)ArkTS運(yùn)用:【ai聊天框】

鴻蒙ArkTS媒體組件:Polygon
評(píng)論