Harmony Next - 图形绘制

引子

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

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

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

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

Shape 及其他绘制组件

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

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

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

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

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

Shape() {
  Circle().width(150).height(150)
}

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

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

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

Circle()
  .width(150)
  .height(150)
  .fill(Color.Red)

样式如下图：

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

Circle()
  .width(150)
  .height(150)
  .fill(Color.Red)
  .stroke(Color.Black)

样式如下图：

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

Shape() {
    Circle()
      .width(100)
      .height(100)
      .fill(Color.Red)
      .stroke(Color.Black)
  }

被切效果图如下：

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

Shape() {
  Circle()
    .width(100)
    .height(100)
    .fill(Color.Red)
    .stroke(Color.Black)
}
.backgroundColor(Color.Blue)

打开背景色如下图：

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

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 设置一个大点的宽高是不管用的，因为内部的圆形默认是从左上角开始布局的，如果不修改其位移，圆形的左边和上边还是会被切。读者可以用下面的代码自行看下效果：

Shape() {
  Circle()
    .width(100)
    .height(100)
    .fill(Color.Red)
    .stroke(Color.Black)
}
.width(150)
.height(150)
.backgroundColor(Color.Blue)

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

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

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

Canvas 画布

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

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

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

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 也可以设置边框、透明度、边框颜色等等。

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

样式图如下：