Question

我无法将图像旋转以指向鼠标指针。我甚至不确定如果我使用我的代码朝着正确的方向前进。至今我可以在画布周围移动我的图像，但我需要它朝着鼠标旋转，因为我最终会在鼠标点击时发射子弹。任何建议将不胜感激。我不确定我的look功能是否需要在我的drawPlayer功能中。

(function() {
    var canvas;
    var context;
    var width;
    var height;
    var speed = 8;
    var interval_id;
    var ps = [];
    var bullets = [];
    var player = {
        x: 0,
        y: 0,
        hero: new Image(),
        size: 10,
    };
    var mouse = {
        x: 0,
        y: 0,
    }
    var moveLeft = false;
    var moveRight = false;
    var moveUp = false;
    var moveDown = false;
    document.addEventListener('DOMContentLoaded', init, false);

    function init() {
        canvas = document.querySelector('canvas');
        context = canvas.getContext('2d');
        width = canvas.width;
        height = canvas.height;
        player.hero.src = 'hero.png';
        context.drawImage(player.hero, player.x, player.y);
        window.addEventListener("keydown", activate, false);
        window.addEventListener("keyup", deactivate, false);
        window.addEventListener("mouseover", look, false);
        interval_player = window.setInterval(drawPlayer, 33);
    }

    function drawPlayer() {
        context.clearRect(0, 0, width, height);
        context.drawImage(player.hero, player.x, player.y);
        if (moveRight) {
            player.x += speed;
        }
        if (moveUp) {
            player.y -= speed;
        }
        if (moveDown) {
            player.y += speed;
        }
        if (moveLeft) {
            player.x -= speed;
        }
    }
    // ******* this is where im trying to get the image to rotate ********//
    function look(event) {
        var offset = player.hero.offset();
        var center_x = (offset.left) + (player.hero.width() / 2);
        var center_y = (offset.top) + (player.hero.height() / 2);
        var mouse_x = event.pageX;
        var mouse_y = event.pageY;
        var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
        var degree = (radians * (180 / Math.PI) * -1) + 90;
        player.hero.css('-moz-transform', 'rotate(' + degree + 'deg)');
        player.hero.css('-webkit-transform', 'rotate(' + degree + 'deg)');
        player.hero.css('-o-transform', 'rotate(' + degree + 'deg)');
        player.hero.css('-ms-transform', 'rotate(' + degree + 'deg)');
    }

    function activate(event) {
        var keyCode = event.keyCode;
        if (keyCode === 87) {
            moveUp = true;
        } else if (keyCode === 68) {
            moveRight = true;
        } else if (keyCode === 83) {
            moveDown = true;
        } else if (keyCode === 65) {
            moveLeft = true;
        }
    }

    function deactivate(event) {
        var keyCode = event.keyCode;
        if (keyCode === 87) {
            moveUp = false;
        } else if (keyCode === 68) {
            moveRight = false;
        } else if (keyCode === 83) {
            moveDown = false;
        } else if (keyCode === 65) {
            moveLeft = false;
        }
    }

    function getRandomNumber(min, max) {
        return Math.round(Math.random() * (max - min)) + min;
    }

    function stop() {
        clearInterval(interval_player);
    }
})();

Answer 1

使用setTransform，其中X轴是从图像位置到外观点（鼠标）的归一化矢量，y轴与x轴成90度（显然）

function drawImagePointingAt(image,x,y,pointX,pointY){
    var xdx = pointX - x;  // get direction from image to point
    var xdy = pointY - y;
    var dist = Math.sqrt(xdx*xdx+xdy*xdy);  // get distance
    xdx /= dist;   // normalize direction
    xdy /= dist;
    // xdx,xdy is the x axis
    // -xdy, xdx is the y axis
    ctx.setTransform(xdx,xdy,-xdy,xdx,x,y); // set transform to point at point
    ctx.drawImage(image,-image.width / 2, -image.height / 2);
}

或者如果你需要抵消轮换

function drawImagePointingAt(image,x,y,pointX,pointY, rotOffset){
    var xdx = pointX - x;  // get direction from image to point
    var xdy = pointY - y;
    var dist = Math.sqrt(xdx*xdx+xdy*xdy);  // get distance
    xdx /= dist;   // normalize direction
    xdy /= dist;
    ctx.setTransform(xdx,xdy,-xdy,xdx,x,y); // set transform to point at point
    ctx.rotate(rotOffset);
    ctx.drawImage(image,-image.width / 2, -image.height / 2);
}

恢复默认转换

ctx.setTransform(1,0,0,1,0,0);

需要帮助在画布上旋转图像以面向鼠标悬停位置

1 个答案: