1.先来一个canvas的标签
<canvas id="cvs" width="1920" height="750" style="backgroundColor: #aaa"></canvas>
2.创建一些需要的变量
const useSatatu = ref(false) // 是否处于点击状态let useList = reactive([]) // 储存滑动时的坐标let imageClice = reactive({// 当前图片的左上角x: 0, y: 0})const imageBox = ref(200) // 图片的宽高，这里可以更具图片原有的大小按比例缩放let ctx = reactive() // 创建的canvas节点const image = reactive(new Image()) // 需要使用的图片
3.创建canvas中的函数
nextTick(() => {constsource = document.getElementById('cvs')image.src = '/image_search/src=http%3A%2F%%2Fup%2Fallimg%2Ftp10%2F2111251455453954-0-lp.jpg&refer=http%3A%2F%&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668321842&t=f7a4c1d5256426ae3633c8a5c9356676'image.onload = function() {ctx = source.getContext('2d')ctx.drawImage(image, imageClice.x, imageClice.y, imageBox.value, imageBox.value)}source.addEventListener('mousedown', (e) => {if(imageClice.x <= e.clientX && (imageClice.x+imageBox.value) >= e.clientX && imageClice.y <= e.clientY && (imageClice.y+imageBox.value) >= e.clientY) {useList = []useSatatu.value = !useSatatu.valuectx.beginPath()ctx.rect(imageClice.x, imageClice.y, imageBox.value, imageBox.value)ctx.stroke()useList.push({x: e.clientX,y: e.clientY})}})source.addEventListener('mousemove', (e) => {if(useSatatu.value) {useList.push({x: e.clientX,y: e.clientY})const val = useList.splice(0, 1)imageClice = {x: imageClice.x+useList[0].x-val[0].x, y:imageClice.y+useList[0].y-val[0].y }createImage()}})source.addEventListener('mouseup', (e) => {useSatatu.value = false})})
4.封装将图片画入canvas的函数
function createImage() {ctx.clearRect(0, 0, 1920, 750)ctx.beginPath()ctx.drawImage(image, imageClice.x, imageClice.y, imageBox.value, imageBox.value)ctx.rect(imageClice.x, imageClice.y, imageBox.value, imageBox.value)ctx.stroke()}document.onwheel = (e) => {e.wheelDelta > 0 ? imageBox.value += 5 : imageBox.value -= 5createImage()}
最后整体代码
<template><div><canvas id="cvs" width="1920" height="750" style="backgroundColor: #aaa"></canvas></div></template><script setup>import {ref, nextTick, reactive } from 'vue'const useSatatu = ref(false) // 是否处于点击状态let useList = reactive([]) // 储存滑动时的坐标let imageClice = reactive({// 当前图片的左上角x: 0, y: 0})const imageBox = ref(200) // 图片的宽高，这里可以更具图片原有的大小按比例缩放let ctx = reactive() // 创建的canvas节点const image = reactive(new Image()) // 需要使用的图片nextTick(() => {const source = document.getElementById('cvs')image.src = '/image_search/src=http%3A%2F%%2Fup%2Fallimg%2Ftp10%2F2111251455453954-0-lp.jpg&refer=http%3A%2F%&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668321842&t=f7a4c1d5256426ae3633c8a5c9356676'image.onload = function() {ctx = source.getContext('2d')ctx.drawImage(image, imageClice.x, imageClice.y, imageBox.value, imageBox.value)}source.addEventListener('mousedown', (e) => {if(imageClice.x <= e.clientX && (imageClice.x+imageBox.value) >= e.clientX && imageClice.y <= e.clientY && (imageClice.y+imageBox.value) >= e.clientY) {useList = []useSatatu.value = !useSatatu.valuectx.beginPath()ctx.rect(imageClice.x, imageClice.y, imageBox.value, imageBox.value)ctx.stroke()useList.push({x: e.clientX,y: e.clientY})document.onwheel = (e) => {e.wheelDelta > 0 ? imageBox.value += 5 : imageBox.value -= 5createImage()}}})source.addEventListener('mousemove', (e) => {if(useSatatu.value) {useList.push({x: e.clientX,y: e.clientY})const val = useList.splice(0, 1)imageClice = {x: imageClice.x+useList[0].x-val[0].x, y:imageClice.y+useList[0].y-val[0].y }createImage()}})source.addEventListener('mouseup', (e) => {useSatatu.value = false})})function createImage() {ctx.clearRect(0, 0, 1920, 750)ctx.beginPath()ctx.drawImage(image, imageClice.x, imageClice.y, imageBox.value, imageBox.value)ctx.rect(imageClice.x, imageClice.y, imageBox.value, imageBox.value)ctx.stroke()}document.onwheel = (e) => {e.wheelDelta > 0 ? imageBox.value += 5 : imageBox.value -= 5createImage()}</script><style lang="less" scoped></style>
打发时间写的，有问题评论下，我看着修改，谢谢。
