JavaScript: вращающийся объект на холсте - PullRequest
Новая
       0

JavaScript: вращающийся объект на холсте

0 голосов
/ 30 января 2019

Последние три недели я создавал движок холста, а на прошлой неделе я пытался решить одну проблему с вращением объекта на холсте.Я перепробовал много решений, но безуспешно.В большинстве случаев код поворачивал весь контент canvas или ничего не отображал (как сейчас (но если вы удалите .save() и .restore(), все будет вращаться)).Я надеюсь, что это позволит избежать больших изменений в коде, потому что это мой самый большой код, который я пишу (и я не хочу делать много изменений).Ниже приведен фрагмент кода и спасибо за любую помощь.(Если вы хотите увидеть весь код, вы можете перейти здесь ) 

//Functions.js File
function degToRad(int) {
    return int * Math.PI / 180;
}

//Init.js File
var fps = 0;
var objects = new Array();
var ctx_real = {
    context: undefined,
    width: 0,
    height: 0,
    init: function () {
        this.context = this.DOM.getContext("2d");
        this.width = this.DOM.width;
        this.height = this.DOM.height;
    },
    clear: function () {
        this.context.clearRect(0, 0, this.width, this.height);
    }
};
const proXy_ctx = {
    get: function (target, prop) {
        return target.hasOwnProperty(prop) ? target[prop] : ctx_real.context; //=> ctx.SomeAtributeThatNotExists = ctx.context
    }
};
const ctx = new Proxy(ctx_real, proXy_ctx);

function init() {
    ctx.DOM = document.getElementById("ctx");
    ctx.init();
    setLayout("Game");
    setLayout("Test2");
    setInterval(frameUpdate, 1);
}

//Script.js File
async function frameUpdate() {
    ctx.clear();
    clearObjects = false;
    for (var tmp0 = 0 in objects) {
        var object = objects[tmp0];
        var id = object[0];
        var type = object[1];
        var x = object[2];
        var y = object[3];
        var color = object[4];
        ctx.context.strokeStyle = color;
        ctx.context.fillStyle = color;
        var arg0 = object[5];
        var arg1 = object[6];
        var arg3 = object[8];
        var arg4 = object[9];
        switch (type) {
            case "Rct":
                var translateX = x + (arg0 / 2);
                var translateY = y + (arg1 / 2);
                if (typeof arg3 == "number" && arg3 != 0) {
                    ctx.context.save();
                    ctx.context.translate(translateX, translateY);
                    ctx.context.rotate(degToRad(arg3));
                }
                if (arg4) {
                    ctx.context.fillRect(x, y, arg0, arg1);
                } else {
                    ctx.context.strokeRect(x, y, arg0, arg1);
                }
                if (typeof arg3 == "number") {
                    ctx.context.restore();
                }
                break;
        }
    }
    if (clearObjects) {
        objects = objects.filter(Boolean);
    }
    fps++;
    setTimeout(function () { fps--; }, 1000);
    ctx.context.fillStyle = "black";
    ctx.context.font = "10px Verdana";
    ctx.context.fillText(fps, 10, 10);
}

function setLayout(layoutName) {
    switch (layoutName) {
        case "Game":
            createObject(["SomeId", "Rct", 0, ctx.height - 30, "green", ctx.width, 30, , , true]);
            createObject(["SomeId", "Rct", 0, ctx.height - 30, "#402a25", ctx.width, 3, , , true]);
            break;
        case "Test2":
            createObject(["SomeRotatedEl", "Rct", ctx.width / 2, ctx.height / 2, "red", 50, 50, , 90, true]);
            break;
    }
}

function createObject(object) {
    objects.push(object);
}
html,
body,
canvas {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}
<!DOCTYPE html>
<html>
<body onLoad="init()">
  <canvas id="ctx">You can simple download e.g. Chrome or what?!!!</canvas>
</body>
</html>

1 Ответ

0 голосов
/ 30 января 2019

Вы не можете нарисовать повернутый объект на холсте, не "вращая" весь холст.

К сожалению, именно так работает холст.Подумайте об этом так:

Вы можете рисовать только в одной точке пространства {x:0,y:0}, и холст находится прямо под этой точкой, как физический лист бумаги.

Тогда, если вы хотитерисуя на {x:0,y:10}, вы перемещаете весь холст на 10 пикселей вверх, поэтому теперь точка, с которой вы рисуете, стала {x:0,y:10}, если вы считаете сверху / слева от холста, но для рисования это {x:0,y:0}. 

// red rect at {x:0,y:40}
ctx.fillStyle = "rgba(255,0,0,0.3)";
ctx.translate(0, 40) // means that {x:0,y:10} "is new" {x:0,y:0}
ctx.fillRect(0, 0, 40, 20);

Если вы хотите повернуть, вы поворачиваете холст, так что то, что вы хотите нарисовать, будет отображаться при его вращении: 

// reset all transformations
ctx.setTransform(1, 0, 0, 1, 0, 0);
// green rect at {x:0,y:0} rotated 45deg
ctx.fillStyle = "rgba(0,255,0,0.3)";
ctx.rotate(45 * Math.PI / 180);
ctx.fillRect(0, 0, 40, 20);

Но оно вращается вокруг своего верхнего / левого угла.Я полагаю, это ваша проблема?

Чтобы правильно повернуть объект (с центром в качестве оси вращения), вам нужно разместить холст так, чтобы центр объекта стал {x:0,y:0}.Затем поверните и нарисуйте объект так, чтобы его центр находился на {x:0,y:0}, для большинства объектов это означает, что вы рисуете их на {x:-width/2,y:-height/2}.

Например, если вы хотите синий прямоугольник на {x:50,y:50}, повернутый на 45 градусов с{width:40,height:20}

// reset all transformations
ctx.setTransform(1, 0, 0, 1, 0, 0);

// blue rect at {x:50,y:50} rotated 45deg
var rectWidth = 40;
var rectHeight = 20;
ctx.fillStyle = "rgba(0,0,255,0.3)";
ctx.translate(50, 50);
ctx.rotate(45 * Math.PI / 180);
ctx.fillRect(-rectWidth/2, -rectHeight/2, rectWidth, rectHeight);

См. Полный пример: https://codepen.io/anon/pen/QYGXzp?editors=0010

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...