将鼠标坐标转换为HTML5 Canvas转换后的上下文的最佳方法 [英] Best way to transform mouse coordinates to HTML5 Canvas's transformed context

问题描述

我正在测试鼠标是否位于对象上。问题是对象已被转换。我有对象图，主要是相机，然后是滑块对象，最后是形状对象。我需要能够看到鼠标坐标是否在相对于形状对象的指定矩形内。

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.

这里我有我的游戏循环，它会转换清除画布然后改变相机。然后我进入for循环并遍历所有调用其特定draw方法的对象，传入已经转换的上下文。

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();
}

这是draw方法的对象之一。该对象称为Slider。它被成功调用并根据它的x，y和旋转值执行转换。

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();

}

最后我有成功调用的Shape的draw方法再次转换上下文。

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();
}

最后，这是当鼠标移动时调用的方法 mouseEventListener。我需要能够转换坐标以查看它们相对于形状。

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);
}

有什么想法吗？如果需要，我可以创建一个父指针对象，并使形状指向滑块，滑块指向相机以访问每个父级的x，y，旋转值。

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.

我正在寻找相当于Android的mappoints方法，它根据矩阵转换点。在这种情况下，上下文已被多次转换，我需要一种方法来捕获每个对象的状态，然后转换一些点。

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.

谢谢。

推荐答案

HOT OFF THE THE

在写这个答案时，我注意到标准刚刚改变了。 HTML标准文档2016年11月28日

这篇关于将鼠标坐标转换为HTML5 Canvas转换后的上下文的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！