微信小程序一个你可能需要的功能
根据工作需要。需要做一个图片选中部分区域的效果。百度了很久,都没有见有。于是就自己写了个,需要的可以借鉴下,还有很多需要改善的地方 现在先看看效果
效果图
那这个有什么用呢。。需求是选中图片的某个区域然后给它添加注释。还可以有其他用处。那这个是怎么做到的呢 。。首先我说下基本的思路
——-> 图片作为一个背景。然后上面是一层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>
微信小程序一个你可能需要的功能相关推荐
- 微信小程序 - 实现左滑动删除功能
微信小程序 - 实现左滑动删除功能 效果图: 实现过程: 一.wxml布局 这里我是先用了一个大盒子包裹小盒子,然后小盒子里面进行左右布局(左边为内容部分,右边为删除按钮)的方式实现的 <vie ...
- 微信小程序购物车 数量加减功能
微信小程序购物车 数量加减功能 wxml <!-- 主容器 --> <view class="stepper"> <!-- 减号 --> < ...
- 微信小程序的搜索和重置功能
微信小程序的搜索和重置功能 wxml <template><div><div class="input-wrap"><el-inputse ...
- 怎么实现微信小程序云开发拼团功能?
[微信云开发教程]怎么实现微信小程序云开发拼团功能? 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 [微 ...
- 【愚公系列】2022年09月 微信小程序-微信小程序实现网页一键登录功能
文章目录 前言 一.微信小程序实现网页一键登录功能 1.旧版登录方法 2.新版登录方法 二.相关第三方包源码 前言 如果微信小程序要获取微信登录的用户信息,需要拿到code去后台换取用户信息,具体步骤 ...
- 微信小程序调起扫码功能
场景:在微信小程序中使用扫码功能,对扫描的物品进行识别处理 1.先随便定义一个点击调起扫码的元素 <view bindtap="tapScan">扫码</view ...
- uni-app 微信小程序 模仿 app二层楼功能
uni-app 微信小程序 模仿 app二层楼功能 先占个坑,今天应该写不完, 后续在慢慢补全 更新 终于写完了 这个的计算量很大,我自己的安卓机测试的时候一卡一卡的,公司同事的iphone是没有问题 ...
- 微信小程序—调用扫一扫功能,通过扫描二维码连接蓝牙模块
使用微信小程序的扫码功能连接蓝牙,具体操作如下 实现流程图 Created with Raphaël 2.2.0准备好二维码小程序调用扫码功能小程序获取到二维码内容(我这里为蓝牙的名字)小程序通过搜索 ...
- 微信小程序分销系统有哪些功能及优势?
一.微信小程序分销系统有哪些功能? 1.商品管理 2.订单管理 3.分销管理 4.财务管理 5.数据统计 二.微信小程序分销系统为何如此火爆? 1.微信小程序分销系统拥有AP ...
最新文章
- 批量删除注册表特定键值的小技巧
- LeetCode 595 Big Countries: SQL的题
- MPAndroidChart的具体属性方法
- 编程语言与思维:科技公司如何自我重构?
- php中 ob_start()有什么作用
- 全国计算机等级考试暨南大学,9月暨南大学计算机等级考试报名时间通知
- RuoYi-Vue 部署 Linux环境 若依前后端分离项目(jar包+nginx 多机版本)
- node.js 中间件_Node.js中的Passport中间件(模块)
- 再谈 Linux下的nanosleep函数
- 大数据最核心的关键技术:32个算法
- Oracle instantclient 11.2 (64位)安装与配置tnsnames.ora,并使用PL/SQL Develpoer14(64位)连接数据库
- bzoj1426 收集邮票
- web前端开发技术现状与发展_Web前端开发的未来,将会有哪些发展方向?
- varied字符串c语言,C语言输入输出问题解析研究.pdf
- android开发01 --开发工具
- ST7789-TFT屏幕驱动(整理有stm32/51单片机/arduino等驱动代码)
- 兼容移动端的 Web 档案馆可视化管理系统
- Es6模板字符串条件判断
- 道创峰会2020:伯克利学生分享会|快来线下碰一碰
- 全网最新-扶风视频解析计费系统,2022优化免授权版(赠接口轮询插件)