HTML5 Canvas:旋转后获取矩形坐标(相对于屏幕)

Posted

技术标签:

【中文标题】HTML5 Canvas:旋转后获取矩形坐标(相对于屏幕)【英文标题】:HTML5 Canvas: Get rect coords after rotation (relative to screen) 【发布时间】:2014-04-21 02:23:19 【问题描述】:
update: function(delta) 
    for (var i = 0; i < this.bullets.length; i++) 
        this.bullets[i].velocity = this.bullets[i].speed * delta;
        this.bullets[i].contextX += this.bullets[i].velocity;
    
,

draw: function(ctx) 
    for (var i = 0; i < this.bullets.length; i++) 
        ctx.save();

        // Move the context to where the player is then make it face the target degree
        ctx.translate(this.bullets[i].startX, this.bullets[i].startY);
        ctx.rotate(this.bullets[i].rotation);

        ctx.fillRect(this.bullets[i].contextX, -5, 10, 10);
        ctx.restore();
    

上面的代码包含两个方法,它们描述了一个管理项目符号绘制和更新的类。 update 方法移动一个子弹,然后 draw 函数将它绘制到屏幕上。

画布执行以下操作:

    保存当前画布上下文状态 将上下文移动到子弹的来源 将画布旋转到子弹射击时的朝向 画矩形 将画布上下文恢复到原始状态

这是我制作的一张图片,可以更好地描述画布上下文正在做什么:

所以我们知道子弹的 x 位置,但这与旋转时的上下文相关。我需要知道的是子弹与实际屏幕相关的 X 和 Y 属性。关于如何做到这一点的任何想法?

【问题讨论】:

【参考方案1】:

您可以像这样计算旋转子弹的未转换画布屏幕位置:

此函数使用一些三角函数来获取子弹旋转前后的角度,并使用毕达哥拉定理计算子弹距离玩家的距离。

function bulletXY(playerX,playerY,bulletX,bulletY,rotation)
    var dx=bulletX-playerX;
    var dy=bulletY-playerY;
    var length=Math.sqrt(dx*dx+dy*dy);
    var bulletAngle=Math.atan2(dy,dx);
    var screenX=playerX+length*Math.cos(bulletAngle+rotation);
    var screenY=playerY+length*Math.sin(bulletAngle+rotation);
    return(x:screenX,y:screenY);

一个演示:http://jsfiddle.net/m1erickson/EDk9W/

【讨论】:

老兄,这绝对是传奇。您在这里所做的事情是否有名称,以便我可以阅读更多相关信息并尝试了解它?也许是你读过的书或什么的?如果您能帮助我尝试了解您是如何解决这个问题的,我将不胜感激!非常感谢!!! :-) 不客气!实际上这是一些三角函数——没有什么传奇的 :) 这是一篇相当深入的博客文章,可以帮助您入门:raywenderlich.com/35866/… 祝您的项目好运...干杯! 另外一件事,我看到这使用了玩家的位置,如果我只是想获得子弹在屏幕上的位置,为什么还需要这个? 您需要知道旋转点(在您的情况下,这是玩家的位置)。那是因为 context.rotate 将围绕该旋转点旋转。把旋转点想象成一个铅笔尖,你已经把它塞进了一张纸上。当您旋转纸张时,纸张上的所有对象都将围绕该铅笔点旋转。 如果说有 4 个玩家,那会怎样呢?旋转点是否必须相对于发射子弹的玩家?只是想用这种方法在我的脑海中进行简单的碰撞检测,似乎需要大量数据才能确定子弹在哪里

以上是关于HTML5 Canvas:旋转后获取矩形坐标(相对于屏幕)的主要内容,如果未能解决你的问题,请参考以下文章

画布旋转后如何检测画布上的点

html5 canvas在img标签的图片上绘制矩形框、矩形框为1px时线条模糊问题

HTML5 Canvas:我如何在旋转后处理反向翻译()?

html5中canvas通过js绘制圆角矩形

html5中canvas通过js绘制圆角矩形

HTML5 - Canvas