W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
直線繪制組件。
該組件從API Version 7開始支持。后續(xù)版本如有新增內(nèi)容,則采用上角標單獨標記該內(nèi)容的起始版本。
Line(value?: {width?: string | number, height?: string | number})
從API version 9開始,該接口支持在ArkTS卡片中使用。
參數(shù):
參數(shù)名 | 參數(shù)類型 | 必填 | 默認值 | 參數(shù)描述 |
---|---|---|---|---|
width | string | number | 否 | 0 | 寬度。 說明: 異常值按照默認值處理。 |
height | string | number | 否 | 0 | 高度。 說明: 異常值按照默認值處理。 |
除支持通用屬性外,還支持以下屬性:
名稱 | 類型 | 默認值 | 描述 |
---|---|---|---|
startPoint | Array<Length> | [0, 0] | 直線起點坐標點(相對坐標),單位vp。 從API version 9開始,該接口支持在ArkTS卡片中使用。 說明: 異常值按照默認值處理。 |
endPoint | Array<Length> | [0, 0] | 直線終點坐標點(相對坐標),單位vp。 從API version 9開始,該接口支持在ArkTS卡片中使用。 說明: 異常值按照默認值處理。 |
fill | Color.Black | 設(shè)置填充區(qū)域顏色。 從API version 9開始,該接口支持在ArkTS卡片中使用。 說明: Line組件無法形成閉合區(qū)域,該屬性設(shè)置無效。 | |
fillOpacity | number | string | Resource | 1 | 設(shè)置填充區(qū)域透明度。 從API version 9開始,該接口支持在ArkTS卡片中使用。 說明: Line組件無法形成閉合區(qū)域,該屬性設(shè)置無效。 |
stroke | - | 設(shè)置邊框顏色,不設(shè)置時,默認沒有邊框線條。 從API version 9開始,該接口支持在ArkTS卡片中使用。 說明: 異常值不會繪制邊框線條。 | |
strokeDashArray | Array<Length> | [] | 設(shè)置線條間隙。 從API version 9開始,該接口支持在ArkTS卡片中使用。 說明: 異常值按照默認值處理。 |
strokeDashOffset | number | string | 0 | 線條繪制起點的偏移量。 從API version 9開始,該接口支持在ArkTS卡片中使用。 說明: 異常值按照默認值處理。 |
strokeLineCap | LineCapStyle.Butt | 設(shè)置線條端點繪制樣式。 從API version 9開始,該接口支持在ArkTS卡片中使用。 | |
strokeLineJoin | LineJoinStyle.Miter | 設(shè)置線條拐角繪制樣式。 從API version 9開始,該接口支持在ArkTS卡片中使用。 說明: Line組件無法形成拐角,該屬性設(shè)置無效。 | |
strokeMiterLimit | number | string | 4 | 設(shè)置銳角繪制成斜角的極限值。 從API version 9開始,該接口支持在ArkTS卡片中使用。 說明: Line組件無法設(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è)置線條寬度。 從API version 9開始,該接口支持在ArkTS卡片中使用。 說明: 該屬性若為string類型, 暫不支持百分比。 異常值按照默認值處理。 |
antiAlias | boolean | true | 是否開啟抗鋸齒效果。 從API version 9開始,該接口支持在ArkTS卡片中使用。 |
- // xxx.ets
- @Entry
- @Component
- struct LineExample {
- build() {
- Column({ space: 10 }) {
- // 線條繪制的起止點坐標均是相對于Line組件本身繪制區(qū)域的坐標
- Line()
- .width(200)
- .height(150)
- .startPoint([0, 0])
- .endPoint([50, 100])
- .stroke(Color.Black)
- .backgroundColor('#F5F5F5')
- Line()
- .width(200)
- .height(150)
- .startPoint([50, 50])
- .endPoint([150, 150])
- .strokeWidth(5)
- .stroke(Color.Orange)
- .strokeOpacity(0.5)
- .backgroundColor('#F5F5F5')
- // strokeDashOffset用于定義關(guān)聯(lián)虛線strokeDashArray數(shù)組渲染時的偏移
- Line()
- .width(200)
- .height(150)
- .startPoint([0, 0])
- .endPoint([100, 100])
- .stroke(Color.Black)
- .strokeWidth(3)
- .strokeDashArray([10, 3])
- .strokeDashOffset(5)
- .backgroundColor('#F5F5F5')
- // 當坐標點設(shè)置的值超出Line組件的寬高范圍時,線條會畫出組件繪制區(qū)域
- Line()
- .width(50)
- .height(50)
- .startPoint([0, 0])
- .endPoint([100, 100])
- .stroke(Color.Black)
- .strokeWidth(3)
- .strokeDashArray([10, 3])
- .backgroundColor('#F5F5F5')
- }
- }
- }
- // xxx.ets
- @Entry
- @Component
- struct LineExample1 {
- build() {
- Row({ space: 10 }) {
- // 當LineCapStyle值為Butt時
- Line()
- .width(100)
- .height(200)
- .startPoint([50, 50])
- .endPoint([50, 200])
- .stroke(Color.Black)
- .strokeWidth(20)
- .strokeLineCap(LineCapStyle.Butt)
- .backgroundColor('#F5F5F5').margin(10)
- // 當LineCapStyle值為Round時
- Line()
- .width(100)
- .height(200)
- .startPoint([50, 50])
- .endPoint([50, 200])
- .stroke(Color.Black)
- .strokeWidth(20)
- .strokeLineCap(LineCapStyle.Round)
- .backgroundColor('#F5F5F5')
- // 當LineCapStyle值為Square時
- Line()
- .width(100)
- .height(200)
- .startPoint([50, 50])
- .endPoint([50, 200])
- .stroke(Color.Black)
- .strokeWidth(20)
- .strokeLineCap(LineCapStyle.Square)
- .backgroundColor('#F5F5F5')
- }
- }
- }
- // xxx.ets
- @Entry
- @Component
- struct LineExample {
- build() {
- Column() {
- Line()
- .width(300)
- .height(30)
- .startPoint([50, 30])
- .endPoint([300, 30])
- .stroke(Color.Black)
- .strokeWidth(10)
- // 設(shè)置strokeDashArray的數(shù)組間隔為 50
- Line()
- .width(300)
- .height(30)
- .startPoint([50, 20])
- .endPoint([300, 20])
- .stroke(Color.Black)
- .strokeWidth(10)
- .strokeDashArray([50])
- // 設(shè)置strokeDashArray的數(shù)組間隔為 50, 10
- Line()
- .width(300)
- .height(30)
- .startPoint([50, 20])
- .endPoint([300, 20])
- .stroke(Color.Black)
- .strokeWidth(10)
- .strokeDashArray([50, 10])
- // 設(shè)置strokeDashArray的數(shù)組間隔為 50, 10, 20
- Line()
- .width(300)
- .height(30)
- .startPoint([50, 20])
- .endPoint([300, 20])
- .stroke(Color.Black)
- .strokeWidth(10)
- .strokeDashArray([50, 10, 20])
- // 設(shè)置strokeDashArray的數(shù)組間隔為 50, 10, 20, 30
- Line()
- .width(300)
- .height(30)
- .startPoint([50, 20])
- .endPoint([300, 20])
- .stroke(Color.Black)
- .strokeWidth(10)
- .strokeDashArray([50, 10, 20, 30])
- }
- }
- }
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: