<!-- *************操作区域************* --> <block wx:for="{{itemList}}" wx:key="{{item.id}}"> <!-- 圆心坐标 <text></text> --> <view> <view> <image src='https://www.jb51.net/{{item.image}}' data-id='{{item.id}}' bindtouchstart='WraptouchStart' bindload='loadImg' hidden='{{!item.isload}} bindtouchmove='WraptouchMove' bindtouchend='WraptouchEnd'></image> <image src='' data-id='{{item.id}}' bindtap='deleteItem'></image> <image src='' data-id='{{item.id}}' bindtouchstart='touchStart' bindtouchmove='touchMove' bindtouchend='touchEnd'></image> </view> </view> </block> <!-- **************操作区域************ -->
这样一来就解决了微信小程序内拖动图片实现移动、放大、旋转的问题，操作也比较顺滑，也耗费我近四天的时间才把我的小程序上线，代码有点混乱，如果各位大佬有什么意见可以给我留言，我的小程序名字是：水逆转运符文，以后会持续改进。
2018/5/7补充一条生成图片时，组件的属性：
我的失误，忘了附上角度计算函数 countDeg :
/* *参数1和2为图片圆心坐标 *参数3和4为手点击的坐标 *返回值为手点击的坐标到圆心的角度 */ countDeg: function (cx, cy, pointer_x, pointer_y) { var ox = pointer_x - cx; var oy = pointer_y - cy; var to = Math.abs(ox / oy); var angle = Math.atan(to) / (2 * Math.PI) * 360;//鼠标相对于旋转中心的角度 console.log("ox.oy:", ox, oy) if (ox < 0 && oy < 0)//相对在左上角，第四象限，js中坐标系是从左上角开始的，这里的象限是正常坐标系 { angle = -angle; } else if (ox <= 0 && oy >= 0)//左下角,3象限 { angle = -(180 - angle) } else if (ox > 0 && oy < 0)//右上角，1象限 { angle = angle; } else if (ox > 0 && oy > 0)//右下角，2象限 { angle = 180 - angle; } return angle; }
计算触摸点到圆心的距离：
getDistancs(cx, cy, pointer_x, pointer_y) { var ox = pointer_x - cx; var oy = pointer_y - cy; return Math.sqrt( ox * ox + oy * oy ); }
点击配件时的事件（因为再我测试在canvas中，图片不能是网络路径，所以需要下载）： 【18/6/22】
tpDownload: function(data, isDownload) { //data为组件的参数，isDownload判断是否为https网络图片来判断是否需要下载 if (yy < 0) { //改变生成图片时的位置 speed = -speed } if (yy > 300) { speed = -speed } yy += speed; let _this = this; let newTpdata = {}; newTpdata.id = data.id; newTpdata.itemid = data.itemid; newTpdata.top = 100 + yy; newTpdata.left = 100; newTpdata.width = _this.sysData.windowWidth / 4; newTpdata.scale = 1; newTpdata.angle = 0; newTpdata.rotate = 0; newTpdata.active = true; for (let i = 0; i < items.length; i++) { items[i].active = false; } if (isDownload) { wx.downloadFile({ url: data.image, success: res => { newTpdata.image = res.tempFilePath; items.push(newTpdata); _this.setData({ itemList: items }) wx.hideLoading(); } }) } else { newTpdata.image = data.image; items.push(newTpdata); _this.setData({ itemList: items }) wx.hideLoading(); } }
我的项目中生成canvas用到的代码 （绘图是通过保存按钮触发）
save: function() { this.setData({ showCanvas: true, canvasHeight: this.sysData.windowHeight * 0.85 }) let obj = this.data.item; /* canvasWidth值为canvas宽度； this.data.canvasPre是占屏幕宽度的百分比（80） */ let canvasWidth = this.sysData.windowWidth * this.data.canvasPre / 100; // /* num为canvas内背景图占canvas的百分比，若全背景num =1 this.sysData.windowWidth * 0.75为可移动区的宽度 prop值为canvas内背景的宽度与可移动区域的宽度的比，如一致，则prop =1; */ let prop = (canvasWidth * num) / (this.sysData.windowWidth * 0.75); maskCanvas.save(); maskCanvas.beginPath(); //一张白图 maskCanvas.setFillStyle('#fff'); maskCanvas.fillRect(0, 0, this.sysData.windowWidth, this.data.canvasHeight) maskCanvas.closePath(); maskCanvas.stroke(); //图头像 let image = { w: canvasWidth * num * 0.287, h: canvasWidth * num * 0.287, r: canvasWidth * num * 0.287 / 2 }; //画背景 hCw 为 1.7781 背景图的高宽比 maskCanvas.drawImage(obj.bgImg, canvasWidth * (1 - num) / 2, 10, canvasWidth * num, canvasWidth * num * hCw) //画底图 maskCanvas.drawImage('../../images/xcx.png', canvasWidth * (1 - num) / 2, canvasWidth * num * hCw + 15, canvasWidth * num, this.data.canvasHeight * 0.15) //画原 maskCanvas.save(); maskCanvas.beginPath(); maskCanvas.arc(canvasWidth / 2, canvasWidth * num * hCw * obj.userTop / 100 + 10 + image.w / 2, image.r, 0, Math.PI * 2, false); // maskCanvas.stroke() maskCanvas.clip(); //截取 //画头像 maskCanvas.drawImage(obj.avatarUrl, (canvasWidth - image.w) / 2, canvasWidth * num * hCw * obj.userTop / 100 + 10, image.w, image.h) maskCanvas.closePath(); maskCanvas.restore(); //绘制文字 maskCanvas.save(); maskCanvas.beginPath(); let fontSize = this.sysData.screenWidth / 375 * 15; let textColor = obj.color || '#000'; maskCanvas.setFontSize(parseInt(fontSize) * prop) maskCanvas.setFillStyle(textColor) maskCanvas.setTextAlign('center') maskCanvas.fillText(obj.nickName, canvasWidth / 2, obj.titleTop / 100 * canvasWidth * num * hCw + 10 * 0.9 * prop + fontSize * prop); maskCanvas.closePath(); maskCanvas.stroke(); /** * x * y * scale * prop * width * height * */ //画组件 items.forEach((currentValue,index)=>{ maskCanvas.save(); maskCanvas.translate(canvasWidth * (1 - num) / 2, 10); maskCanvas.beginPath(); maskCanvas.translate(currentValue.x * prop, currentValue.y * prop); //圆心坐标 maskCanvas.rotate(currentValue.angle * Math.PI / 180); // 旋转值 maskCanvas.translate(-(currentValue.width * currentValue.scale * prop / 2), -(currentValue.height * currentValue.scale * prop / 2)) maskCanvas.drawImage(currentValue.image, 0, 0, currentValue.width * currentValue.scale * prop, currentValue.height * currentValue.scale * prop); maskCanvas.restore(); }) maskCanvas.draw(false, (e)=> { wx.canvasToTempFilePath({ canvasId: 'maskCanvas', success: res => { this.setData({ canvasTemImg: res.tempFilePath }) } }, this) }) }