Geek Answers Handbook

Mouse coordinates do not match after scaling and panning the canvas

I am very new to javascript and canvas, and I have a program that should detect elements animated in an ellipse path. Subsequently, it forms a tree. But this is the main structure that I linked to jsfiddle. It works fine without scaling or panning, but as soon as I try to scale or pan, the coordinates of the mouse go with difficulty. I tried following the markE recommendations from HTML5 canvas to get the coordinates after the translation and translation But I definitely do something wrong and I clearly did not understand what is happening with the canvas and the transformation matrix. I spent about 3 days trying to change all the combinations that I can think of, but I cannot figure it out: s

solvable : Here is my code with scaling and panning the mouse and for animating and detecting elements on an ellipse: 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();
                }

            });`
+4
source share
1 answer

Using a transformation matrix is ​​useful or even necessary in these circumstances:

  • If you are a deeply nested transformation.
  • If you change different drawings with different transformations.
  • If you need the time coordinates of the conversion.
  • If you are doing transforms using skew.
  • If you do conversions with rotation.

But for a simpler case of panning and scaling the entire canvas, there is a simpler method.

, :

var scaleFactor=1.00;
var panX=0;
var panY=0;

.

  • .
  • .
  • 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>
+11

More articles:


All Articles