将鼠标坐标转换为HTML5 Canvas转换后上下文的最佳方法

Question

I am testing to see if the mouse is located on an object. The problem is the object has been transformed. I have graph of objects, mainly the camera, then the slider object, and finally the shape object. I need to be able to see if the mouse coordinates are inside a specified rectangle relative to the shape object.

Here I have my game loop which transforms the clears the canvas then transforms the camera. I then go into a for loop and loop through all the objects calling their specific "draw" method, passing in the context that has been transformed.

Game.prototype.gameLoop = function()
{
    this.context.clearRect(0,0,this.canvas.width, this.canvas.height);
    this.context.save();



    this.context.translate(this.canvas.width/2, this.canvas.height/2);
    this.context.scale(this.camera.scale,this.camera.scale);
    this.context.rotate(this.camera.rotate);
    this.context.translate(this.camera.x,this.camera.y);


    for(var i=0;i<this.objects.length;i++)
    {
        this.objects[i].update();
        this.objects[i].draw(this.context);         
    }
    this.context.restore();
}

Here is one of the objects draw method. The object is called a Slider. It successfully is called and performs a transformation based on it's x,y, and rotate values.

Slider.prototype.draw = function(ctx)
{
    ctx.save();

    ctx.translate(this.x,this.y);
    ctx.rotate(this.rotate);

    this.pointer.draw(ctx);

    ctx.fillStyle = "black";
    ctx.beginPath();
    ctx.moveTo(-(this.width/2),0);
    ctx.lineTo((this.width/2),0);
    ctx.lineTo((this.width/2),5);
    ctx.lineTo(-(this.width/2),5);
    ctx.fill();


    ctx.restore();

}

Finally I have the Shape's draw method which successfully is called and transforms the context yet again.

Shape.prototype.draw = function(ctx)
{
    ctx.save();

    ctx.translate(this.x,this.y);
    ctx.rotate(this.rotate);

    if(this.isMouseOver)
        ctx.fillStyle = this.color;
    else
        ctx.fillStyle = this.mouseOverFillColor;
    ctx.fill(this.shape);   

    ctx.restore();
}

And lastly, here is the method that gets called when the mouse moves called "mouseEventListener". I need to be able to transform the coordinates to see them relative to the shape.

Shape.prototype.mouseEventListener = function(evt,type)
{
    console.log(evt.clientX+" "+evt.clientY);
}

Any ideas? If needed I can create a parent pointer object and have the shape point to the slider and the slider point to the camera to access each parent's x,y, rotate vales.

I am kind of looking for the equivalent of Android's mappoints method, which transforms points based off a matrix. In this case the context has been transformed multiple times and I need a way to capture that state for each object, and then transform some points.

I would also like to do all this easily without any other libraries.

Thank you.

Answer 1

HOT OFF THE PRESS

While writing this answer I noticed that the standard has just changed. HTML standard doc 28 Nov 2016

There are now two new calls to the canvas 2D API 😀👍

• ctx.getTransform()
• ctx.resetTransform()

GetTransform returns a DOMMatrix which is different from the existing currentTransform that returns a SVGMatrix .

The adoption and use of these two new (most welcome and needed) calls is unknown by me at this time.

Now back to my regular belligerency answer.

In the perfect world you would just use

var mat = ctx.currentTransform;

 var mat = ctx.getTransform();

which returns a SVGMatrix DOMMatrix which you then get the inverse matrix of.

var invMat = mat.inverse();

 mat.invertSelf();

Then to convert from screen coordinates to world coordinates

I am now guessing as the DOMMatrix has a,b,c,d,e,f but I d'ont know if they are 2D as the DOMMatrix is a 3D matrix.

 var wX = screenX * invMat.a + screenY * invMat.c + invMat.e;
 var wY = screenX * invMat.b + screenY * invMat.d + invMat.f;

And that is it.

BUT for some reason browsers seem to think that our lives are better off without this standard object. That writing a huge amount of slow javascript is better.

ctx.currentTransform is hidden behind prefixes (moz) and flags (chrome experimental canvas API) and ignored IE (don't know what Edge does??)

---

Till browsers catch up.

To solve your problem you need to replace all your transformations with your own so that you can track the current transform. There are plenty of JS libs to do this for you. Be aware that most are not aware of static memory/object pooling and can add undue performance hits on your code. I will not endorse any lib at this time.

Example of a matrix math module

 var matrixMath =( function(){ var _a,_b,_c,_d,_e,_f; var xdx,xdy; var stack = []; var stackPos = 0; var API = { // matrix = create() // creates identity matrix 1,0,0,1,0,0 // matrix = create([1,0,0,1,0,0]); // creates from array // matrix = create(matrix); // creates from matrix (copy) // matrix = create(x, y, scale, rotate); // creates from x,y uniform scale and rotation // matrix = create(x, y, scaleX, scaleY, rotate); // creates from x,y, scaleX,scaleY, rotation // matrix = create(a,b,c,d,e,f); create : function(a,b,c,d,e,f){ var mat = {}; if(a === undefined){ mat.a = mat.d = 1; mat.b = mat.c = mat.e = mat.f = 0; return mat; } if(Array.isArray(a)){ mat.a = a[0]; mat.b = a[1]; mat.c = a[2]; mat.d = a[3]; mat.e = a[4]; mat.f = a[5]; return mat; } if(aa !== undefined){ mat.a = aa; mat.b = ab; mat.c = ac; mat.d = ad; mat.e = ae; mat.f = af; return mat } if(f === undefined){ mat.e = a; mat.f = b; if(e === undefined){ mat.d = mat.a = Math.cos(d) * c; mat.c = -(mat.b = Math.sin(d) * c); return mat; } mat.d = (mat.a = Math.cos(e)) * d; mat.c = -(mat.b = Math.sin(e)) * d; mat.a *= c; mat.b *= c; return mat; } mat.a = a; mat.b = b; mat.c = c; mat.d = d; mat.e = e; mat.f = f; return mat }, // point = matrixMultPoint(matrix,x,y,returnPoint) // returnPoint is optional. matrixMultPoint : function(mA,x,y,point){ if(point === undefined){ point = {}; } point.x = x * mA.a + y * mA.c + mA.e; point.y = x * mA.b + y * mA.d + mA.f; return point; }, // C = A * B // resultMatrix = matrixMult(matrixA, matrixB, returnMatrix); // returnMatrix is optional matrixMult : function(mA,mB,mat){ // mat = mA * mB if(mat === undefined){ mat = {}; } mat.a = mA.a * mB.a + mA.c * mB.b; mat.b = mA.b * mB.a + mA.d * mB.b; mat.c = mA.a * mB.c + mA.c * mB.d; mat.d = mA.b * mB.c + mA.d * mB.d; mat.e = mA.a * mB.e + mA.c * mB.f + mA.e; mat.f = mA.b * mB.e + mA.d * mB.f + mA.f; return mat; }, transform : function(mA,a,b,c,d,e,f){ // mat = mA * mB _a = mA.a * a + mA.c * b; _b = mA.b * a + mA.d * b; _c = mA.a * c + mA.c * d; _d = mA.b * c + mA.d * d; mA.e = mA.a * e + mA.c * f + mA.e; mA.f = mA.b * e + mA.d * f + mA.f; mA.a = _a; mA.b = _b; mA.c = _c; mA.d = _d; return mA; }, setTransform : function(mA,a,b,c,d,e,f){ // mat = mA * mB mA.a = a; mA.b = b; mA.c = c; mA.d = d; mA.e = e; mA.f = f; return mA; }, resetStack : function(){ // in case you do not match save and restores // because you have re inited the 2D context stackPos = 0; stack.length = 0; }, save : function(mA){ var mat; if(stack.length <= stackPos){ stack[stackPos++] = API.create(mA); return; } mat = stack[stackPos++]; mat.a = mA.a; mat.b = mA.b; mat.c = mA.c; mat.d = mA.d; mat.e = mA.e; mat.f = mA.f; }, restore : function(mA){ var mat; if(stackPos > 0){ stackPos -= 1; mat = stack[stackPos]; mA.a = mat.a; mA.b = mat.b; mA.c = mat.c; mA.d = mat.d; mA.e = mat.e; mA.f = mat.f; } return mA; }, identity : function(mA){ mA.a = mA.d = 1; mA.b = mA.c = mA.e = mA.f = 0; return mA; }, translate : function(mA, x,y){ // mat = mat * translate(x,y) mA.e = mA.a * x + mA.c * y + mA.e; mA.f = mA.b * x + mA.d * y + mA.f; return mA; }, rotate : function(mA,rotate){ xdx = Math.cos(rotate); xdy = Math.sin(rotate); _a = mA.a * xdx + mA.c * xdy; _b = mA.b * xdx + mA.d * xdy; _c = mA.c * xdx - mA.a * xdy; _d = mA.d * xdx - mA.b * xdy; mA.a = _a; mA.b = _b; mA.c = _c; mA.d = _d; return mA; }, // Scales mA // matrix = scale(mA,scale); // uniform scale // matrix = scale(mA,scaleX,scaleY); // scaleX,scaleY scale : function(mA,scaleX,scaleY){ if(scaleY === undefined){ scaleY = scaleX; } mA.a *= scaleX; mA.b *= scaleX; mA.c *= scaleY; mA.d *= scaleY; return mA; }, // invert(matrix,returnMatrix); // returnMatrix is optional invert : function(mA,mat){ if(mat === undefined){ mat = {}; } var d = mA.a * mA.d - mA.b * mA.c; mat.a = mA.d / d; mat.b = -mA.b / d; mat.c = -mA.c / d; mat.d = mA.a / d; mat.e = (mA.c * mA.f - mA.d * mA.e) / d; mat.f = -(mA.a * mA.f - mA.b * mA.e) / d; return mat; }, getRotate : function(mA,fromY){ return !fromY ? Math.atan2(mA.b,mA.a) : Math.atan2(mA.d,mA.c) ; }, getScale : function(mA,fromY){ return !fromY ? Math.sqrt(mA.b * mA.b + mA.a * mA.a) : Math.sqrt(mA.c * mA.c + mA.d * mA.d) ; }, getOrigin : function(mA,point){ if(point === undefined){ point = {}; } point.x = mA.e; point.y = mA.f; return point; }, } return API; })(); 

To use the above code mirror all your transformations

// do once only
var cMatrix = matrixMath.create(); // create default identity matrix
var cIMatrix = matrixMath.create(); // create a matrix to hold the inverse
var worldP = {x:0,y:0}; // to hold world coordinates.

// in  main loop
matrixMath.identity(cMatrix);  // resets to default transform.
matrixMath.translate(cMatrix,x,y);  // same as ctx.translate
matrixMath.rotate(cMatrix,angle);  // same as ctx.rotate
matrixMath.scale(cMatrix,scaleX,scaleY);  // same as ctx.scale.. Has variant see code.
matrixMath.transform(cMatrix,a,b,c,d,e,f);  // same as ctx.transform
matrixMath.setTransform(cMatrix,a,b,c,d,e,f); // same as ctx.setTransform 
matrixMath.save(cMatrix);  // save and restores to matrixMath internal stack
matrixMath.restore(cMatrix); // NOTE very simple stack look at code to understand its function.


// set the context to the transform 
ctx.setTransfrom(cMatrix.a, cMatrix.b, cMatrix.c, cMatrix.d, cMatrix.e, cMatrix.f);

// Draw what you need.

To get the world coordinates

cIMatrix = matrixMath.invert(cMatrix,cIMatrix);
// screenX,screenY are the screen position you wish to covert to world.
worldP = matrixMath.matrixMultPoint(cIMatrix,screenX,screenY,worldP);
// worldP.x and worldP.y are now in transformed space.

Please note the matrixMath object was just written for this answer and is untested. It may contain some typos though it has passed basic parsing test. It is intended only as a How To example of matrix math.