今日分享:canvas放大功能
看看效果
思路:
-
准备两个canvas和一个放大镜元素;两个canvas,一个用于原图渲染,一个用于放大查看,放大镜元素跟随鼠标运动
-
在原图渲染的canvas上绑定一个 ‘mousedown’ 事件,用于获取选中查看图片的坐标,同时在window上绑定’mousemove’事件
-
在window上绑定 ‘mouseup’ 事件,用于解绑window的 ‘mousemove’ 事件
-
window上绑定的’mousemove’事件用于监听鼠标的移动距离,从而计算出在放大查看的canvas上的坐标并实时绘图
代码
html 部分
<template>
<div class="magnifying-glass">
<div class="source-box">
<div class="zoom-box"
:style="{
left: zoomPoint.x + 'px',
top: zoomPoint.y + 'px',
}"
v-show="isShow"></div>
<canvas id="source-canvas"></canvas>
</div>
<canvas id="look-canvas" v-show="isShow"
:style="{top: lookPoint.top + 'px', left: lookPoint.left + 'px'}"
></canvas>
</div>
</template>
js 部分
<script setup>
import {
onMounted, ref, reactive } from 'vue'
import phoneImg from '@/assets/image/phone.png'
let canvas = null;
let lookCanvas = null;
// 桌布
let zoomBox = null;
let canvasWidth = 500;
let canvasHeight = 500;
// look-canvas 的展示位置设置
let lookPoint = reactive({
top: 0,
left: 500,
})
// 原图的坐标
let points = {
x: 0, y: 0,}
// 放大 图片的坐标
let showPoint = {
x: 0, y: 0 }
// 桌布位置坐标
let zoomPoint = reactive({