PHP5

Взаимодействие со спрайтами

Применяя специальные параметры, мы можем проводить со спрайтами некоторые преобразования. Ext JS4 позволяет провести следующие преобразования: перемещение, вращение и масштабирование спрайтов.

Вращение

Для вращения используется параметр rotation, для которого указывается количество градусов, на которые поворачивается спрайт:

Ext.onReady(function(){ 
	var drawComponent = Ext.create('Ext.draw.Component', {
		viewBox: false,
		items: [{
			type: 'text',
			text: 'Вращение',
			fill: 'dark-gray',
			font: '14px "Verdana"',
			x: 80,
			y: 10
		},{
			type: 'rect',
			width: 50,
			height: 50,
			radius: 8,
			fill: 'blue',
			x: 10,
			y: 20
		},{
			type: 'rect',
			width: 50,
			height: 50,
			radius: 8,
			fill: 'blue',
			x: 100,
			y: 45,
			rotate: {
			   degrees: 30
			  }
		}]
	});
	Ext.create('Ext.panel.Panel', { 
		title: 'Рисование в ExtJS',
		width: 250,
		height: 150,
		layout: 'fit',
		renderTo: Ext.getBody(),
		items: [drawComponent]
	});
});

В данном случае вращение производится относительно центральной точки спрайта. Но мы можем также производить вращение относительно начала координат (да и вообще любой точки координатной плоскости):

		{
			type: 'rect',
			width: 50,
			height: 50,
			radius: 8,
			fill: 'blue',
			x: 100,
			y: 45,
			rotate: {
				x:0,
				y:0,
			   degrees: 30
			  }
		}

Параметры x и y указывают на координаты точки, относительно которой идет вращение.

Перемещение

Для перемещения мы указываем параметр translate, который принимает две опции: x и y, обозначающие на сколько перемещается спрайт вдоль соответствующих осей:

		{
			type: 'rect',
			width: 50,
			height: 50,
			fill: 'blue',
			x: 100,
			y: 45,
			translate: {
				x: 80,
				y: -10
			  }
		}

Масштабирование

Масштабирование задает параметр scale:

	var drawComponent = Ext.create('Ext.draw.Component', {
		viewBox: false,
		items: [{
			type: 'text',
			text: 'Масштабирование',
			fill: 'dark-gray',
			font: '14px "Verdana"',
			x: 50,
			y: 10
		},{
			type: 'rect',
			width: 50,
			height: 50,
			fill: 'blue',
			x: 30,
			y: 50
		},{
			type: 'rect',
			width: 50,
			height: 50,
			fill: 'blue',
			x: 120,
			y: 50,
			scale: {
				x: 2,
				y: 0.5
			  }
		}]
	});

Опции x и y в параметре scale указывают, во сколько раз надо масштабировать (увеличить) спрайт вдоль соответствующих осей:

Обработка событий спрайтов

У каждого спрайта мы можем определить обработчики событий (например, нажатия) и тем самым внести в приложение интерактивность, сделав спрайты "отзывчивыми" на действия пользователя:

var sprite = Ext.create('Ext.draw.Sprite', {
		type: 'rect',
		width: 50,
		height: 50,
		fill: 'blue',
		x: 30,
		y: 50,
		listeners:{
			mouseover:function(){
				sprite.setAttributes({
					stroke:'yellow',
					'stroke-width': 2
				}, true);
			},
			mouseout:function(){
				sprite.setAttributes({
					'stroke-width': 0
				}, true);
			},
		}	
	});

	var drawComponent = Ext.create('Ext.draw.Component', {
		viewBox: false,
		items: [sprite]
	});
	Ext.create('Ext.panel.Panel', { 
		title: 'Рисование в ExtJS',
		width: 200,
		height: 150,
		layout: 'fit',
		renderTo: Ext.getBody(),
		items: [drawComponent]
	});

С помощью параметра listeners можно установить обработчики событий спрайтов. В данном случае мы обрабатываем события наведения мыши (mouseover) и увода указателя мыши за пределы спрайта (mouseout). В итоге у нас получается небольшой анимационный эффект.