<view class="page-body">
  <!-- 畫布 -->
  <view class="page-body-wrapper">
    <canvas canvas-id="myCanvas" type="2d" id="myCanvas" class='myCanvas' bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd"></canvas>
  </view>
  <!-- 操作 -->
  <view class="layout-bottom">
    <view class="page-bottom">
      <view class="pbottom pmiddle" bindtap="pre">
        <image src="/images/next2.png" style="height: 65rpx; width: 65rpx; " mode="aspectFit"></image>
        <view class="pictureBottomArea"><p>返回</p></view>
      </view>
      <view class="pbottom pmiddle" bindtap="detection">
        <image src="{{sbUrl}}" style="height: 100rpx; width: 100rpx; " mode="aspectFit"></image>
        <view class="pictureBottomArea1"><p>識別</p></view>
      </view>
      <view class="pbottom pmiddle" bindtap="clear">
        <image src="/images/qc3.png" style="height: 70rpx; width: 70rpx; " mode="aspectFit"></image>
        <view class="pictureBottomArea"><p>清除選區(qū)</p></view>
      </view>
    </view>
  </view>
</view>

.myCanvas { background-color: #F7F7F7; width: 100vw; height: 100vh; }
page { width: 100%; height: 100%; padding: 0; margin: 0; background-color: #F8F8F8; font-size: 32rpx; line-height: 1.6; display: flex; display: -webkit-flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; }
.page-body { width: 100%; height: 100%; padding: 0; margin: 0; }  .page-body-wrapper { width: 100%; height: 80%; display: flex; flex-direction: column; align-items: center; width: 100%; }
.layout-bottom { width: 100%; height: 20%; background-color: white; }
.page-bottom { width: 100%; height: 75%; display: flex; display: -webkit-flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; }
.pbottom { width: 33.333333333%; height: 100%; }
.pmiddle{ display: flex; display: -webkit-flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; }
.pictureBottomArea { margin-top: 15rpx; font-size: small; }
.pictureBottomArea1 { font-size: 0.9rem; letter-spacing:4rpx; font-weight: 600; color: #585858; }

// 定義變量
let startX, startY, endX, endY, rectWidth, rectHeight
Page({
  data: {
    drawWidth: 0,
    drawHeight: 0,
    drawX: 0,
    drawY: 0,
    ratio: 0,//縮放比例
    sbUrl: '/images/a2.png',//按鈕
    imgSrc: '/images/ll.png',
    area: [],
    ctx: null,
    canvas: null,
    drawimage: null,
  },
  onLoad(options) {
    startX = 0
    startY = 0
    endX = 0
    endY = 0
    rectWidth = 0
    rectHeight = 0
    //把圖片繪制到畫布上
    this.drawImage(this.data.imgSrc)
  },
  //把圖片繪制到畫布上
  drawImage(imgSrc){
    let _this = this
    wx.createSelectorQuery().select('#myCanvas').fields({ node: true, size: true }).exec((res0) => {
      //獲取canvas寬高
      const canvas = res0[0].node
      console.log(canvas)
      let ctx = canvas.getContext('2d');
      const cw = res0[0].width
      const ch = res0[0].height
      console.log('Canvas寬度：'+cw, 'Canvas高度：'+ch)
      const dpr = wx.getSystemInfoSync().pixelRatio
      console.log(dpr)
      canvas.width = cw * dpr     // 獲取寬
      canvas.height = ch * dpr  // 獲取高
      console.log(cw * dpr, ch * dpr)
      ctx.scale(dpr, dpr)
      wx.getImageInfo({
        src: imgSrc,
        success: function (res) {
          //獲取圖片寬高
          let iw = res.width
          let ih = res.height
          console.log('圖片寬度：'+iw, '圖片高度：'+ih);
          // 計算繪制位置，保持原始比例
          let ratio = Math.min(cw / iw, ch / ih);
          console.log(ratio)
          // 圖片適配畫布顯示，關鍵在于計數(shù)圖片縮放比例
          let drawWidth = iw * ratio;
          let drawHeight = ih * ratio;
          console.log('圖片縮放后寬度：'+drawWidth, '圖片縮放后高度：'+drawHeight);
          let drawX = (cw - drawWidth) / 2;
          let drawY = (ch - drawHeight) / 2;
          // 到這里就可以直接繪制
          let image = canvas.createImage();//創(chuàng)建iamge實例
          image.src = imgSrc;  // 引入本地圖片
          image.onload = function () {
            ctx.drawImage(image, 0, 0, drawWidth, drawHeight);
          }
          _this.setData({drawWidth: drawWidth,drawHeight: drawHeight,drawX: drawX,drawY: drawY,  ratio: ratio,ctx: ctx,canvas: canvas,drawimage: image})
        },
        fail: function (res) {
          console.error('獲取圖片信息失敗', res);
        }
      });
    })
  },
  // 觸摸開始事件
  touchStart(e) {
    startX = e.touches[0].x
    startY = e.touches[0].y
    console.log("觸摸開始事件", e.touches[0], startX, startY)
  },
  // 觸摸移動事件
  touchMove(e) {
    let imgSrc = this.data.imgSrc
    let drawWidth = this.data.drawWidth
    let drawHeight = this.data.drawHeight
    let ctx = this.data.ctx
    let image = this.data.drawimage
    endX = e.touches[0].x
    endY = e.touches[0].y
    ctx.clearRect(0, 0, drawWidth, drawHeight)
    ctx.drawImage(image, 0, 0, drawWidth, drawHeight);
    rectWidth = endX - startX
    rectHeight = endY - startY
    ctx.strokeRect(startX, startY, rectWidth, rectHeight)
    ctx.strokeStyle = 'red'
    ctx.stroke()
  },
  // 觸摸結(jié)束事件
  touchEnd(e) {
    // 繪制完成后的操作
    // 可以將坐標框的位置和大小保存到全局變量或發(fā)送給服務器等
    console.log("觸摸結(jié)束事件",e.changedTouches[0])
  },
  //清除繪制的圖形
  clear(){
    console.log("清除繪制")
    let imgSrc = this.data.imgSrc
    let drawWidth = this.data.drawWidth
    let drawHeight = this.data.drawHeight
    let ctx = this.data.ctx
    let image = this.data.drawimage
    ctx.clearRect(0, 0, drawWidth, drawHeight)
    ctx.drawImage(image, 0, 0, drawWidth, drawHeight);
    startX = 0
    startY = 0
    endX = 0
    endY = 0
    rectWidth = 0
    rectHeight = 0
  },
  // 識別
  detection(e){
    console.log("開始識別")
    let ratio = this.data.ratio
    //獲取繪制選區(qū)的相關信息，這里要除以圖片縮放比例，才是真是圖片上的框選區(qū)
    if (rectWidth != 0 && rectHeight != 0){
        console.log('矩形','x='+startX/ratio,'y='+startY/ratio,'Width='+rectWidth/ratio,'Height='+rectHeight/ratio)
     }
  },
  //上一頁
  pre(){
    console.log("上一頁")
  }
})