我是javascript和canvas的新手，我有一个程序可以检测椭圆路径上的动画元素。它后来形成一个树..但这是我链接到jsfiddle的基本结构。 它没有缩放或平移工作正常，但一旦我尝试缩放或平移，鼠标坐标就会变得混乱。 我尝试从HTML5 canvas get coordinates after zoom and translate跟踪markE的建议 但我肯定做错了什么，我显然不了解画布和转换矩阵发生了什么。我花了大约3天试图改变我能想到的所有组合，但我似乎无法弄明白：s
解决： 这是我的代码，包括缩放和鼠标平移以及动画和检测椭圆上的元素： http://jsfiddle.net/metalloyd/A8hgz/
theCanvas = document.getElementById("canvasOne");
context = theCanvas.getContext("2d");
var status = document.getElementById('status');
var $canvas = $("#canvasOne");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();
var cw = theCanvas.width;
var ch = theCanvas.height;
var scaleFactor = 1.00;
var panX = 0;
var panY = 0;
var mainX = 250;
// setting the middle point position X value
var mainY = 100;
// setting the middle point position Y value
var mainR = 125;
// main ellipse radius R
var no = 5;
// number of nodes to display
var div_angle = 360 / no;
var circle = {
centerX: mainX,
centerY: mainY + 100,
radius: mainR,
angle: .9
};
var ball = {
x: 0,
y: 0,
speed: .1
};
var a = 1.8;
//Ellipse width
var b = .5;
//Ellipse height
//Scale and Pan variables
var translatePos = {
x: 1,
y: 1
};
var startDragOffset = {};
var mouseDown = false;
var elements = [{}];
// Animate
var animateInterval = setInterval(drawScreen, 1);
//Animation
function drawScreen() {
context.clearRect(0, 0, cw, ch);
// Background box
context.beginPath();
context.fillStyle = '#EEEEEE';
context.fillRect(0, 0, theCanvas.width, theCanvas.height);
context.strokeRect(1, 1, theCanvas.width - 2, theCanvas.height - 2);
context.closePath();
context.save();
context.translate(panX, panY);
context.scale(scaleFactor, scaleFactor);
ball.speed = ball.speed + 0.001;
for (var i = 1; i <= no; i++) {
// male
new_angle = div_angle * i;
//Starting positions for ball 1 at different points on the ellipse
circle.angle = (new_angle * (0.0174532925)) + ball.speed;
//elliptical x position and y position for animation for the first ball
//xx and yy records the first balls coordinates
xx = ball.x = circle.centerX - (a * Math.cos(circle.angle)) * (circle.radius);
yy = ball.y = circle.centerY + (b * Math.sin(circle.angle)) * (circle.radius);
//Draw the first ball with position x and y
context.fillStyle = "#000000";
context.beginPath();
context.arc(ball.x, ball.y, 10, 0, Math.PI * 2, true);
context.fill();
context.closePath();
//alert("male Positions "+"X: "+ball.x+ " Y: "+ball.y);
// female
new_angle = div_angle * i + 4;
//Starting positions for ball 2 at different points on the ellipse
circle.angle = (new_angle * (0.0174532925)) + ball.speed;
//elliptical x position and y position for animation for the second ball
//ball.x and ball.y record the second balls positions
ball.x = circle.centerX - (a * Math.cos(circle.angle)) * (circle.radius);
ball.y = circle.centerY + (b * Math.sin(circle.angle)) * (circle.radius);
context.fillStyle = "#000000";
context.beginPath();
context.arc(ball.x, ball.y, 10, 0, Math.PI * 2, true);
context.fill();
context.closePath();
//alert("female Positions "+"X: "+ball.x+ " Y: "+ball.y);
//Record the ball positions in elements array for locating positions with mouse coordinates.
elements[i] = {
id: i,
femaleX: ball.x,
femaleY: ball.y,
maleX: xx,
maleY: yy,
w: 10 //radius of the ball to draw while locating the positions
};
//Text Numbering
context.beginPath();
context.fillStyle = "blue";
context.font = "bold 16px Arial";
context.fillText(elements[i].id, ball.x - 20, ball.y + 20);
context.closePath();
// line drawing--Connecting lines to the balls from the center.
context.moveTo(mainX, mainY);
context.lineTo((ball.x + xx) / 2, (ball.y + yy) / 2);
//Draw line till the middle point between ball1 and ball2
context.stroke();
context.fill();
context.closePath();
}
// center point
context.fillStyle = "#000000";
context.beginPath();
context.arc(mainX, mainY, 15, 0, Math.PI * 2, true);
context.fill();
context.closePath();
context.restore();
}
// Event Listeners
// Mouse move event to alert the position of the ball on screen
document.getElementById("plus").addEventListener("click", function () {
scaleFactor *= 1.1;
drawScreen();
}, false);
document.getElementById("minus").addEventListener("click", function () {
scaleFactor /= 1.1;
drawScreen();
}, false);
// Event listeners to handle screen panning
context.canvas.addEventListener("mousedown", function (evt) {
mouseDown = true;
startDragOffset.x = evt.clientX - translatePos.x;
startDragOffset.y = evt.clientY - translatePos.y;
});
context.canvas.addEventListener("mouseup", function (evt) {
mouseDown = false;
});
context.canvas.addEventListener("mouseover", function (evt) {
mouseDown = false;
});
context.canvas.addEventListener("mouseout", function (evt) {
mouseDown = false;
});
context.canvas.addEventListener("mousemove", function (evt) {
if (mouseDown) {
translatePos.x = evt.clientX - startDragOffset.x;
translatePos.y = evt.clientY - startDragOffset.y;
panX = translatePos.x;
panY = translatePos.y;
drawScreen();
}
evt.preventDefault();
evt.stopPropagation();
var mouseX = parseInt(evt.clientX - offsetX);
var mouseY = parseInt(evt.clientY - offsetY);
var mouseXT = parseInt((mouseX - panX) / scaleFactor);
var mouseYT = parseInt((mouseY - panY) / scaleFactor);
status.innerHTML = mouseXT + " | " + mouseYT;
for (var i = 1; i < elements.length; i++) {
var b = elements[i];
context.closePath();
context.beginPath();
context.arc(b.femaleX, b.femaleY, 10, 0, Math.PI * 2);
context.arc(b.maleX, b.maleY, 10, 0, Math.PI * 2);
if (context.isPointInPath(mouseXT, mouseYT)) {
theCanvas.style.cursor = 'pointer';
alert(b.id + " female.x: " + b.femaleX + " female.y: " + b.femaleY + " ball.x: " + ball.x + " ball.y: " + ball.y);
return;
} else theCanvas.style.cursor = 'default';
context.closePath();
}
});`
答案 0 :(得分：14)
在这些情况下，使用转换矩阵很有用甚至是必要的：
但是对于更简单的平移和缩放整个画布的情况，有一种更简单的方法。
首先，设置变量以保持当前的缩放和平移量：
var scaleFactor=1.00;
var panX=0;
var panY=0;
然后使用这些pan＆amp;缩放变量以完成所有绘图。
panX变量进行翻译。scaleFactor变量进行缩放。示例代码：
function drawTranslated(){
ctx.clearRect(0,0,cw,ch);
ctx.save();
ctx.translate(panX,panY);
ctx.scale(scaleFactor,scaleFactor);
ctx.beginPath();
ctx.arc(circleX,circleY,15,0,Math.PI*2);
ctx.closePath();
ctx.fillStyle=randomColor();
ctx.fill();
ctx.restore();
}
现在，关于鼠标坐标：
浏览器始终以未转换的坐标返回鼠标位置。您的绘图已在变换的空间中完成。如果您想知道鼠标在变换空间中的位置，可以将未转换的鼠标坐标转换为变换后的坐标，如下所示：
var mouseXTransformed = (mouseX-panX) / scaleFactor;
var mouseYTransformed = (mouseY-panY) / scaleFactor;
以下是示例代码和演示： http://jsfiddle.net/m1erickson/HwNp3/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
#canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var scrollX=$canvas.scrollLeft();
var scrollY=$canvas.scrollTop();
var cw=canvas.width;
var ch=canvas.height;
var scaleFactor=1.00;
var panX=0;
var panY=0;
var circleX=150;
var circleY=150;
var $screen=$("#screen");
var $transformed=$("#transformed");
var $trx=$("#trx");
drawTranslated();
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#scaledown").click(function(){ scaleFactor/=1.1; drawTranslated(); });
$("#scaleup").click(function(){ scaleFactor*=1.1; drawTranslated(); });
$("#panleft").click(function(){ panX-=10; drawTranslated(); });
$("#panright").click(function(){ panX+=10; drawTranslated(); });
function drawTranslated(){
ctx.clearRect(0,0,cw,ch);
ctx.save();
ctx.translate(panX,panY);
ctx.scale(scaleFactor,scaleFactor);
ctx.beginPath();
ctx.arc(circleX,circleY,15,0,Math.PI*2);
ctx.closePath();
ctx.fillStyle=randomColor();
ctx.fill();
ctx.restore();
$trx.text("Pan: "+panX+", Scale: "+scaleFactor);
}
function handleMouseMove(e){
e.preventDefault();
e.stopPropagation();
var mouseX=parseInt(e.clientX-offsetX);
var mouseY=parseInt(e.clientY-offsetY);
var mouseXT=parseInt((mouseX-panX)/scaleFactor);
var mouseYT=parseInt((mouseY-panY)/scaleFactor);
$screen.text("Screen Coordinates: "+mouseX+"/"+mouseY);
$transformed.text("Transformed Coordinates: "+mouseXT+"/"+mouseYT);
}
function randomColor(){
return('#'+Math.floor(Math.random()*16777215).toString(16));
}
}); // end $(function(){});
</script>
</head>
<body>
<h3>Transformed coordinates are mouseXY in transformed space.<br>The circles center is always at translated [150,150]</h3>
<h4 id=screen>Screen Coordinates:</h4>
<h4 id=transformed>Transformed Coordinates:</h4>
<h4 id=trx>Pan & Scale</h4>
<button id=scaledown>Scale Down</button>
<button id=scaleup>Scale Up</button>
<button id=panleft>Pan Left</button>
<button id=panright>Pan Right</button><br>
<canvas id="canvas" width=350 height=400></canvas>
</body>
</html>