物体中的负数/正数自身反转?

发布于 2024-10-13 15:16:07 字数 1465 浏览 7 评论 0原文

所以我确信这个问题的答案很简单,我会阅读它并立即开始史诗般的捂脸,但此刻我花了一整天的时间想知道为什么这不起作用,而我就是可以'找不到问题...

我正在尝试构建一个简单的(应该是)系统来围绕中心轴旋转 2d 点,但到目前为止我发现了 2 个问题,这对我来说毫无意义。

问题 1:分配给输入对象的正/负数以看似随机的方式翻转。 问题 2:旋转数学是正确的,但结果却完全不正确。

这是重现此问题的代码:

function doRotate(pos){
    //convert angle to radians
    var ang = 90 * Math.PI / 180;

    //rotate points
    pos.left = Math.round(pos.left * Math.cos(ang) + pos.top * Math.sin(ang));
    pos.top = Math.round(pos.top * Math.cos(ang) - pos.left * Math.sin(ang));

    return pos;
}

var points = {
    'a':{left:32,top:32},
    'b':{left:-32,top:32},
    'c':{left:-32,top:-32},
    'd':{left:32,top:-32}
};

for( var k in points ){
    var msg = 'Start: X:'+points[k].left+' Y:'+points[k].top+'<br />';
    points[k] = doRotate(points[k]);
    var msg = msg+'End: X:'+points[k].left+' Y:'+points[k].top+'<br />';
    document.write( '<p>'+k+':<br />'+msg+'</p>' );
}

现在您希望看到: 一个: 开始:X:32 Y:32 结束:X:32 Y:-32

b: 开始:X:-32 Y:32 结束: X:-32 Y:-32

c: 开始:X:-32 Y:-32 结束:X:-32 Y:32

d: 开始:X:-32 Y:32 结束:X:32 Y:32

但你得到的是:

a: 开始:X:32 Y:32 结束:X:32 Y:32

b: 开始:X:-32 Y:-32 结束:X:32 Y:32

c: 开始:X:-32 Y:-32 结束: X:-32 Y:-32

d: 开始:X:32 Y:32 End: X:-32 Y:-32

我已经三次检查了数学,在 2D 中围绕原点旋转点是 100% 准确的。我什至用 PHP 重新创建了这个测试,它运行得很好。我不明白的是为什么 JS a) 搞砸了变量赋值 b) 没有得出正确的结果?

任何可以提供帮助的人都可以放心,我会用帕特里克爵士引以为豪的脸向他们的洞察力致敬;)

So I'm sure the answer to this will be something simple and I'll read it and immediately commence epic facepalming, but at the moment I've spent an entire day wondering why the heck this isn't working and I just can't find the problem...

I'm trying to build a simple (supposed to be anyway) system to rotate 2d points around a central axis, but I've found 2 problems so far that make no sense to me whatsoever.

Problem 1: The positive/negative numbers assigned to the input object are being flipflopped in a seemingly random fashion.
Problem 2: The rotation math is correct, but the results are anything but.

Here's the code to reproduce this problem:

function doRotate(pos){
    //convert angle to radians
    var ang = 90 * Math.PI / 180;

    //rotate points
    pos.left = Math.round(pos.left * Math.cos(ang) + pos.top * Math.sin(ang));
    pos.top = Math.round(pos.top * Math.cos(ang) - pos.left * Math.sin(ang));

    return pos;
}

var points = {
    'a':{left:32,top:32},
    'b':{left:-32,top:32},
    'c':{left:-32,top:-32},
    'd':{left:32,top:-32}
};

for( var k in points ){
    var msg = 'Start: X:'+points[k].left+' Y:'+points[k].top+'<br />';
    points[k] = doRotate(points[k]);
    var msg = msg+'End: X:'+points[k].left+' Y:'+points[k].top+'<br />';
    document.write( '<p>'+k+':<br />'+msg+'</p>' );
}

Now you'd expect to see:
a:
Start: X:32 Y:32
End: X:32 Y:-32

b:
Start: X:-32 Y:32
End: X:-32 Y:-32

c:
Start: X:-32 Y:-32
End: X:-32 Y:32

d:
Start: X:-32 Y:32
End: X:32 Y:32

But instead you get this:

a:
Start: X:32 Y:32
End: X:32 Y:32

b:
Start: X:-32 Y:-32
End: X:32 Y:32

c:
Start: X:-32 Y:-32
End: X:-32 Y:-32

d:
Start: X:32 Y:32
End: X:-32 Y:-32

I've triple checked the math and that is 100% accurate to rotate points around origin in 2D. I've even recreated this test in PHP and it works perfectly. What I can't figure out is why the heck JS is a) screwing up the variable assignments and b) not coming up with the correct results?

Anyone who can help may rest assured that I will salute their insight with a facepalm Sir Patrick would be proud of ;)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

半衾梦 2024-10-20 15:16:07

等一下 - 你不应该在计算 pos.top 之前保存 pos.left 以便可以使用pos该计算中的 .left 值?

Wait a sec - shouldn't you save pos.left before you compute pos.top so that you can use the old pos.left value in that calculation?

看轻我的陪伴 2024-10-20 15:16:07

在你的“var msg = ...”语句中,你打印points[k].left两次,并且从不打印points[k].top。

In your "var msg = ..." statements, you're printing points[k].left twice, and never printing points[k].top.

丑丑阿 2024-10-20 15:16:07

开始捂脸:

for( var k in points ){
    var msg = 'Start: X:'+points[k].left+' Y:'+points[k].left+'<br />';
    points[k] = doRotate(points[k]);
    var msg = msg+'End: X:'+points[k].left+' Y:'+points[k].left+'<br />';
    document.write( '<p>'+k+':<br />'+msg+'</p>' );
}

应该显示

for( var k in points ){
    var msg = 'Start: X:'+points[k].left+' Y:'+points[k].top+'<br />';
    points[k] = doRotate(points[k]);
    var msg = msg+'End: X:'+points[k].left+' Y:'+points[k].top+'<br />';
    document.write( '<p>'+k+':<br />'+msg+'</p>' );
}

为 Y,当您应该打印 top 属性时,您正在打印 Y 的 left 属性

Commence facepalm:

for( var k in points ){
    var msg = 'Start: X:'+points[k].left+' Y:'+points[k].left+'<br />';
    points[k] = doRotate(points[k]);
    var msg = msg+'End: X:'+points[k].left+' Y:'+points[k].left+'<br />';
    document.write( '<p>'+k+':<br />'+msg+'</p>' );
}

should read

for( var k in points ){
    var msg = 'Start: X:'+points[k].left+' Y:'+points[k].top+'<br />';
    points[k] = doRotate(points[k]);
    var msg = msg+'End: X:'+points[k].left+' Y:'+points[k].top+'<br />';
    document.write( '<p>'+k+':<br />'+msg+'</p>' );
}

You're printing the left property for Y when you should be printing the top property

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文