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

最新推荐文章于 2025-01-12 16:42:53 发布

原创最新推荐文章于 2025-01-12 16:42:53 发布 · 906 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信 #canvas

微信专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种实现图片选区并添加注释的方法，通过使用canvas与WXSS实现图片上的动态绘制区域，适用于多种应用场景。

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

效果图

那这个有什么用呢。。需求是选中图片的某个区域然后给它添加注释。还可以有其他用处。那这个是怎么做到的呢。。首先我说下基本的思路
——-> 图片作为一个背景。然后上面是一层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>