在JavaScript中以旋转方向移动旋转的元素 [英] Moving a rotated element in the direction of the rotation in JavaScript

问题描述

这是一个问题，firefox工作得很好，而chrome有问题。 Opera有额外的问题，我需要地址和IExplore我还没有打扰过测试（现在不太在乎老实说）。

This is a problem where firefox works just fine, while chrome has the problem. Opera has additional problems I need to adress and IExplore I haven't bothered testing yet (don't care right now to be quite honest).

我有一个实验正在进行，我使用JqueryRotate旋转从上方看到的汽车图片（设置元素的旋转角度）和左右方向键。汽车被设置为中心使用JavaScript / jQuery（作品 - 没有问题）。如果使用向上箭头，汽车会沿着它指向的方向向上移动 - 这是问题发生的地方。不要介意你不能同时转弯和开车的事实，这将是固定的，没有可能。但是当我把它转过来然后向前移动时，图片会稍微移动一点？为什么？

I have an experiment going, where I rotate a picture of a car seen from above using JqueryRotate (sets the rotation of an element) and the left right arrow keys. The car is set to the center using javascript/jquery(works - no problem). If the up arrow is used, the car moves up in the direction it points - here is where the problem occurs. Don't mind the fact that you can't turn and drive at the same time, this will be fixed, no prob. But the picture moves a bit after I have turned it and then move forward? Why?

javascript：

the javascript:

    var angle = 0;
var degreeInRadians = 2*Math.PI/360;
var realX = 0; 
var realY = 0;

$(document).ready(function(){
    placeInCenter($("#carImage"));
});

$(document).keydown(function(e){
    //left
    if (e.keyCode == 37) { 
        rotateLeft($("#carImage"));
        return false;
    }
    //up
    if (e.keyCode == 38) { 
        moveForward($("#carImage"),1);
        return false;
    }   
    //right
    if (e.keyCode == 39) { 
        rotateRight($("#carImage"));
        return false;
    }
    //down
    if (e.keyCode == 40) { 
        //TODO move the car forward
        return false;
    }    
});



function placeInCenter(element) {
    // get viewport height and width and divide it by 2
    centerY = window.innerHeight/2;
    centerX = window.innerWidth/2;

    //set absoulte positioning on element
    $(element).css("position", "absolute");
    // place the element
    $(element).offset({ top: centerY, left: centerX });
    //update realX and realY
    realX = centerX;
    realY = centerY;
}

function rotateRight(element) {
    if(angle <360) {
        angle++;
    }
    else {
        angle=0;
    }
    element.rotate(angle);
}

function rotateLeft(element) {
    if(angle > 0) {
        angle--;
    }
    else {
        angle=359;
    }
    element.rotate(angle);
}

function moveForward(element, speed) {
    //move the element to polar cordinate (speed,angle)
    realX = realX + Math.cos(degreeInRadians * angle);
    realY = realY + Math.sin(degreeInRadians * angle);

    $(element).offset({ top: realY, left: realX });
}

演示： http://www.perandersen.no/sandbox/fromAbove/

推荐答案

问题是WebKit似乎设置了从旋转元素的边界框偏移，而Firefox从原始边界框偏移它，然后应用旋转。

The problem is that WebKit seems to set offset from the bounding box of the rotated element, while Firefox offsets it from the original bounding box, and then applies the rotation.

将您的手指放在汽车的角落，旋转它，然后向前移动。汽车边框的左上角（旋转后最左边和最高点）将与您的手指对齐。

Place your finger at the corner of the car, rotate it, and then move it forward. The upper left corner of the car's bounding box (its furthest left and top points after rotation) will line up with your finger.

它似乎在Firefox和WebKit中运行良好如果您使用 .css（{top：... left：}）而不是 .offset（），并且设置以下css样式：

It seems to works fine in Firefox and WebKit if you use .css({ top: ... left: }) instead of .offset(), and set the following css style:

#carImage {
    position: relative;
    margin-left: -100px;
    margin-top: -51px;    
}

演示： http://jsfiddle.net/jtbowden/2aeyP/2/

这篇关于在JavaScript中以旋转方向移动旋转的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！