Harmony Next - 图形绘制

引子

在这移动端设计越来越华丽、越来越复杂的背景下,应用对页面的美观度要求越来越高的时代。作为移动端开发,掌握如何绘制各种图形和线条还是很有必要的。

在鸿蒙平台上,我们有以下两种组件可以进行绘制:

  • Shape 及其他绘制组件。
  • Canvas 画布组件。

首先,我们来介绍下 Shape 及其他绘制组件。

Shape 及其他绘制组件

当前有七种内置的绘制图形,类型如下:

  • Circle 圆形
  • Ellipse 椭圆形
  • Line 直线
  • Polyline 折线
  • Polygon 多边形
  • Path 路径
  • Rect 矩形

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

  • 选择 Shape 为父组件进行绘制,实现类似 SVG 的效果。
  • 以上七种类型单独使用,绘制指定的图形。

Shape 为父组件的示例代码如下:

scss 复制代码
Shape() {
  Circle().width(150).height(150)
}

上述代码绘制了一个直径为 75 的黑色圆形。如下图所示:

使用绘制组件不仅仅可以绘制图形和线条。我们还可以通过各种属性的配置来修改其样式。

比如,我们可以通过 .fill() 将圆形的填充色改为红色:

scss 复制代码
Circle()
  .width(150)
  .height(150)
  .fill(Color.Red)

样式如下图:

如果想给圆形加个黑色边线,我们可以通过 .stroke() 来添加:

scss 复制代码
Circle()
  .width(150)
  .height(150)
  .fill(Color.Red)
  .stroke(Color.Black)

样式如下图:

需要注意的是,如果我们将圆形放在 Shape 里,如果设置不当的话可能会出现边框被切掉的情况,比如下面的代码:

scss 复制代码
Shape() {
    Circle()
      .width(100)
      .height(100)
      .fill(Color.Red)
      .stroke(Color.Black)
  }

被切效果图如下:

通过上图可以看到,上下左右的四条边中心点都被切掉了一点。我们给 Shape 赋值背景色就可以看出问题所在:

scss 复制代码
Shape() {
  Circle()
    .width(100)
    .height(100)
    .fill(Color.Red)
    .stroke(Color.Black)
}
.backgroundColor(Color.Blue)

打开背景色如下图:

可以看到边框被切的原因就是整个 Shape 没被赋值大小,所以整体紧贴着内部的圆形导致被切。所以解决方案我们可以给 Shape 赋值一个稍大点的宽高,并且调整一下内部原的位移即可解决:

scss 复制代码
Shape() {
  Circle()
    .width(100)
    .height(100)
    .fill(Color.Red)
    .stroke(Color.Black)
}
.viewPort({x: -20, y: -20, width: 150, height: 150})
.backgroundColor(Color.Blue)

位移的修改通过 .viewPort() 来实现。需要注意的是,只给 Shape 设置一个大点的宽高是不管用的,因为内部的圆形默认是从左上角开始布局的,如果不修改其位移,圆形的左边和上边还是会被切。读者可以用下面的代码自行看下效果:

scss 复制代码
Shape() {
  Circle()
    .width(100)
    .height(100)
    .fill(Color.Red)
    .stroke(Color.Black)
}
.width(150)
.height(150)
.backgroundColor(Color.Blue)

我们不仅可以修改边框的颜色,还可以修改边框的宽度、透明度、拐角样式等,具体可以看下面的示例代码:

scss 复制代码
Circle()
  .width(150)
  .height(200)
  .fillOpacity(0)
  .strokeWidth(3)
  .stroke(Color.Red)
  .strokeDashArray([1, 2])

上述代码绘制了一个内部填充透明色、边线宽度为3、边线颜色为红色、边框空隙与边框宽度一比二比例的圆形虚线。样式图如下:

Canvas 画布

使用 Canvas 绘制要比 Shape 或者其他绘制组件复杂一点,我们首先要初始化相关的配置:

arduino 复制代码
//true表明开启抗锯齿
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

接着我们需要在 Canvas 里的 onReady 回调中去绘制我们需要的图形:

kotlin 复制代码
Canvas(this.context)
  .width('50%')
  .height('50%')
  .backgroundColor(Color.Black)
  .onReady(() => {
    this.context.fillStyle = Color.Blue;
    this.context.fillRect(50, 50, 80, 80);
  })

上面的代码就是绘制了一个长度为 80 的正方形,背景色为蓝色,样式如下图:

Canvas 也可以设置边框、透明度、边框颜色等等。

kotlin 复制代码
Canvas(this.context)
  .width('100%')
  .height('100%')
  .backgroundColor('#ffff00')
  .onReady(() =>{
    this.context.beginPath()
    this.context.lineWidth = 8
    this.context.strokeStyle =  '#0000ff'
    this.context.lineJoin = 'round'
    this.context.moveTo(30, 30)
    this.context.lineTo(120, 60)
    this.context.lineTo(30, 110)
    this.context.stroke()
  })

样式图如下:

相关推荐
Georgewu2 小时前
【HarmonyOS】鸿蒙应用开发Text控件常见错误
harmonyos
Georgewu3 小时前
【HarmonyOS】富文本编辑器RichEditor详解
harmonyos
zhanshuo10 小时前
鸿蒙应用调试与测试实战全指南:高效定位问题,性能优化必备技巧+实用代码示例
harmonyos
万少14 小时前
2025中了 聊一聊程序员为什么都要做自己的产品
前端·harmonyos
幽蓝计划1 天前
HarmonyOS NEXT仓颉开发语言实战案例:动态广场
华为·harmonyos
万少1 天前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
幽蓝计划1 天前
HarmonyOS NEXT仓颉开发语言实战案例:电影App
华为·harmonyos
HMS Core1 天前
HarmonyOS免密认证方案 助力应用登录安全升级
安全·华为·harmonyos
生如夏花℡1 天前
HarmonyOS学习记录3
学习·ubuntu·harmonyos
jie_07541 天前
鸿蒙系统(HarmonyOS)4.2 设备上实现无线安装 APK 并调试
华为·harmonyos