华为仓颉鸿蒙HarmonyOS NEXT仓颉绘制组件Circle 、Line

用于绘制圆形的组件。

👇🏻👇🏻👇🏻求关注👇🏻👇🏻👇🏻

说明

Circle暂不支持混合页面场景。

子组件

无

构造函数

init()

public init()

init(Length, Length)

public init(width: Length, height: Length)

参数名	参数类型	必填	默认值	描述
width	Length	否	0.vp	宽度。
height	Length	否	0.vp	高度。

init(Int64, Int64)

public init(width: Int64, height: Int64)

参数名	参数类型	必填	默认值	描述
width	Int64	否	0	宽度。
height	Int64	否	0	高度。

init(Float64, Float64)

public init(width: Float64, height: Float64)

参数名	参数类型	必填	默认值	描述
width	Float64	否	0	宽度。
height	Float64	否	0	高度。

函数

fill、fillOpacity、stroke、strokeDashArray、strokeDashOffset、strokeLineCap、strokeLineJoin、strokeMiterLimit、strokeOpacity、strokeWidth、antiAlias 见 Shape 章节。

通用属性/通用事件

通用属性：除文本样式外，其余全部支持。

通用事件：全部支持。

示例代码

import ohos.base.*
    import ohos.component.*
    import ohos.state_manage.*
    import ohos.state_macro_manage.*
    
    @Entry
    @Component
    class MyView {
        func build() {
            Column(10) {
                // 绘制一个直径为150的圆
                Circle(width: 150, height: 150)
                // 绘制一个直径为150、线条为红色虚线的圆环（宽高设置不一致时以短边为直径）
                Circle()
                .width(150)
                .height(200)
                .fillOpacity(0)
                .strokeWidth(3)
                .stroke(Color.RED)
                .strokeDashArray([1, 2])
            }.width(100.percent)
        }
    }

直线绘制组件。

说明

Line暂不支持混合页面场景。

子组件

无

构造函数

init(Length, Length)

public init(width!: Length, height!: Length)

绘制一条指定高度和宽度的直线。

参数名	参数类型	必填	默认值	描述
width	Length	否	0.vp	宽度。
height	Length	否	0.vp	高度。

init(Int64, Int64)

public init(width!: Int64, height!: Int64)

绘制一条指定高度和宽度的直线。

参数名	参数类型	必填	默认值	描述
width	Int64	否	0	宽度。
height	Int64	否	0	高度。

init(Float64, Float64)

public init(width!: Float64, height!: Float64)

绘制一条指定高度和宽度的直线。

参数名	参数类型	必填	默认值	描述
width	Float64	否	0	宽度。
height	Float64	否	0	高度。

init()

public init()

构造一个在给定范围内选择评分的组件。

函数

startPoint((Float64, Float64))

public func startPoint(value: (Float64, Float64)): This

设置直线起点坐标点（相对坐标）。

参数名	参数类型	必填	默认值	描述
value	(Float64, Float64)	是	-	设置直线起点坐标点（相对坐标）。

startPoint((Int64, Int64))

public func startPoint(value: (Int64, Int64)): This

设置直线起点坐标点（相对坐标）。

参数名	参数类型	必填	默认值	描述
value	(Int64, Int64)	是	-	设置直线起点坐标点（相对坐标）。

endPoint((Float64, Float64))

public func endPoint(value: (Float64, Float64)): This

设置直线终点坐标点（相对坐标）。

参数名	参数类型	必填	默认值	描述
value	(Float64, Float64)	是	-	设置直线终点坐标点（相对坐标）。

endPoint((Int64, Int64))

public func endPoint(value: (Int64, Int64)): This

设置直线终点坐标点（相对坐标）。

说明

函数 fill、fillOpacity、stroke、strokeDashArray、
strokeDashOffset、 strokeLineCap、strokeLineJoin、
strokeMiterLimit、strokeOpacity、strokeWidth、
antiAlias 见 Shape 章节。

参数名	参数类型	必填	默认值	描述
value	(Int64, Int64)	是	-	设置直线终点坐标点（相对坐标）。

通用属性/通用事件

通用属性：除文本样式外，其余全部支持。

通用事件：全部支持。

示例代码

import ohos.base.*
    import ohos.component.*
    import ohos.state_manage.*
    import ohos.state_macro_manage.*
    
    @Entry
    @Component
    class MyView {
        func build() {
            Column(10) {
                // 线条绘制的起止点坐标均是相对于Line组件本身绘制区域的坐标
                Line()
                .width(200)
                .height(150)
                .startPoint((0, 0))
                .endPoint((50, 100))
                .stroke(Color.BLACK)
                .backgroundColor(0xF5F5F5)
                Line()
                .width(200)
                .height(150)
                .startPoint((50, 50))
                .endPoint((150, 150))
                .strokeWidth(5)
                .stroke(Color.RED)
                .strokeOpacity(0.5)
                .backgroundColor(0xF5F5F5)
                // strokeDashOffset用于定义关联虚线strokeDashArray数组渲染时的偏移
                Line()
                .width(200)
                .height(150)
                .startPoint((0, 0))
                .endPoint((100, 100))
                .stroke(Color.BLACK)
                .strokeWidth(3)
                .strokeDashArray([10, 3])
                .strokeDashOffset(5)
                .backgroundColor(0xF5F5F5)
                // 当坐标点设置的值超出Line组件的宽高范围时，线条会画出组件绘制区域
                Line()
                .width(50)
                .height(50)
                .startPoint((0, 0))
                .endPoint((100, 100))
                .stroke(Color.BLACK)
                .strokeWidth(3)
                .strokeDashArray([10, 3])
                .backgroundColor(0xF5F5F5)
            }
        }
    }

如对您有帮助，帮忙点个“在看 、关注” 让更多的人受益~！

技术交流群可加wx“LB-9191”备注cangjie