微信小程序一个你可能需要的功能

根据工作需要。需要做一个图片选中部分区域的效果。百度了很久，都没有见有。于是就自己写了个，需要的可以借鉴下，还有很多需要改善的地方 现在先看看效果

效果图

那这个有什么用呢。。需求是选中图片的某个区域然后给它添加注释。还可以有其他用处。那这个是怎么做到的呢 。。首先我说下基本的思路
——-> 图片作为一个背景。然后上面是一层canvas 以及最上面生成的view
因为只是一个demo 所以写法上就没有样式分离了。。下面是布局的代码

<!--index.wxml-->
<view class="container">

    <view>
       <image src="https://img.alicdn.com/bao/uploaded/i4/2824260419/TB17ZfzgZnI8KJjSsziXXb8QpXa_!!0-item_pic.jpg_430x430q90.jpg" style="width:100%;height:100%;position:absolute;left:0px;"></image>
        <canvas canvas-id="identify" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" bindtouchcancel="touchCancel" style="left:0px;position:absolute;height:100%;width:100%;"/>
    </view>
    <view style="width:{{item.width}}rpx;height:{{item.height}}rpx;border:5rpx solid #00f;position:absolute;left:{{item.x}}rpx;top:{{item.y}}rpx;" wx:for="{{canvesView}}" wx:key="{{index}}"  bindtouchstart="ViewtouchStart" bindtouchmove="ViewtouchMove" bindtouchend="ViewtouchEnd" data-id="{{index}}" >{{index}}</view>
</view>