如何使用键旋转和翻译 html 文档中的图像？ (javascript)答案

【问题标题】：How can I rotate and translate an image from a html document using keys? (javascript)如何使用键旋转和翻译 html 文档中的图像？ (javascript)
【发布时间】：2017-11-18 18:10:40
【问题描述】：

图像随着箭头移动，并将视线旋转到移动的地方。我有这段代码，但是当图像处于 360º 时，我必须将其重新启动到 0º。但是当这种情况发生时，图像会以奇怪的方式跳跃

<html>
<head>
    <title>Keys</title>
    <script src="script.js"></script>
</head>
<body>
    <img src="http://icon-icons.com/icons2/281/PNG/256/Airport-icon_30354.png" id="img" style="width:100px">
</body>
</html>

script.js

对于每个键，我检查是否必须增加或减少角度来旋转图像，然后检查我是否没有离开 0º 和 360º 的限制。如果是这样，我会根据情况通过添加或减去 360 将其转换为正确的值（为此，我将暂时删除“过渡”以防止图像旋转，然后再次添加它），然后移动图片

var cadena="";
var x=0;
var y=0;
var grados=0;
sumarGrados=15;

window.onload=function(e){

document.getElementById("img").style.transition="transform 0.5s linear";
document.onkeydown=function(ev){
    switch(ev.keyCode){
     case 39: cadena+="Right "; if(grados<45 || grados>225) sumarGrados=15; else if(grados>45 && grados<=225) sumarGrados=-15; else sumarGrados=0;
           if(grados+sumarGrados<0) cambio(60,0,grados+360); else if (grados+sumarGrados>=360) cambio(60,0,grados-360); 
           else{x+=60; grados+=sumarGrados; document.getElementById("img").style.transform="translate("+x+"px,"+y+"px) rotate("+grados+"deg)";} break; 

     case 40: cadena+="Down "; if(grados<135 || grados>315) sumarGrados=15; else if(grados>135 && grados<=315) sumarGrados=-15; else sumarGrados=0;
           if(grados+sumarGrados<0) cambio(0,60,grados+360); else if (grados+sumarGrados>=360) cambio(0,60,grados-360); 
           else{y+=60; grados+=sumarGrados; document.getElementById("img").style.transform="translate("+x+"px,"+y+"px) rotate("+grados+"deg)";} break;

     case 38: cadena+="Up "; if(grados<315 && grados>=135) sumarGrados=15; else if(grados>315 || grados<135) sumarGrados=-15; else sumarGrados=0;
           if(grados+sumarGrados<0) cambio(0,-60,grados+360); else if (grados+sumarGrados>=360) cambio(0,-60,grados-360); 
           else{y-=60; grados+=sumarGrados; document.getElementById("img").style.transform="translate("+x+"px,"+y+"px) rotate("+grados+"deg)";} break;

     case 37: cadena+="Down "; if(grados<225 && grados>=45) sumarGrados=15; else if(grados>225 || grados<45) sumarGrados=-15; else sumarGrados=0;
           if(grados+sumarGrados<0) cambio(-60,0,grados+360); else if (grados+sumarGrados>=360) cambio(-60,0,grados-360); 
           else{x-=60; grados+=sumarGrados; document.getElementById("img").style.transform="translate("+x+"px,"+y+"px) rotate("+grados+"deg)";} break;
    }
    console.log(grados);
};
}

function cambio(c_x,c_y,cambio){
document.getElementById("img").style.transition="transform 0.0s linear";
grados=cambio;
document.getElementById("img").style.transform="translate("+x+"px,"+y+"px) rotate("+grados+"deg)";
setTimeout('avanzar('+c_x+','+c_y+',)', 0);
}

function avanzar(c_x,c_y){
document.getElementById("img").style.transition="transform 0.5s linear";
x+=c_x; y+=c_y; grados+=sumarGrados;
document.getElementById("img").style.transform="translate("+x+"px,"+y+"px) rotate("+grados+"deg)";
}

我能做些什么来解决这个问题？

【问题讨论】：

图像实际上应该做什么？如果我一直向右按，图像是否应该继续向右滚动？我设置了一个 jsfiddle 进行实验：jsfiddle.net/ay6euo07/1
问题是当飞机转一圈（360º）时，图像会跳动一会儿。试着让图像转一圈，你就会意识到会发生什么。
我已经弄清楚了你想要什么并发布了答案:)

标签： javascript html keypress

【解决方案1】：

您可以使用模运算符 (%)，如下所示：

var result = angle % 360;

Modulo 将保留 0 到 360 之间的任何数字（假设 360 是极限）；

Modulo 只是从常规除法中返回提醒。

Wolfram alpha 示例：https://www.wolframalpha.com/input/?i=x+modulo(360)

var tag = document.getElementById("demo");

var angle = 90; // degree
var limit = 360;
var result = `When angle = ${angle}, the result is ${angle % limit}`;
tag.insertAdjacentText('beforeEnd', result);

tag.insertAdjacentHTML('beforeEnd', "<br>");
angle = 360;
limit = 360;
result = `When angle = ${angle}, the result is ${angle % limit}`;
tag.insertAdjacentText('beforeEnd', result);

tag.insertAdjacentHTML('beforeEnd', "<br>");
angle = 360+180;
limit = 360;
result = `When angle = ${angle}, the result is ${angle % limit}`;
tag.insertAdjacentText('beforeEnd', result);

tag.insertAdjacentHTML('beforeEnd', "<br>");
angle = 6556443656;
limit = 360;
result = `When angle = ${angle}, the result is ${angle % limit}`;
tag.insertAdjacentText('beforeEnd', result);
tag.insertAdjacentHTML('beforeEnd', "<br>");
tag.insertAdjacentHTML('beforeEnd', "<br>");

tag.insertAdjacentText('beforeEnd', "WARNING! This can be a catch:");
tag.insertAdjacentHTML('beforeEnd', "<br>");
angle = -90;
limit = 360;
result = `When angle = ${angle}, the result is ${angle % limit}`;
tag.insertAdjacentText('beforeEnd', result);

&lt;div id="demo"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

啊哈，我终于明白你要做什么了。您希望飞机图像逐渐向运动方向旋转。好吧，既然我知道你想要什么，我就可以弄清楚如何实现这一目标。这就是我会做的：

var cadena = "";
var x = 0;
var y = 0;
var grados = 0;
sumarGrados = 15;
var normalisedGrados = 0;

onload = function() {
    document.getElementById("img").style.transition = "transform 0.5s linear";
    document.onkeydown = function(ev) {
        normalisedGrados = grados % 360;
        switch (ev.keyCode) {
            case 39:
                cadena += "Right ";
                if (normalisedGrados < 45 || normalisedGrados > 225) sumarGrados = 15;
                else if (normalisedGrados > 45 && normalisedGrados <= 225) sumarGrados = -15;
                else sumarGrados = 0;
                x += 60;
                grados += sumarGrados;
                document.getElementById("img").style.transform = "translate(" + x + "px," + y + "px) rotate(" + grados + "deg)";
                break;

            case 40:
                cadena += "Down ";
                if (normalisedGrados < 135 || normalisedGrados > 315) sumarGrados = 15;
                else if (normalisedGrados > 135 && normalisedGrados <= 315) sumarGrados = -15;
                else sumarGrados = 0;
                y += 60;
                grados += sumarGrados;
                document.getElementById("img").style.transform = "translate(" + x + "px," + y + "px) rotate(" + grados + "deg)";
                break;

            case 38:
                cadena += "Up ";
                if (normalisedGrados < 315 && normalisedGrados >= 135) sumarGrados = 15;
                else if (normalisedGrados > 315 || normalisedGrados < 135) sumarGrados = -15;
                else sumarGrados = 0;
                y -= 60;
                grados += sumarGrados;
                document.getElementById("img").style.transform = "translate(" + x + "px," + y + "px) rotate(" + grados + "deg)";
                break;

            case 37:
                cadena += "Down ";
                if (normalisedGrados < 225 && normalisedGrados >= 45) sumarGrados = 15;
                else if (normalisedGrados > 225 || normalisedGrados < 45) sumarGrados = -15;
                else sumarGrados = 0;
                x -= 60;
                grados += sumarGrados;
                document.getElementById("img").style.transform = "translate(" + x + "px," + y + "px) rotate(" + grados + "deg)";
                break;
        }
        console.log(grados);
    };
}

function cambio(c_x, c_y, cambio) {
    document.getElementById("img").style.transition = "transform 0.0s linear";
    grados = cambio;
    document.getElementById("img").style.transform = "translate(" + x + "px," + y + "px) rotate(" + grados + "deg)";
    setTimeout('avanzar(' + c_x + ',' + c_y + ',)', 0);
}

function avanzar(c_x, c_y) {
    document.getElementById("img").style.transition = "transform 0.5s linear";
    x += c_x;
    y += c_y;
    grados += sumarGrados;
    document.getElementById("img").style.transform = "translate(" + x + "px," + y + "px) rotate(" + grados + "deg)";
}

我不知道那是什么语言（对我来说有点像意大利语，不确定），但我弄清楚了变量的作用。因此，当它超出这些限制时，我不会将grados 重置为 0 或 360，而是让它随心所欲地上升或下降。 HTML 处理 360 旋转就好了。我不确定为什么重置图像时图像会跳动，但是通过让旋转继续增加，我们不必在意。然后为了能够让它以正确的方式旋转，我添加了normalisedGrados（顺便说一下，它使用简单的modulus而不是很多“if”来保持在0 - 360范围内)。

如果你想玩它，小提琴就在这里：https://jsfiddle.net/ay6euo07/3/

【讨论】：

顺便说一句，语言是西班牙语 xd。非常感谢，我只有一个问题，让变量“grados”没有限制（0-360）不是问题吗？如果飞机转了很多圈，这可能会变成一个很大的数字
@OmarVillanueva 啊当然是西班牙语，我应该意识到。关于你的问题，不，不是真的。我的意思是在技术上是的，它最终会达到这个数字的最大值，但实际上这永远不会发生。普通 32 位整数的最大大小为2,147,483,647。这意味着您必须将平面在一个方向上旋转 360° 大约 5,965,232 次。那是 5.9 百万次。你会在那里待上几个星期。此外，我认为当它达到最大值时，这个数字会简单地环绕，你会在角度上有一个轻微的跳跃：P