织梦怎么设置网站首页网站百度关键词优化
最近有个项目,要触摸组件,产生一条图片跟随移动,并显示相应的文字,在网上找了一些资料,终于完成构想,废话少说,直接上代码(测试通过)
<template>
     <view>
         <view class="btnBox">
             <view class="btn" style="background-color: blue;" @click="moveImage">移动图片</view>
         </view>
         <canvas canvas-id="myCanvas" id="myCanvas" @touchstart="handleTouchStart" @touchmove="handleTouchMove"
             @touchend="handleTouchEnd"></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 Image="https://www.small-helper.com/account.png";//网络图片地址
                 //Image="http://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 bloburl=that.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',x+50,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>
