微信小程序画布显示图片绘制矩形选区

xiejunna

已于 2024-05-16 17:29:02 修改

阅读量857

点赞数 4

文章标签：微信小程序小程序

于 2024-05-16 17:17:53 首次发布

本文链接：https://blog.csdn.net/xiejunna/article/details/138966584

版权

在这里插入图片描述

wxml

<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>清除选区</p></view>
      </view>
    </view>
  </view>
</view>

wxss

.myCanvas {
    background-color: #F7F7F7; width: 100vw; height: 100vh; }
page {

最低0.47元/天解锁文章