HarmonyOS 鸿蒙Next 图片计数

发布于 1周前 作者 h691938207 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 图片计数

介绍

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

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

图片计数案例源码链接

效果图

使用说明

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

实现思路

构造数据结构

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

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

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

构建主页即图片涂鸦页

  1. 设置画笔组件。通过设置画图效果即预览线条粗细，画笔大小即线条粗细，画笔颜色三个属性，完成遮盖笔涂鸦的构建。
[@Builder](/user/Builder) SetPaint() {
Column({ space: 30 }) {
    Row() {
    Text('画图效果：')
    Path()
    ···
    }

<span class="hljs-title class_">Row</span>() {
<span class="hljs-title class_">Text</span>(<span class="hljs-string">'画笔大小：'</span>)
···
}

<span class="hljs-title class_">Row</span>() {
<span class="hljs-title class_">Text</span>(<span class="hljs-string">'画笔颜色：'</span>)
<span class="hljs-title class_">ForEach</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">COLORS</span>, <span class="hljs-function">(<span class="hljs-params">color: Color</span>) =&gt;</span> {
    ···
})
}

}.width(‘100%’).margin({ top: 30 })
}

  1. 利用Canvas进行画图，调用onTouch进行手指操作的跟踪处理。
Canvas(this.context)
    .width('100%')
    .height('100%')
    .onReady(() => {
    })
    .onTouch((event) => {
        ···
    }
  1. 构造橡皮擦组件，点击后即可进行消除操作。
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();
}
  1. 设置三个按钮，点击后分别实现橡皮擦功能、计数功能、遮盖涂鸦功能。
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)
 }
}
  1. 构造ImageCanvas()，通过Stack层叠展示Image和Canvas组件。
ImageCanvas() {
Stack({ alignContent: Alignment.TopEnd }) {
    Image($r('app.media.imageCanvas'))

<span class="hljs-title class_">Canvas</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">context</span>)
.<span class="hljs-title function_">onReady</span>(<span class="hljs-function">() =&gt;</span>{
    <span class="hljs-variable language_">this</span>.<span class="hljs-title class_">DrawCircle</span>()
})

}
}

  1. 构造SetCircle()，设置圆圈画布组件，可以修改圆圈颜色。
  [@Builder](/user/Builder) SetCircle() {
    Column({ space: 30 }) {
      Row() {
        Text('圆圈颜色：')
        ForEach(this.COLORS, (color: Color) => {
          Stack() {
            ··
          }
        })
      }
    }.width('100%').margin({ top: 30 })
  }

工程目录

entry/src/main/ets/
|---entryability
|   |---EntryAbility.ets
|---entrybackupability
|   |---EntryBackupAbility.ets            
|---pages
|   |---PaintPage.ets      // 图片涂鸦页
|   |---CountPage.ets      // 图片计数页
|---viewModel
|   |---ResponseResult.ets   // 圆圈识别坐标相关响应体结构

约束与限制

  • IDE：DevEco Studio NEXT Developer Beta1 5.0.3.403
  • SDK：HarmonyOS NEXT Developer Beta1 SDK, based on OpenHarmony SDK Ohos_sdk_public 5.0.0.25 (API Version 12 Beta1)

更多关于HarmonyOS 鸿蒙Next 图片计数的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
1 回复

更多关于HarmonyOS 鸿蒙Next 图片计数的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，图片计数功能通常通过调用鸿蒙系统提供的媒体库和图像处理API来实现。以下是一段简化的鸿蒙场景化代码，用于图片中的物体计数（以简单物体为例，如圆形）：

import media from '[@ohos](/user/ohos).multimedia.media';
import imageProcess from '[@ohos](/user/ohos).multimedia.imageProcess';

// 加载图片
let bitmap = media.createImageBitmapFromFile("path/to/image.jpg");

// 图像预处理（如灰度化）
let grayBitmap = imageProcess.convertToGrayscale(bitmap);

// 边缘检测
let edgeBitmap = imageProcess.cannyEdgeDetection(grayBitmap, 100, 200);

// 物体识别（简单圆形检测）
let circles = [];
for (let y = 0; y < edgeBitmap.height; y++) {
    for (let x = 0; x < edgeBitmap.width; x++) {
        if (isCircleCenter(edgeBitmap, x, y)) {
            circles.push({x: x, y: y});
        }
    }
}

// 输出物体数量
console.log("Number of circles detected: " + circles.length);

// 自定义函数：检测是否为中心点（简化示例）
function isCircleCenter(bitmap, x, y) {
    // 实现圆心检测逻辑
    return false; // 示例返回值，需根据实际算法实现
}

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html
回到顶部