当前位置：首页 > news >正文

UNIAPP利用canvas绘制图片和文字，并跟随鼠标移动

news 2025/7/7 17:00:10

最近有个项目，要触摸组件，产生一条图片跟随移动，并显示相应的文字，在网上找了一些资料，终于完成构想，废话少说，直接上代码（测试通过）

               };
               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
               }
           }