问题描述
最近项目中需要用canvas实现图片的拖放以及缩放，还要能够在图片上进行路径绘制，但是我进行路径绘制之后进行拖放操作，会清空之前的路径
问题出现的环境背景及自己尝试过哪些方法
经过检查 发现是每次进行拖放操作时会先清空画布 context.clearRect(0, 0, canvas.width, canvas.height);，当注释掉这一句的时候图片就会无限拖放复制，请各位看看有什么解决办法让两者可以兼容
代码
```javascript
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
span{
display: inline-block;
width: 50px;
line-height: 40px;
color: #fff;
background: #ccc;
margin: 20px;
text-align: center;
cursor: pointer;
}
style>
head>
<body>
<div id="testid">
<div id="div1" style="width:100px; height:20px;">div>
<div>
<span onclick="move()">移动span>
<span onclick="draw()">画图span>
div>
<canvas id="canvas" width="800" height="800" style="margin-left:20px; margin-top:20px;border: 1px solid #000" onMouseMove="cnvs_getCoordinates(event);">canvas>
div>
body>
html>
<script>
var canvas, context
var img; var // 图片对象
icon; var // 图标
imgIsLoaded; var // 图片是否加载完成;
iconIsLoaded; var // icon图片是否加载完成;
imgX = 0
var imgY = 0
var imgScale = 1
initX = 50
initY = 50
iconX = initX
iconY = initY
isDrag = true// 判断是否拖拽
var color = 0// 记住所选颜色
var X, Y, X1, Y1// 画图坐标
var isMouseDown = false// 记录鼠标是否按下
var flag = 0;// 记录绘图路径
(function int() {
canvas = document.getElementById('canvas')
context = canvas.getContext('2d')
loadImg()
})()
function move() {
isDrag = true
}
function draw() {
isDrag = false
}
// 绘制画图
function drowline(num1, num2, num3, num4) {
// 开启新的路径
if (flag) { context.beginPath() }
// 移动画笔的初始位置
context.moveTo(num1, num2)
context.lineWidth = 2
if (color == 0) {
context.strokeStyle = 'red'
} else if (color == 1) {
context.strokeStyle = 'green'
} else if (color == 2) {
context.strokeStyle = 'blue'
}
// 移动画笔的结束位置
context.lineTo(num3, num4)
// 开始绘制
context.stroke()
if (flag != 0) {
X = X1
Y = Y1
}
}
// 图片拖放缩小
function loadImg() {
img = new Image()
img.onload = function() {
imgIsLoaded = true
drawImage()
}
img.src = '../../assets/images/plan.svg' // 矢量图
icon = new Image()
icon.onload = function() {
iconIsLoaded = true
drawImage()
}
icon.src = '../../assets/images/clean.svg' // 地图上的图标
}
function drawImage() {
if (isDrag) {
context.clearRect(0, 0, canvas.width, canvas.height)
context.drawImage(img, 0, 0, img.width, img.height, imgX, imgY, img.width * imgScale, img.height * imgScale)
context.drawImage(icon, iconX, iconY)
}
}
canvas.onmousedown = function(event) {
if (isDrag) {
var pos = windowToCanvas(canvas, event.clientX, event.clientY)
canvas.onmousemove = function(event) {
canvas.style.cursor = 'move'
var pos1 = windowToCanvas(canvas, event.clientX, event.clientY)
var x = pos1.x - pos.x
var y = pos1.y - pos.y
pos = pos1
imgX += x
imgY += y
iconX = imgX + initX
iconY = imgY + initY
drawImage()
}
canvas.onmouseup = function() {
canvas.onmousemove = cnvs_getCoordinates
canvas.onmouseup = null
canvas.style.cursor = 'default'
}
} else {
isMouseDown = true
X = event.offsetX
Y = event.offsetY
canvas.onmousemove = function(event) {
if (isMouseDown) {
X1 = event.offsetX
Y1 = event.offsetY
drowline(X, Y, X1, Y1)
flag++
}
}
canvas.onmouseup = function() {
isMouseDown = false
flag = 0
}
}
}
canvas.onmousewheel = canvas.onwheel = function(event) {
var pos = windowToCanvas(canvas, event.clientX, event.clientY)
event.wheelDelta = event.wheelDelta ? event.wheelDelta : (event.deltaY * (-40))
if (event.wheelDelta > 0) {
imgScale *= 2
imgX = imgX * 2 - pos.x
imgY = imgY * 2 - pos.y
initX = initX * 2
initY = initY * 2
iconX = imgX + initX
iconY = imgY + initY
} else {
imgScale /= 2
imgX = imgX * 0.5 + pos.x * 0.5
imgY = imgY * 0.5 + pos.y * 0.5
initX = initX / 2
initY = initY / 2
iconX = imgX + initX
iconY = imgY + initY
}
drawImage()
}
function windowToCanvas(canvas, x, y) {
var bbox = canvas.getBoundingClientRect()
return {
x: x - bbox.left - (bbox.width - canvas.width) / 2,
y: y - bbox.top - (bbox.height - canvas.height) / 2
}
}
function cnvs_getCoordinates(event) {
var pos = windowToCanvas(canvas, event.clientX, event.clientY)
var w = iconX + icon.width
var h = iconY + icon.height
var mydiv = document.getElementById('div1')
mydiv.innerHTML = 'eventX=' + pos.x + 'eventY=' + pos.y + 'iconX=' + iconX + 'iconY=' + iconY
if (pos.x >= iconX && pos.x <= w && pos.y >= iconY && pos.y <= h) {
// 当鼠标移动到icon上时，显示abc
mydiv.innerHTML = 'abc'
} else {
}
}
script>
```
是不是没对拖拽后的坐标做缓存处理，可以先使用localStorage.setItem进行本地缓存，然后使用localStorage.getItem进行缓存读取
要把线的位置进行存储，就跟图片一样，清空后从新绘制。还有缩放大小，