Как установить форму холста для поворота с помощью клавиш со стрелками?

Question

Мне бы хотелось, чтобы клавиши со стрелками влево и вправо поворачивали форму холста по часовой стрелке и против часовой стрелки соответственно.Как вы предлагаете мне пойти по этому поводу?В этом коде левая и правая клавиши перемещают форму влево и вправо, и я пытаюсь изменить это.

В долгосрочной перспективе я пытаюсь повторить движение моей ROS (операционной системы робота)TurtleSim использует этот код javascript, а левая и правая клавиши вращают черепаху таким образом.(Я довольно новичок в JavaScript.)

<script>
function Parent(){
    //diffColor = false;
    mainCanvas.load();
    tracker = new track(30, 50, "white", 30, 120); //create object that will move with keys;

    click();
    //touch();
    //animate();
    //mapCanvas.load();
}

function click(){
        window.addEventListener("click", getClickPosition, false);

    function getClickPosition(e){
        tracker.distanceX = e.clientX - (tracker.width / 2); //move tracker to near center of tracker; clientX gets horizontal coordinate of cursor
        tracker.distanceY = e.clientY - (tracker.height / 2);

        }
}


var mainCanvas = {
    canvas : document.createElement("canvas"),
    load: function(){

        this.canvas.width = (window.innerWidth)/2;
        this.canvas.height = window.innerHeight;
        this.ctx1 = this.canvas.getContext("2d");

        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(moveTracker, 20);

        window.addEventListener ("keydown", function(e){
            console.log(e.keyCode);
            mainCanvas.key = e.keyCode; //execute movement when key pressed
        });
        window.addEventListener ("keyup", function(e){
                mainCanvas.key = false; //stop movement once key is released
                });

    },

    clear: function(){
        this.ctx1.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

    function track(width, height, color, distanceX, distanceY, theSquare){ 
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;
    this.distanceX = distanceX;
    this.distanceY = distanceY;
    this.rotationSpeedRight = 0;
    this.rotationSpeedLeft= 0;
    this.rotationLeft = rotationLeft;
    this.rotationRight = rotationRight;
    console.log("inside track()");

    this.update = function(theSquare){
        ctx = mainCanvas.ctx1;
        ctx.fillStyle = color;
        ctx.fillRect(this.distanceX, this.distanceY, this.width, this.height, this.rotationLeft, this.rotationRight);
        ctx.rotate(45*Math.PI/180);
        ctx.save();
        ctx.restore();
    }
    this.newPosition = function(){
        this.distanceX += this.speedX;
        this.distanceY += this.speedY;
        this.rotationRight +=this.rotationSpeedRight;
        this.rotationLeft += this.rotationSpeedRight;
    }
}

function moveTracker(){ //recognize keys from keyboard
    mainCanvas.clear();
    tracker.speedX = 0;
    tracker.speedY = 0;
    tracker.rotationSpeedRight = 0;
    tracker.rotationSpeedLeft = 0;
    if (mainCanvas.key && mainCanvas.key == 37) //left key; should move anticlockwise
        tracker.rotationSpeedLeft = -1;
    if (mainCanvas.key && mainCanvas.key == 38) //down key
        tracker.speedY = -1;
    if (mainCanvas.key && mainCanvas.key == 39) //right key; should move clockwise;
        tracker.rotationSpeedRight = 1;
    if (mainCanvas.key && mainCanvas.key == 40) //up key
        tracker.speedY=1;

    tracker.newPosition();
    tracker.update();
}

Answer 1

Не существует такого понятия, как «вращение влево» и «вращение вправо», они оба относятся к одному и тому же. Вам нужно только одно значение поворота, это текущий угол вашего рисунка.

Я также предполагаю, что вы хотите, чтобы ваша клавиша «вверх» двигалась в любом направлении, а не вверх, поэтому вы можете переключать значения скорости только на одно значение - скорость в текущем направлении. Это в основном меняет вашу систему координат с декартовой (х, у) на полярной (угол и расстояние).
Чтобы узнать окончательное изменение в плоскости X-Y движения, основанное на вращении и скорости, вы должны использовать speed * cos(angle) для X и speed * sin(angle) для Y (на основе теоремы Пифагора).

rotate должен быть вызван до того, как вы начнете рисовать прямоугольник (в основном это говорит, что «все, что я буду делать дальше, нужно будет повернуть на эту сумму»), а save и restore нужно будет вызвать вокруг всех что, чтобы отменить вращение, когда вы закончите рисовать повернутую форму.

Еще одно примечание: rotate вращает холст вокруг начала координат (0, 0). Чтобы вращаться вокруг центра вашего элемента, что, вероятно, и нужно, вам нужно сначала translate до позиции, а затем не забыть сместить позицию, в которой вы рисуете прямоугольник, чтобы учесть этот первоначальный перевод. .

Потенциальное обновление нижней части вашего кода будет:

function track(width, height, color, distanceX, distanceY, rotation){
    this.width = width;
    this.height = height;
    this.distanceX = distanceX || 0;
    this.distanceY = distanceY || 0;
    this.speed = 0;
    this.rotation = rotation || 0;
    this.rotationSpeed = 0;

    this.update = function(){
        ctx = mainCanvas.ctx1;
        ctx.fillStyle = color;
        ctx.save();
        ctx.translate(this.distanceX, this.distanceY);
        ctx.rotate(this.rotation);
        ctx.fillRect(-this.width / 2, -this.height / 2, this.width, this.height);
        ctx.restore();
    }
    this.newPosition = function(){
        this.rotation += this.rotationSpeed;
        this.distanceX += this.speed * Math.cos(this.rotation);
        this.distanceY += this.speed * Math.sin(this.rotation);
    }
}

function moveTracker(){ //recognize keys from keyboard
    mainCanvas.clear();
    tracker.speed = 0;
    tracker.rotationSpeed = 0;
    // Adjust the values as you need here
    if (mainCanvas.key == 37) //left key
        tracker.rotationSpeed = -0.5 / Math.PI;
    if (mainCanvas.key == 38) //up key
        tracker.speed = 3;
    if (mainCanvas.key == 39) //right key
        tracker.rotationSpeed = 0.5 / Math.PI;
    if (mainCanvas.key == 40) //down key
        tracker.speed = -3;

    tracker.newPosition();
    tracker.update();
}

JSFiddle (грубая версия)