实现图片计数功能鸿蒙示例代码

本文原创发布在华为开发者社区。

介绍

本项目基于Canvas组件进行图片计数、图片局部涂鸦遮盖、图片局部自动绘制圆圈路径功能实现：

• 支持图片内部圆圈计数，可通过按钮增加或减少已有数值。
• 支持画笔对图片进行局部涂鸦遮盖，可切换画笔颜色以及线条粗细程度，可用橡皮擦功能撤销当前涂鸦路径
• 支持图片局部自动绘制圆圈路径并填充颜色以及数字标识，可调整切换圆圈路径底部颜色

实现图片计数功能源码链接

效果预览

使用说明

• 打开应用，展示待计数的图片以及三个按钮。
• 点击遮盖笔按钮，即可选择涂鸦线条粗细、颜色，然后进行遮盖涂鸦。
• 点击计数按钮，应用会跳转至计数页面。
• 点击橡皮擦按钮，实现消除遮盖涂鸦的效果。

实现思路

构造数据结构

构造ResponseData等结构，组成圆圈识别坐标相关响应体结构。

class ResponseData {
  count: number;
  unit: string;
  coordinate: Coordinate;

  constructor() {
    this.count = 0;
    this.unit = '';
    this.coordinate = new Coordinate();
  }
}
···

构建主页即图片涂鸦页

1. 设置画笔组件。通过设置画图效果即预览线条粗细，画笔大小即线条粗细，画笔颜色三个属性，完成遮盖笔涂鸦的构建。

@Builder SetPaint() {
Column({ space: 30 }) {
    Row() {
    Text('画图效果：')
    Path()
    ···
    }

    Row() {
    Text('画笔大小：')
    ···
    }

    Row() {
    Text('画笔颜色：')
    ForEach(this.COLORS, (color: Color) => {
        ···
    })
    }
}.width('100%').margin({ top: 30 })
}

2. 利用Canvas进行画图，调用onTouch进行手指操作的跟踪处理。

Canvas(this.context)
    .width('100%')
    .height('100%')
    .onReady(() => {
    })
    .onTouch((event) => {
        ···
    }

3. 构造橡皮擦组件，点击后即可进行消除操作。

if (this.isEraserMode) {
//橡皮擦模式
this.context.clearRect(event.touches[0].x, event.touches[0].y, 20, 20);
} else {
this.context.moveTo(this.x, this.y);
this.x = event.touches[0].x;
this.y = event.touches[0].y;
this.context.lineTo(this.x, this.y);
this.context.stroke();
}

4. 设置三个按钮，点击后分别实现橡皮擦功能、计数功能、遮盖涂鸦功能。

Button('橡皮擦').onClick(() => this.isEraserMode = !this.isEraserMode)
Button('计数').onClick(() => {
    ···
})
Button('遮盖笔')
.onClick(() => {
    ···
}

图片计数页面的实现

1. 构造DrawCircle()函数，解析后端相关json字符串，实际应用需涉及http字段处理，图片实际x,y坐标对应canvas画布有缩放。

DrawCircle() {
let resultJson: ResponseResult = JSON.parse(this.circleStr)
if (resultJson.code === '200') {
    this.unit = resultJson.data.unit;
    this.circleAmount = resultJson.data.count;
    let predictions: Prediction[] = resultJson.data.coordinate.predictions;
    let offContext = this.offCanvas.getContext("2d", this.settings)
    ···
    let image = this.offCanvas.transferToImageBitmap()
    this.context.transferFromImageBitmap(image)
 }
}

2. 构造ImageCanvas()，通过Stack层叠展示Image和Canvas组件。

ImageCanvas() {
Stack({ alignContent: Alignment.TopEnd }) {
    Image($r('app.media.imageCanvas'))

    Canvas(this.context)
    .onReady(() =>{
        this.DrawCircle()
    })
}
}

3. 构造SetCircle()，设置圆圈画布组件，可以修改圆圈颜色。

  @Builder SetCircle() {
    Column({ space: 30 }) {
      Row() {
        Text('圆圈颜色：')
        ForEach(this.COLORS, (color: Color) => {
          Stack() {
            ··
          }
        })
      }
    }.width('100%').margin({ top: 30 })
  }