2013-04-12 9 views
0

Я создал функцию js, которая должна вращать изображение для обнаружения столкновений, но функция не работает корректно, когда вращение проходит над π * 1.5 (Pi), будет образных культур.Обнаружение столкновений на повернутом изображении в javascript

function rotateImage(image , rotation) 
{ 

    // Creates a canvas 
    var rotatedImage = document.createElement("canvas") . getContext("2d"), 

    // Setting a bounding box size 
    boundingWidth = Math . abs(image . height * Math . cos(rotation) + image . width * Math . sin(rotation)), 
    boundingHeight = Math . abs(image . height * Math . sin(rotation) + image . width * Math . cos(rotation)); 

    // Changing canvas size 
    rotatedImage . canvas.width = boundingWidth; 
    rotatedImage . canvas.height = boundingHeight; 

    // Translating canvas 
    rotatedImage . translate(boundingWidth/2 , boundingHeight/2); 

    // Rotate canvas 
    rotatedImage . rotate(rotation); 

    // Un-translating canvas 
    rotatedImage . translate(-boundingWidth/2 , -boundingHeight/2); 

    // Draws image 
    rotatedImage . drawImage(image , 0 , 0); 

    // Returns canvas 
    return rotatedImage . canvas; 

} 

Спасибо :)

+5

Из любопытства, если поворот - это все, что вам нужно, почему бы не использовать преобразования CSS? –

+4

Если у вас есть доступ к холсту html, у вас есть доступ к анимации css, которые будут вращать изображения для вас. – runspired

ответ

3

[Отредактировано: OP выяснены они хотят обнаружение столкновений]

Оооо ... вы хотите ограничивающий прямоугольник повернутого прямоугольника для использования в обнаружении столкновения.

Для этого не нужно использовать поворот на холсте, просто используйте тригонометрию!

// where w = rectangle width (sprite width) 
// where h = rectangle height (sprite height) 
// where a = angle of rotation in degrees 
// calculate the bounding box of the rectangle at the given rotation 

function BoundingBoxDimensions(w,h,a){ 
    var rads=a*Math.PI/180; 
    var c = Math.abs(Math.cos(rads)); 
    var s = Math.abs(Math.sin(rads)); 
    return({ width: h * s + w * c, height: h * c + w * s }); 
} 

Что касается кода выше, если ваш Math.sin (вращение) или Math.cos (вращение) идти отрицательным, вы хотите взять их абсолютные значения, прежде чем использовать их в расчете BB. Вот почему ваш расчет сходит с ума при PI * 1.5.

+0

Спасибо за вашу помощь, но я знаю, как я могу рисовать повернутые изображения, но мне нужна функция, возвращающая повернутый спрайт, чтобы найти столкновение новой ширины и высоты. – Mathematica

+0

Обнаружение столкновений (!?) ... это была бы полезная информация, чтобы задать вопрос: p OK, см. Мой отредактированный ответ, чтобы получить свою вращающуюся ограничительную рамку. – markE

+0

Спасибо за помощь, и извините, что я ничего не писал о обнаружении столкновений, я отредактировал вопрос. – Mathematica