网页制作创建站点湖南百度seo排名点击软件
最近有个项目，要触摸组件，产生一条图片跟随移动，并显示相应的文字，在网上找了一些资料，终于完成构想，废话少说，直接上代码（测试通过）
<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>