【uniapp】canvas实现图片拖拽功能 |
您所在的位置：网站首页 › 移动图片 › 【uniapp】canvas实现图片拖拽功能 |
【uniapp】canvas实现图片拖拽功能
|
【uniapp】canvas实现图片拖拽功能
效果展示页面结构数据结构选择并绘制图片拖拽图片完整代码
本实验前期准备： ①下载HBuilderX ②新建uniapp项目，选择默认模板，Vue版本选择2 ③在HBuilderX工具栏中点击“插件安装”，前往uniapp插件市场安装uViewUI（选择使用HbuilderX导入插件） ④点击该链接学习配置uView （③④步骤非必要，如果要使用uViewUI组件可以尝试） 效果展示
layers数组中的每一组数据可以看作是一个图层，下标越往后图层层级越高。 export default { data(){ return{ ctx:'', //canvas上下文对象 beginX:'', beginY:'', movedX:'', movedY:'', layers:[], //存储图片对象 } }, onLoad() { this.ctx = uni.createCanvasContext('myCanvas') }, methods:{...} .... } 选择并绘制图片点击“添加图片”按钮时触发一下方法 darwImages(url,x,y,w,h){ this.ctx.drawImage(url,x,y,w,h) this.ctx.draw(true) },layer(x,y)为图像的左上角在画布 X 轴和Y轴的位置 layer(w,h)为图像在画布中的宽高大小 layer.isDrag为当前图片是否为被拖拽对象，默认为false selectImage(){ uni.chooseImage({ success:(res)=> { // 图片对象 let layer = { type:'photo', resoure:res.tempFilePaths[0], x:0, y:0, w:200, h:150, isDrag:false } // 将图片对象添加到layers数组中 this.layers.push(layer) // 将图片绘制到画布中 this.darwImages(res.tempFilePaths[0],layer.x,layer.y,layer.w,layer.h) } }) }, 拖拽图片拖拽图片有三个动作：一是选中图片，二是长按移动图片，三是结束移动图片。 在选中图片这一步骤中有几个要点： ①如何判断我们选中了图片？ ②当触摸的点落在了两张图片重合的地方，如何将最上层的图片设置为我们要选中并拖拽的对象？ 解①： 解②： 在前面我已介绍过，layers数组中下标越往后图层层级越高（因为canvas默认新绘制的图片会覆盖先绘制的图片），因此我们只需要反向遍历layers，优先判断图层层级较高的图片是否被选中即可。 handleTouchStart(e){ let {x,y} = e.changedTouches[0] this.beginX = x this.beginY = y for (var i=this.layers.length-1;i>=0;i--) { if(x>this.layers[i].x && y>this.layers[i].y && x { let layer = { type:'photo', resoure:res.tempFilePaths[0], x:0, y:0, w:200, h:150, isDrag:false } this.layers.push(layer) this.darwImages(res.tempFilePaths[0],layer.x,layer.y,layer.w,layer.h) } }) }, darwImages(url,x,y,w,h){ this.ctx.drawImage(url,x,y,w,h) this.ctx.draw(true) }, handleTouchStart(e){ let {x,y} = e.changedTouches[0] this.beginX = x this.beginY = y for (var i=this.layers.length-1;i>=0;i--) { if(x>this.layers[i].x && y>this.layers[i].y && x |
根据上图我们可以得出：只要同时满足 x > img.x ，y > img.y , x < img.w + img.x , y < img.h + img.y 四个条件，就可以断定选中了图片。同时修改isDrag属性为true，并将当前选中的图片的层级设置为最高。【本文地址】