学着写了一个Canvas 涂鸦、缩放、拖拽的功能，碰到问题
0
悬赏园豆：20
[已解决问题]
解决于 2017-01-03 22:01
目前代码都是基于网上样例而改的：已经实现右键拖拽、滚轮放大小、左键涂鸦。
下一步想要增加的功能：在涂鸦后也可以进行右键拖拽、滚轮放大小并且不丢原来涂鸦内容。
<!DOCTYPE html>
<html>
<head>
<title>Canvas 拖拽、缩放、涂鸦</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script>
var mousePressed = false;
var lastX, lastY;
var canvas, ctx;
var height = document.documentElement.clientHeight;
var img,
imgIsLoaded,//图片是否加载完成;
imgX = 0,
imgY = 0,
imgScale = 1;//倍数
function InitThis() {
StopYouJian();
canvas = document.getElementById('myCanvas');
canvas.height = height - 200;
canvas.width = $(".jumbotron").width();
ctx = canvas.getContext("2d");
$(".col-lg-2").height(height - 50).css("overflow-y", "scroll");
img = new Image();
img.onload = function () {
imgIsLoaded = true;
drawImage();
};
img.src = "main.jpg";
$("#myCanvas").mousedown(function (e) {
mousePressed = true;
Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
});
$("#myCanvas").mousemove(function (e) {
if (mousePressed) {
Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
}
});
$("#myCanvas").mouseup(function (e) {
mousePressed = false;
});
$("#myCanvas").mouseleave(function (e) {
mousePressed = false;
});
canvas.onmousedown = function (event) {
var btnNum = event.button;
if (btnNum == 0) {
//左键
}
else if (btnNum == 1) {
//按下中键
}
else if (btnNum == 2) {
//鼠标右键
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;
drawImage();
}
}
else {
//你的鼠标太神了，我识别不了
alert("你的鼠标太神了，我识别不了？你能告诉我你的鼠标品牌吗？我也想买一个。");
}
canvas.onmouseup = function () {
canvas.onmousemove = null;
canvas.onmouseup = null;
canvas.style.cursor = "default";
}
}
//滚动
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;
} else {
imgScale /= 2;
imgX = imgX * 0.5 + pos.x * 0.5;
imgY = imgY * 0.5 + pos.y * 0.5;
}
drawImage();
}
}
function drawImage() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, img.width, img.height, imgX, imgY, img.width * imgScale, img.height * imgScale);
}
function clearArea() {
// Use the identity matrix while clearing the canvas
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
function Draw(x, y, isDown) {
if (isDown) {
ctx.beginPath();
ctx.strokeStyle = $("#selColor").val();
ctx.lineWidth = $("#selWidth").val();
ctx.lineJoin = "round";
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.closePath();
ctx.stroke();
}
lastX = x; lastY = y;
}
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 StopYouJian() {
document.oncontextmenu = function () {
return false;
};
}
$(function () {
InitThis();
});
</script>
<style>
canvas {
border: 1px solid #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="row" style="margin-top:10px;">
<div class="col-md-2 col-lg-2">
<div class="panel panel-primary">
<div class="panel-heading text-center">
美女
</div>
<div class="panel-body">
</div>
</div>
</div>
<div class="col-md-10 col-lg-10">
<div class="jumbotron">
<div align="center">
<canvas id="myCanvas"></canvas>
<div class="control-ops">
<button type="button" class="btn btn-primary" onclick="javascript:clearArea();return false;">清空画板</button>
Line width : <select id="selWidth">
<option value="2" selected="selected">2</option>
<option value="4">4</option>
<option value="6">6</option>
<option value="8">8</option>
<option value="10">10</option>
<option value="12">12</option>
<option value="36">36</option>
</select>
Color : <select id="selColor">
<option value="black">black</option>
<option value="blue">blue</option>
<option value="red" selected="selected">red</option>
<option value="green">green</option>
<option value="yellow">yellow</option>
<option value="gray">gray</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
请放到本地演示，并在当前目录放一张main.jpg的图片，这样看得清楚一点。
问题：在涂鸦后进行右键拖拽、滚轮放大小并且不丢原来涂鸦内容。
最佳答案
0
先使用getImageData保存画板图像数据,经过拖拽、缩放处理后,再用putImageData绘制保存的数据.
收获园豆：20
试了一下，保存不了。
@abc54288:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas 拖拽、缩放、涂鸦</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script>
var mousePressed = false;
var lastX, lastY;
var canvas, ctx;
var height = document.documentElement.clientHeight;
var img,
imgIsLoaded,//图片是否加载完成;
imgX = 0,
imgY = 0,
imgScale = 1;//倍数
function InitThis() {
StopYouJian();
canvas = document.getElementById('myCanvas');
canvas.height = height - 200;
canvas.width = $(".jumbotron").width();
ctx = canvas.getContext("2d");
$(".col-lg-2").height(height - 50).css("overflow-y", "scroll");
img = new Image();
img.onload = function () {
imgIsLoaded = true;
drawImage();
};
img.src = "main.jpg";
$("#myCanvas").mousedown(function (e) {
mousePressed = true;
Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
});
$("#myCanvas").mousemove(function (e) {
if (mousePressed) {
Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
}
});
$("#myCanvas").mouseup(function (e) {
mousePressed = false;
});
$("#myCanvas").mouseleave(function (e) {
mousePressed = false;
});
canvas.onmousedown = function (event) {
var btnNum = event.button;
if (btnNum == 0) {
//左键
}
else if (btnNum == 1) {
//按下中键
}
else if (btnNum == 2) {
//鼠标右键
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;
drawImage();
}
}
else {
//你的鼠标太神了，我识别不了
alert("你的鼠标太神了，我识别不了？你能告诉我你的鼠标品牌吗？我也想买一个。");
}
canvas.onmouseup = function () {
canvas.onmousemove = null;
canvas.onmouseup = null;
canvas.style.cursor = "default";
}
}
//滚动
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;
} else {
imgScale /= 2;
imgX = imgX * 0.5 + pos.x * 0.5;
imgY = imgY * 0.5 + pos.y * 0.5;
}
drawImage();
}
}
function drawImage() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, img.width, img.height, imgX, imgY, img.width * imgScale, img.height * imgScale);
}
function clearArea() {
// Use the identity matrix while clearing the canvas
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
function Draw(x, y, isDown) {
if (isDown) {
ctx.beginPath();
ctx.strokeStyle = $("#selColor").val();
ctx.lineWidth = $("#selWidth").val();
ctx.lineJoin = "round";
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.closePath();
ctx.stroke();
}
lastX = x; lastY = y;
}
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 StopYouJian() {
document.oncontextmenu = function () {
return false;
};
}
var image=null;
function Save(){
image=ctx.getImageData(0,0,canvas.width,canvas.height);
}
function Move(){
clearArea();
ctx.putImageData(image,100,100);
}
$(function () {
InitThis();
});
</script>
<style>
canvas {
border: 1px solid #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="row" style="margin-top:10px;">
<div class="col-md-2 col-lg-2">
<div class="panel panel-primary">
<div class="panel-heading text-center">
美女
</div>
<div class="panel-body">
</div>
</div>
</div>
<div class="col-md-10 col-lg-10">
<div class="jumbotron">
<div align="center">
<canvas id="myCanvas"></canvas>
<div class="control-ops">
<button type="button" class="btn btn-primary" onclick="javascript:Save();return false;">保存</button>
<button type="button" class="btn btn-primary" onclick="javascript:Move();return false;">移动</button>
<button type="button" class="btn btn-primary" onclick="javascript:clearArea();return false;">清空画板</button>
Line width : <select id="selWidth">
<option value="2" selected="selected">2</option>
<option value="4">4</option>
<option value="6">6</option>
<option value="8">8</option>
<option value="10">10</option>
<option value="12">12</option>
<option value="36">36</option>
</select>
Color : <select id="selColor">
<option value="black">black</option>
<option value="blue">blue</option>
<option value="red" selected="selected">red</option>
<option value="green">green</option>
<option value="yellow">yellow</option>
<option value="gray">gray</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
我简单加了两个按钮,一个保存画板数据,一个把保存的画板移动(100,100).
其他回答(1)
0
不太明白你的问题，你可以把canvas绘画过程封装，在拖放过程中运行就可以了。