0
  • 聊天消息
  • 系統(tǒng)消息
  • 評論與回復(fù)
登錄后你可以
  • 下載海量資料
  • 學(xué)習(xí)在線課程
  • 觀看技術(shù)視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會員中心
創(chuàng)作中心

完善資料讓更多小伙伴認(rèn)識你,還能領(lǐng)取20積分哦,立即完善>

3天內(nèi)不再提示

鴻蒙ArkTS繪制組件:Circle

jf_46214456 ? 來源:jf_46214456 ? 作者:jf_46214456 ? 2024-07-16 09:18 ? 次閱讀

Circle

用于繪制圓形的組件。

說明:
開發(fā)前請熟悉鴻蒙開發(fā)指導(dǎo)文檔:[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]> 該組件從API Version 7開始支持。后續(xù)版本如有新增內(nèi)容,則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

子組件

接口

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

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

參數(shù)

參數(shù)名參數(shù)類型必填參數(shù)描述
widthstringnumber
heightstringnumber

屬性

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

名稱類型描述
fill[ResourceColor]設(shè)置填充區(qū)域顏色。 默認(rèn)值:Color.Black 從API version 9開始,該接口支持在ArkTS卡片中使用。**說明:**異常值按照默認(rèn)值處理。
fillOpacitynumberstring
stroke[ResourceColor]設(shè)置邊框顏色,不設(shè)置時,默認(rèn)沒有邊框。 從API version 9開始,該接口支持在ArkTS卡片中使用。**說明:**異常值不會繪制邊框。
strokeDashArrayArray設(shè)置邊框間隙。 默認(rèn)值:[] 從API version 9開始,該接口支持在ArkTS卡片中使用。**說明:**異常值按照默認(rèn)值處理。
strokeDashOffsetnumberstring
strokeLineCap[LineCapStyle]設(shè)置邊框端點(diǎn)繪制樣式。 默認(rèn)值:LineCapStyle.Butt 從API version 9開始,該接口支持在ArkTS卡片中使用。
strokeLineJoin[LineJoinStyle]設(shè)置邊框拐角繪制樣式。 默認(rèn)值:LineJoinStyle.Miter 從API version 9開始,該接口支持在ArkTS卡片中使用。
strokeMiterLimitnumberstring
strokeOpacitynumberstringHarmonyOSOpenHarmony鴻蒙文檔籽料:mau123789是v直接拿
strokeWidthLength設(shè)置邊框?qū)挾取?默認(rèn)值:1 從API version 9開始,該接口支持在ArkTS卡片中使用。**說明:**該屬性若為string類型, 暫不支持百分比。 異常值按照默認(rèn)值處理。
antiAliasboolean是否開啟抗鋸齒效果。 默認(rèn)值:true 從API version 9開始,該接口支持在ArkTS卡片中使用。

QQ截圖20240715201923.png

示例

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

審核編輯 黃宇

聲明:本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問題,請聯(lián)系本站處理。 舉報投訴
  • 鴻蒙
    +關(guān)注

    關(guān)注

    56

    文章

    2267

    瀏覽量

    42491
收藏 人收藏

    評論

    相關(guān)推薦

    鴻蒙開發(fā)基礎(chǔ)-Web組件之cookie操作

    }) ... } ... 本文章主要是對鴻蒙開發(fā)當(dāng)中ArkTS語言的基礎(chǔ)應(yīng)用實(shí)戰(zhàn),Web組件里的cookie操作。更多的鴻蒙應(yīng)用開發(fā)技術(shù),可以前往我的主頁學(xué)習(xí)更多,下面是一張
    發(fā)表于 01-14 21:31

    鴻蒙ArkTS的起源和簡介

    主流的前端開發(fā)方式。同步的,在運(yùn)行時方面,通過渲染引擎的增強(qiáng)(平臺無關(guān)的自繪制機(jī)制、聲明式UI后端設(shè)計、動態(tài)布局/多態(tài)UI組件等),語言編譯器和運(yùn)行時的優(yōu)化增強(qiáng)(代碼預(yù)編譯、高效FFI-Foreign
    發(fā)表于 01-16 16:23

    HarmonyOS應(yīng)用開發(fā)-Svg組件circle

    、animateTransform。三、屬性支持Svg組件通用屬性和以下屬性。四、案例 效果:完整代碼地址為:https://gitee.com/jltfcloudcn/jump_to/tree/master/svg%E7%BB%84%E4%BB%B6_circle/
    發(fā)表于 01-19 09:39

    HarmonyOS/OpenHarmony應(yīng)用開發(fā)-ArkTS的聲明式開發(fā)范式

    接近自然語義的編程方式,讓開發(fā)者可以直觀地描述UI界面,不必關(guān)心框架如何實(shí)現(xiàn)UI繪制和渲染,實(shí)現(xiàn)極簡高效開發(fā)。開發(fā)框架不僅從組件、動效和狀態(tài)管理三個維度來提供UI能力,還提供了系統(tǒng)能力接口,實(shí)現(xiàn)系統(tǒng)
    發(fā)表于 01-17 15:09

    鴻蒙開發(fā)之ArkTS基礎(chǔ)知識

    一、ArkTS簡介 ArkTS是HarmonyOS優(yōu)選的主力應(yīng)用開發(fā)語言。它在TypeScript(簡稱TS)的基礎(chǔ)上,匹配了鴻蒙的ArkUI框架,擴(kuò)展了聲明式UI、狀態(tài)管理等相應(yīng)的能力,讓開發(fā)者以
    的頭像 發(fā)表于 01-24 16:44 ?1783次閱讀
    <b class='flag-5'>鴻蒙</b>開發(fā)之<b class='flag-5'>ArkTS</b>基礎(chǔ)知識

    鴻蒙實(shí)戰(zhàn)開發(fā)ArkTS運(yùn)用:【ai聊天框】

    用一個ArkTS編寫的HarmonyOS原生聊天UI框架,提供了開箱即用的聊天對話組件。
    的頭像 發(fā)表于 03-08 15:38 ?669次閱讀
    <b class='flag-5'>鴻蒙</b>實(shí)戰(zhàn)開發(fā)<b class='flag-5'>ArkTS</b>運(yùn)用:【ai聊天框】

    鴻蒙ArkTS容器組件:Flex

    以彈性方式布局子組件的容器組件。
    的頭像 發(fā)表于 07-08 10:19 ?276次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b>容器<b class='flag-5'>組件</b>:Flex

    鴻蒙ArkTS容器組件:GridCol

    柵格子組件,必須作為柵格容器組件([GridRow])的子組件使用。
    的頭像 發(fā)表于 07-08 15:17 ?262次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b>容器<b class='flag-5'>組件</b>:GridCol

    鴻蒙ArkTS容器組件:Scroll

    可滾動的容器組件,當(dāng)子組件的布局尺寸超過父組件的尺寸時,內(nèi)容可以滾動。
    的頭像 發(fā)表于 07-12 15:24 ?717次閱讀

    鴻蒙ArkTS容器組件:Stack

    堆疊容器,子組件按照順序依次入棧,后一個子組件覆蓋前一個子組件。
    的頭像 發(fā)表于 07-15 18:23 ?679次閱讀

    鴻蒙ArkTS媒體組件:Ellipse

    橢圓繪制組件
    的頭像 發(fā)表于 07-16 15:20 ?216次閱讀

    鴻蒙ArkTS媒體組件:Line

    直線繪制組件。
    的頭像 發(fā)表于 07-17 10:25 ?249次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b>媒體<b class='flag-5'>組件</b>:Line

    鴻蒙ArkTS媒體組件:Polyline

    折線繪制組件。
    的頭像 發(fā)表于 07-17 09:43 ?173次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b>媒體<b class='flag-5'>組件</b>:Polyline

    鴻蒙ArkTS媒體組件:Polygon

    多邊形繪制組件。
    的頭像 發(fā)表于 07-17 15:05 ?217次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b>媒體<b class='flag-5'>組件</b>:Polygon

    鴻蒙ArkTS媒體組件:Path

    路徑繪制組件,根據(jù)繪制路徑生成封閉的自定義形狀。
    的頭像 發(fā)表于 07-18 10:24 ?231次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b>媒體<b class='flag-5'>組件</b>:Path