做淘宝店铺有哪些好的网站,嘉兴服饰网站建设,做拍拍拍拍网站,云南住房与城乡建设厅网站最近有个项目#xff0c;要触摸组件#xff0c;产生一条图片跟随移动#xff0c;并显示相应的文字#xff0c;在网上找了一些资料#xff0c;终于完成构想#xff0c;废话少说#xff0c;直接上代码#xff08;测试通过#xff09;
template view要触摸组件产生一条图片跟随移动并显示相应的文字在网上找了一些资料终于完成构想废话少说直接上代码测试通过
template view view classbtnBox view classbtn stylebackground-color: blue; clickmoveImage移动图片/view /view canvas canvas-idmyCanvas idmyCanvas touchstarthandleTouchStart touchmovehandleTouchMove touchendhandleTouchEnd/canvas /view /template
script export default { data() { return { ctx: , beginX: , beginY: , movedX: , movedY: , layers: [], toBase64Url: , bloburl: , } }, onLoad() { this.ctx uni.createCanvasContext(myCanvas) }, methods: { moveImage() { let that this; var Image ; //var Imagehttps://www.small-helper.com/account.png;//网络图片地址 //Imagehttp://localhost:8080/static/images/wx_img/dkk.png//本地服务器内图片直接地址 uni.getImageInfo({ src: /static/images/wx_img/dkk.png, success: function(res) { // console.log(res); Image res.path; var contentWidth res.width; var contentHeight res.height; // let layer { type: photo, resoure: Image, //resoure:http://localhost:8080/static/images/wx_img/dkk.png, x: 0, y: 0, w: 150, h: 150, isDrag: false } that.layers.push(layer); that.darwImages(Image, layer.x, layer.y, layer.w, layer.h); }, fail() { that.$Common.toast(获取图片失败) } }); /*从相册获取图片进行移动 uni.chooseImage({ success: (res) { let layer { type: photo, resoure: res.tempFilePaths[0], x: 0, y: 0, w: 200, h: 150, isDrag: false } //console.log(res.tempFilePaths[0]); that.urlTobase64(/static/images/wx_img/dkk.png); console.log(that.toBase64Url); //let bloburlthat.dataURLToBlob(url); that.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.setFontSize(uni.upx2px(40));//设置字体尺寸 this.ctx.setFillStyle(#5500ff); //this.ctx.font songti; this.ctx.fillText(nihao,x50,y-1); this.ctx.draw(true); }, draw() { //var ctx document.getElementById(canvas).getContext(2d); var img new Image(); img.onload function() { //this.ctx.drawImage(img, 0, 0); this.ctx.beginPath(); this.ctx.moveTo(30, 96); this.ctx.lineTo(70, 66); this.ctx.lineTo(103, 76); this.ctx.lineTo(170, 15); this.ctx.stroke(); this.ctx.fillText(nihao,10,100); }; img.src /static/images/wx_img/dkk.png; //img.src https://mdn.mozillademos.org/files/5395/backdrop.png; }, //可通过此方法对本地路径 如 …/…/static/img/01.png 或者网络路径图片转为base64 urlTobase64(url) { var that this; //var toBase64Url; uni.request({ url: url, method: GET, responseType: arraybuffer, success: async res { let base64 wx.arrayBufferToBase64(res.data); //把arraybuffer转成base64 that.toBase64Url data:image/jpeg;base64, base64; //不加上这串字符在页面无法显示 //console.log(that.toBase64Url); //return toBase64Url ; return (that.dataURLToBlob(that.toBase64Url)); } }); }, // DataURL转Blob对象 dataURLToBlob(dataurl) { console.log(dataurl); var arr dataurl.split(,); var mime arr[0].match(/:(.*?);/)[1]; var bstr atob(arr[1]); var n bstr.length; var u8arr new Uint8Array(n); while (n--) { u8arr[n] bstr.charCodeAt(n); } var dataURL1 this.windowURL.createObjectURL(new Blob([u8arr], { type: mime })); // console.log(dataURL1); return new Blob([u8arr], { type: mime }); //console.log(new Blob([u8arr], {type:mime})); }, 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 this.layers[i].w this.layers[i].x y this .layers[i].h this.layers[i].y) { this.layers[i].isDrag true let selectObj this.layers[i] this.layers.splice(i, 1) this.layers.push(selectObj) //console.log(selectObj) break } } }, handleTouchMove(e) { if (this.layers.length ! 0 this.layers[this.layers.length - 1].isDrag true) { let { x, y } e.changedTouches[0] this.movedX x - this.beginX this.movedY y - this.beginY this.layers[this.layers.length - 1].x this.movedX this.layers[this.layers.length - 1].y this.movedY this.beginX x this.beginY y } this.ctx.clearRect(0, 0, 750, 900) this.layers.forEach(l this.darwImages(l.resoure, l.x, l.y, l.w, l.h)) }, handleTouchEnd(e) { if (this.layers.length ! 0) { this.layers[this.layers.length - 1].isDrag false } } } } /script
style .btnBox { display: flex; } .btn { width: 630rpx; height: 90rpx; line-height: 94rpx; text-align: center; //background: $wx_theme_blue; color: #fff; border-radius: 45rpx; font-size: 36rpx; margin: 80rpx auto 30rpx; } #myCanvas { width: 750rpx; height: 900rpx; } /style
