Untitled

import AppColors from '../../common/AppColors'
import { detect } from '../../common/utils/Detect'
import Logger from '../../common/utils/Logger'
import { getPixelMap, photoPickerGetUri } from '../../common/utils/PictureSaving'
import { showToast } from '../../common/utils/ToastUtils'
// 看看什么一个流程
@Component
export struct ImagePlaceHolder {
  @State isSubmit: boolean = false
  @State isDetect: boolean = false //控制检测结果显示区域的可见性
  @State detectResult: string = ``
  @State classes: string[] = [] //检测到的类别名称
  @State boxes: number[][] = [] //检测框的坐标
  @State scores: number[] = [] //置信度
  @State preImage: PixelMap = new Object() as PixelMap //存储预览图像的PixelMap对象

  // canvas参数
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  @State canvasWidth: number = 0
  @State canvasHeight: number = 0

  //组件的UI结构
  build() {
    NavDestination() {
      Column() {
        Image(this.preImage)
          .alt($r('app.media.undraw_Images'))
          .width("100%")
          .autoResize(true)
          .backgroundColor($r("app.color.circle_color"))
          .borderRadius(25)

        Button() {
          Row() {
            if (this.isSubmit) {
              LoadingProgress().width(20).height(20).color(0xFFFFFF)
              Text('检测中……').fontSize(16).fontWeight(FontWeight.Bold).fontColor(0xFFFFFF)
            } else {
              Image($r("app.media.upload")).width(22).margin({ right: 10 })
              Text('上传图片').fontSize(16).fontWeight(FontWeight.Bold).fontColor(0xFFFFFF)
            }
          }
          .padding({
            left: 12,
            right: 12,
            top: 10,
            bottom: 10
          })
          .borderRadius(20)
        }
        .onClick(async () => {
          try {
            let uris = await photoPickerGetUri(1) //从图库中选择1张图片
            if (uris.length == 1) {
              this.isSubmit = true;
              Logger.info('picPicker: ' + uris[0]);
              this.preImage = await getPixelMap(uris[0]);

              let result = await detect(uris[0])
              // 检测失败
              if (result[0] != 0) {
                showToast('检测失败，请重试')
                return
              }
              // 检测成功
              this.isDetect = true
              this.isSubmit = false
              console.info('Results: ', JSON.stringify(result))
              console.info('detectResults: ', JSON.stringify(result[1]))
              // 更新状态以显示检测结果
              // detection_classes,detection_boxes,detection_scores
              this.detectResult = JSON.stringify(result[1], null, 2)
              this.classes = result[1].detection_classes
              this.boxes = result[1].detection_boxes
              this.scores = result[1].detection_scores
              console.info('classes: ', this.classes)
              console.info('boxes: ', this.boxes)
              console.info('scores: ', this.scores)

              showToast(`检测完成，共检测出${result[1].detection_classes.length}个缺陷`)
            } else {
              showToast('请选择一张PCB图片进行检测！')
            }
          } catch (err) {
            console.info('错误', err)
          }
        })
        .enabled(!this.isSubmit)
        .width(130)
        .height(50)
        .margin({ 'top': 30, 'bottom': 20 })
        .linearGradient({
          direction: GradientDirection.Right,
          colors: AppColors.gradient
        })

          if (this.isDetect) {
            Row() {
                Image($r("app.media.explorer")).width(20)
                Text('检测结果')
                  .margin({ 'bottom': 15 })
                  .width('90%')
                  .fontColor(0xFFFFFF)
                  .fontWeight(FontWeight.Bold)
                  .textAlign(TextAlign.Start)
            }.alignItems(VerticalAlign.Center).justifyContent(FlexAlign.Center).height(30)

                // 在图像上绘制检测框和显示检测结果
                Canvas(this.context)
                  .width('100%')
                    // .height(`${this.canvasHeight}px`)
                  .backgroundColor($r("app.color.circle_color"))
                  .onReady(() => {
                    if (this.isDetect) {
                      this.drawDetectionResults()
                    }
                  })
                  .onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => {
                    this.canvasWidth = Number(newValue.width)
                    this.canvasHeight = Number(newValue.height)
                  })
                TextArea({ text: this.detectResult }).width('90%').fontColor(0xFFFFFF)
              }
      }.width('100%').height('100%').backgroundColor($r("app.color.app_background"))
    }
  }
  // 绘制检测框和瑕疵信息（主要就是这一块不行）
  private async drawDetectionResults() {
    if (!this.preImage || this.boxes.length === 0) {
      return
    }
    const imageInfo = await this.preImage.getImageInfo();
    const imageWidth = imageInfo.size.width;
    const imageHeight = imageInfo.size.height;

    const containerWidth = this.canvasWidth // 假设你已经获取了父容器的宽度
    const aspectRatio = imageHeight / imageWidth

    this.canvasWidth = containerWidth
    this.canvasHeight = containerWidth * aspectRatio

    // 清空画布
    this.context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)

    // 绘制图像(到这一步都是ok的)
    this.context.drawImage(this.preImage, 0, 0, this.canvasWidth, this.canvasHeight)

    // 设置字体和线条样式（从这里开始就不行了sos）你说有没有一种可能，这个字体和线条，被上面的图片覆盖了，有可能
    this.context.strokeStyle = 'red'
    this.context.lineWidth = 2
    this.context.font = '16px Arial'
    this.context.fillStyle = 'red'

    // 遍历每个检测框，绘制矩形和文本
    for (let i = 0; i < this.boxes.length; i++) {
      let box = this.boxes[i]
      let x1 = box[0] * this.canvasWidth
      let y1 = box[1] * this.canvasHeight
      let x2 = box[2] * this.canvasWidth
      let y2 = box[3] * this.canvasHeight
      let width = x2 - x1
      let height = y2 - y1

      // 绘制矩形框
      this.context.strokeRect(x1, y1, width, height)

      // 绘制文本 (瑕疵种类和置信度)
      let label = `${this.classes[i]}: ${Math.round(this.scores[i] * 100)}%`
      this.context.fillText(label, x1, y1 - 5)
    }
  }

  Element(arg0: string) {
    throw new Error('Function not implemented.')
  }
}