codecamp

绘制几何图形(Shape)

绘制组件用于在页面绘制图形,Shape组件是绘制组件的父组件,父组件中会描述所有绘制组件均支持的通用属性。具体用法请参考Shape

创建绘制组件

绘制组件可以由以下两种形式创建:

  • 绘制组件使用Shape作为父组件,实现类似SVG的效果。接口调用为以下形式:
    1. Shape(value?: PixelMap)

    该接口用于创建带有父组件的绘制组件,其中value用于设置绘制目标,可将图形绘制在指定的PixelMap对象中,若未设置,则在当前绘制目标中进行绘制。

    1. Shape() {
    2. Rect().width(300).height(50)
    3. }
  • 绘制组件单独使用,用于在页面上绘制指定的图形。有7种绘制类型,分别为Circle(圆形)、Ellipse(椭圆形)、Line(直线)、Polyline(折线)、Polygon(多边形)、Path(路径)、Rect(矩形)。以Circle的接口调用为例:
    1. Circle(options?: {width?: string | number, height?: string | number}
    该接口用于在页面绘制圆形,其中width用于设置圆形的宽度,height用于设置圆形的高度,圆形直径由宽高最小值确定。
    1. Circle({ width: 150, height: 150 })

形状视口viewport

  1. viewPort{ x?: number | string, y?: number | string, width?: number | string, height?: number | string }

形状视口viewport指定用户空间中的一个矩形,该矩形映射到为关联的 SVG 元素建立的视区边界。viewport属性的值包含x、y、width和height四个可选参数,x 和 y 表示视区的左上角坐标,width和height表示其尺寸。

以下3个示例讲解Viewport具体用法:

  • 通过形状视口对图形进行放大与缩小。
    1. // 画一个宽高都为150的圆
    2. Text('原始尺寸Circle组件')
    3. Circle({width: 75, height: 75}).fill('#E87361')
    4. Row({space:10}) {
    5. Column() {
    6. // 创建一个宽高都为150的shape组件,背景色为黄色,一个宽高都为75的viewport。用一个蓝色的矩形来填充viewport,在viewport中绘制一个直径为75的圆。
    7. // 绘制结束,viewport会根据组件宽高放大两倍
    8. Text('shape内放大的Circle组件')
    9. Shape() {
    10. Rect().width('100%').height('100%').fill('#0097D4')
    11. Circle({width: 75, height: 75}).fill('#E87361')
    12. }
    13. .viewPort({x: 0, y: 0, width: 75, height: 75})
    14. .width(150)
    15. .height(150)
    16. .backgroundColor('#F5DC62')
    17. }
    18. Column() {
    19. // 创建一个宽高都为150的shape组件,背景色为黄色,一个宽高都为300的viewport。用一个绿色的矩形来填充viewport,在viewport中绘制一个直径为75的圆。
    20. // 绘制结束,viewport会根据组件宽高缩小两倍。
    21. Text('Shape内缩小的Circle组件')
    22. Shape() {
    23. Rect().width('100%').height('100%').fill('#BDDB69')
    24. Circle({width: 75, height: 75}).fill('#E87361')
    25. }
    26. .viewPort({x: 0, y: 0, width: 300, height: 300})
    27. .width(150)
    28. .height(150)
    29. .backgroundColor('#F5DC62')
    30. }
    31. }

  • 创建一个宽高都为300的shape组件,背景色为黄色,一个宽高都为300的viewport。用一个蓝色的矩形来填充viewport,在viewport中绘制一个半径为75的圆。
    1. Shape() {
    2. Rect().width("100%").height("100%").fill("#0097D4")
    3. Circle({ width: 150, height: 150 }).fill("#E87361")
    4. }
    5. .viewPort({ x: 0, y: 0, width: 300, height: 300 })
    6. .width(300)
    7. .height(300)
    8. .backgroundColor("#F5DC62")

  • 创建一个宽高都为300的shape组件,背景色为黄色,创建一个宽高都为300的viewport。用一个蓝色的矩形来填充viewport,在viewport中绘制一个半径为75的圆,将viewport向右方和下方各平移150。
    1. Shape() {
    2. Rect().width("100%").height("100%").fill("#0097D4")
    3. Circle({ width: 150, height: 150 }).fill("#E87361")
    4. }
    5. .viewPort({ x: -150, y: -150, width: 300, height: 300 })
    6. .width(300)
    7. .height(300)
    8. .backgroundColor("#F5DC62")

自定义样式

绘制组件支持通过各种属性对组件样式进行更改。

  • 通过fill可以设置组件填充区域颜色。
    1. Path()
    2. .width(100)
    3. .height(100)
    4. .commands('M150 0 L300 300 L0 300 Z')
    5. .fill("#E87361")

  • 通过stroke可以设置组件边框颜色。
    1. Path()
    2. .width(100)
    3. .height(100)
    4. .fillOpacity(0)
    5. .commands('M150 0 L300 300 L0 300 Z')
    6. .stroke(Color.Red)

  • 通过strokeOpacity可以设置边框透明度。
    1. Path()
    2. .width(100)
    3. .height(100)
    4. .fillOpacity(0)
    5. .commands('M150 0 L300 300 L0 300 Z')
    6. .stroke(Color.Red)
    7. .strokeWidth(10)
    8. .strokeOpacity(0.2)

  • 通过strokeLineJoin可以设置线条拐角绘制样式。拐角绘制样式分为Bevel(使用斜角连接路径段)、Miter(使用尖角连接路径段)、Round(使用圆角连接路径段)。
    1. Polyline()
    2. .width(100)
    3. .height(100)
    4. .fillOpacity(0)
    5. .stroke(Color.Red)
    6. .strokeWidth(8)
    7. .points([[20, 0], [0, 100], [100, 90]])
    8. // 设置折线拐角处为圆弧
    9. .strokeLineJoin(LineJoinStyle.Round)

  • 通过strokeMiterLimit设置斜接长度与边框宽度比值的极限值。
    斜接长度表示外边框外边交点到内边交点的距离,边框宽度即strokeWidth属性的值。strokeMiterLimit取值需大于等于1,且在strokeLineJoin属性取值LineJoinStyle.Miter时生效。
    1. Polyline()
    2. .width(100)
    3. .height(100)
    4. .fillOpacity(0)
    5. .stroke(Color.Red)
    6. .strokeWidth(10)
    7. .points([[20, 0], [20, 100], [100, 100]])
    8. // 设置折线拐角处为尖角
    9. .strokeLineJoin(LineJoinStyle.Miter)
    10. // 设置斜接长度与线宽的比值
    11. .strokeMiterLimit(1/Math.sin(45))
    12. Polyline()
    13. .width(100)
    14. .height(100)
    15. .fillOpacity(0)
    16. .stroke(Color.Red)
    17. .strokeWidth(10)
    18. .points([[20, 0], [20, 100], [100, 100]])
    19. .strokeLineJoin(LineJoinStyle.Miter)
    20. .strokeMiterLimit(1.42)

  • 通过antiAlias设置是否开启抗锯齿,默认值为true(开启抗锯齿)。
    1. //开启抗锯齿
    2. Circle()
    3. .width(150)
    4. .height(200)
    5. .fillOpacity(0)
    6. .strokeWidth(5)
    7. .stroke(Color.Black)

    1. //关闭抗锯齿
    2. Circle()
    3. .width(150)
    4. .height(200)
    5. .fillOpacity(0)
    6. .strokeWidth(5)
    7. .stroke(Color.Black)
    8. .antiAlias(false)

场景示例

  • 在Shape的(-80, -5)点绘制一个封闭路径,填充颜色0x317AF7,线条宽度10,边框颜色红色,拐角样式锐角(默认值)。
    1. @Entry
    2. @Component
    3. struct ShapeExample {
    4. build() {
    5. Column({ space: 10 }) {
    6. Shape() {
    7. Path().width(200).height(60).commands('M0 0 L400 0 L400 150 Z')
    8. }
    9. .viewPort({ x: -80, y: -5, width: 500, height: 300 })
    10. .fill(0x317AF7)
    11. .stroke(Color.Red)
    12. .strokeWidth(3)
    13. .strokeLineJoin(LineJoinStyle.Miter)
    14. .strokeMiterLimit(5)
    15. }.width('100%').margin({ top: 15 })
    16. }
    17. }

  • 绘制一个直径为150的圆,和一个直径为150、线条为红色虚线的圆环(宽高设置不一致时以短边为直径)。
    1. @Entry
    2. @Component
    3. struct CircleExample {
    4. build() {
    5. Column({ space: 10 }) {
    6. //绘制一个直径为150的圆
    7. Circle({ width: 150, height: 150 })
    8. //绘制一个直径为150、线条为红色虚线的圆环
    9. Circle()
    10. .width(150)
    11. .height(200)
    12. .fillOpacity(0)
    13. .strokeWidth(3)
    14. .stroke(Color.Red)
    15. .strokeDashArray([1, 2])
    16. }.width('100%')
    17. }
    18. }

显示图片(Image)
使用画布绘制自定义图形(Canvas)
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录
HAR

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }