Vue canvas图形放大缩小
第一种办法 利用进度条标签来缩放
·
1、第一种办法 利用进度条标签来缩放
<template>
<div class="hello">
<canvas width="1000" height="500" style="border:1px solid #000;" id="myCanvas"></canvas>
<input type="range" id="scale-range" :min="rangeMin" :max="rangeMax" step="0.01" v-model="rangeValue" @mousemove="mousemoveCanvas()" style="display: block;">
<!-- min设置拖动条最小值 max最大值 -->
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
data(){
return{
canvas: null,
ctxCanvas: null,
rangeMin: 0.5,
rangeMax: 4,
rangeValue: 1.0,
img: null
}
},
mounted(){
this.canvas = document.getElementById("myCanvas")
this.ctxCanvas = this.canvas.getContext("2d")
// 绘制图片
this.img = new Image()
this.img.src = "你的图片路径"
this.img.onload = () => {
this.ctxCanvas.drawImage(this.img, this.canvas.width / 2 - this.img.width / 2, this.canvas.height / 2 - this.img.height / 2);
};
},
methods:{
// 拖拽放大缩小
mousemoveCanvas(){
// 在这里可以打印rangeValue的值
this.ctxCanvas.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.ctxCanvas.save();
this.ctxCanvas.translate(this.canvas.width / 2 - this.img.width / 2 * this.rangeValue, this.canvas.height / 2 - this.img.height / 2 * this.rangeValue);
this.ctxCanvas.scale(this.rangeValue, this.rangeValue);
this.ctxCanvas.drawImage(this.img, 0, 0);
this.ctxCanvas.restore();
}
}
}
</script>
2、第二种办法 利用鼠标滚动条来缩放
1、在canvas标签内绑定滚动事件:@mousewheel=“mouseWheel”
2、滚动事件
mouseWheel (e) {
if (e.wheelDelta || e.detail) {
if (e.wheelDelta > 0 || e.detail < 0) { //当鼠标滚轮向上滚动时
console.log("向上")
}
if (e.wheelDelta < 0 || e.detail > 0) { //当鼠标滚轮向下滚动时
console.log("向下")
}
}
}
3、结合进度条的方法去做。注意:每次增加、减小的数字要转换成number类型
<template>
<div class="hello">
<canvas width="1000" height="500" style="border:1px solid #000;" id="myCanvas" @mousewheel="mouseWheel"></canvas>
<input type="range" id="scale-range" :min="rangeMin" :max="rangeMax" step="0.01" v-model="rangeValue" @mousemove="mousemoveCanvas()" style="display: block;">
<!-- min设置拖动条最小值 max最大值 -->
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
data(){
return{
canvas: null,
ctxCanvas: null,
rangeMin: 0.5,
rangeMax: 4,
rangeValue: 0.5,
img: null
}
},
mounted(){
this.canvas = document.getElementById("myCanvas")
this.ctxCanvas = this.canvas.getContext("2d")
// 绘制图片
this.img = new Image()
this.img.src = "你的图片路径"
this.img.onload = () => {
this.ctxCanvas.drawImage(this.img, this.canvas.width / 2 - this.img.width / 2, this.canvas.height / 2 - this.img.height / 2);
};
},
methods:{
translateNumber(val){
return Number(val)
},
// 拖拽放大缩小
mousemoveCanvas(){
console.log(Number(this.rangeValue),"拖拽")
this.ctxCanvas.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.ctxCanvas.save();
this.ctxCanvas.translate(this.canvas.width / 2 - this.img.width / 2 * this.rangeValue, this.canvas.height / 2 - this.img.height / 2 * this.rangeValue);
this.ctxCanvas.scale(this.rangeValue, this.rangeValue);
this.ctxCanvas.drawImage(this.img, 0, 0);
this.ctxCanvas.restore();
},
mouseWheel (e) {
if (e.wheelDelta || e.detail) {
if (e.wheelDelta > 0 || e.detail < 0) { //当鼠标滚轮向上滚动时
this.rangeValue <= 4 ? this.rangeValue = this.translateNumber(this.rangeValue) + 0.2 : this.rangeValue >= 0.5
if(this.rangeValue <= 4 && this.rangeValue >= 0.5){
this.ctxCanvas.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.ctxCanvas.save();
this.ctxCanvas.translate(this.canvas.width / 2 - this.img.width / 2 * this.rangeValue, this.canvas.height / 2 - this.img.height / 2 * this.rangeValue);
this.ctxCanvas.scale(this.rangeValue, this.rangeValue);
this.ctxCanvas.drawImage(this.img, 0, 0);
this.ctxCanvas.restore();
}
console.log("向上",this.rangeValue)
}
if (e.wheelDelta < 0 || e.detail > 0) { //当鼠标滚轮向下滚动时
this.rangeValue >= 0.5 ? this.rangeValue = this.translateNumber(this.rangeValue) - 0.2 : this.rangeValue <= 4
if(this.rangeValue > 0.5 && this.rangeValue < 4){
this.ctxCanvas.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.ctxCanvas.save();
this.ctxCanvas.translate(this.canvas.width / 2 - this.img.width / 2 * this.rangeValue, this.canvas.height / 2 - this.img.height / 2 * this.rangeValue);
this.ctxCanvas.scale(this.rangeValue, this.rangeValue);
this.ctxCanvas.drawImage(this.img, 0, 0);
this.ctxCanvas.restore();
}
console.log("向下",this.rangeValue)
}
}
}
}
}
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)