Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Вращение объектов c js (https://javascript.ru/forum/misc/35045-vrashhenie-obektov-c-js.html)

tsigel 29.01.2013 11:43

Вращение объектов c js
 
Можно вращать с помощью canvas (вот так) и с помощью css3

<script>
window.onload = function() {
	// получаем картинку
	var image = document.getElementById("img"); 
 
	//создаем переменную под новую картинку
	img = new Image() 
	// url картинки
	img.src = image.src;
 
	// получаем canvas элемент
	var canvas = document.getElementById("rotate"); 
 
	// устанавливем размеры canvas элемента исходя из размеров самого изображения
	canvas.width  = image.width;
	canvas.height = image.height;
 
	// создаем переменную для работы с canvas
	img.context = canvas.getContext("2d");
	img.canvas = canvas;
	img.radians = Math.PI/180; 
 
	//
	img.onload = function() {
		var _this = this;
		var _angle = 0;
 
		// устанавливаем таймер
		var timer = setInterval(function() {
			// очищаем canvas
			_this.context.clearRect(0,0,_this.width, _this.height); 
 
			// поварачиваем картинку и рисуем ее
			canvas_rotate.call(_this, _angle);
			_angle +=10;
		}, 50);
 
	}
 
}
 
function canvas_rotate(rotate) { 
	// save the current co-ordinate system 
	// before we screw with it
	this.context.save(); 
 
	// move to the middle of where we want to draw our image
	this.context.translate(this.width/2, this.height/2);
 
	// rotate around that point, converting our 
	// angle from degrees to radians 
	this.context.rotate(rotate * this.radians);
 
	// draw it up and to the left by half the width
	// and height of the image 
	this.context.drawImage(this, -(this.width/2), -(this.height/2));
 
	// and restore the co-ords to how they were when we began
	this.context.restore(); 
}
</script>
<img src='http://tsigelization.narod.ru/arrow.png' id='img'>- картинка, которую будем вращать вокруг своей оси
 
<br><br>
 
<canvas id='rotate'></canvas>


Есть ли ещё способы вращать объекты/картинки не используя 2 вышеперечисленных метода?

kobezzza 29.01.2013 12:05

SVG/VML/Flash и т.д.

ЗЫ: в случае Flash моно сделать АПИ, чтобы через ЖС скармливать картинку флешу, а тут её будет крутить.

tsigel 29.01.2013 12:16

kobezzza,
спасибо.
Не Flash не подходит, он мобилы не любит. А так, чтобы управлялось из js больше ничего нет, да?

kobezzza 29.01.2013 17:24

Цитата:

Сообщение от tsigel (Сообщение 230093)
kobezzza,
спасибо.
Не Flash не подходит, он мобилы не любит. А так, чтобы управлялось из js больше ничего нет, да?

Писал же: SVG/VML. Дальше есть только экзотичные подходы, вроде аплетов или activeX.

megaupload 30.01.2013 00:00

Цитата:

Сообщение от kobezzza
SVG/VML/Flash и т.д.

Цитата:

Сообщение от tsigel
Flash

Цитата:

Сообщение от tsigel
больше ничего нет, да?

слепой.........


Часовой пояс GMT +3, время: 15:36.