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()
  })

样式图如下：