极客观点
项目管理
HarmonyOS
问题描述
最近项目中需要用canvas实现图片的拖放以及缩放，还要能够在图片上进行路径绘制，但是我进行路径绘制之后进行拖放操作，会清空之前的路径
问题出现的环境背景及自己尝试过哪些方法
经过检查 发现是每次进行拖放操作时会先清空画布 context.clearRect(0, 0, canvas.width, canvas.height);，当注释掉这一句的时候图片就会无限拖放复制，请各位看看有什么解决办法让两者可以兼容
相关代码
// 请把代码文本粘贴到下方（请勿用图片代替代码）
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title></title>
<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>
<script type="text/javascript">
var canvas, context;
var img,//图片对象
icon,//图标
imgIsLoaded,//图片是否加载完成;
iconIsLoaded,//icon图片是否加载完成;
imgX = 0,
imgY = 0,
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/img/insert.png"; //矢量图
icon = new Image();
icon.onload = function () {
iconIsLoaded = true;
drawImage();
}
icon.src = "../assets/img/addimg.png"; // 地图上的图标
}
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>
</body>
</html>
你期待的结果是什么？实际看到的错误信息又是什么？
希望更改过后的代码能够实现图片拖放，之后还能按照上一步绘制的路径继续绘制
html5
你不是记录了路径么, 拖动图片的时候清了没画吧. 你还可以分下层