LXF94:Графическое web-приложение - История изменений

Yaleks: категория

2009-01-07T09:29:45Z

категория

← Предыдущая		Версия 09:29, 7 января 2009
Строка 336:		Строка 336:
	*clearRect(x2,y1,x2,y2) очищает кусок холста.		*clearRect(x2,y1,x2,y2) очищает кусок холста.
	*clip() создает путь отсечения так, что вы можете ограничить холст определенной фигурой, например, кругом или сложным многоугольником.		*clip() создает путь отсечения так, что вы можете ограничить холст определенной фигурой, например, кругом или сложным многоугольником.
		+
		+	[[Категория:Hardcore Linux]]
		+	[[Категория:Дэн Фрост]]

Crazy Rebel: оформление

2008-12-16T05:29:58Z

оформление

(Различия между версиями)

Lockal: восстановление кавычек в коде AWB

2008-04-27T14:20:16Z

восстановление кавычек в коде AWB

(Различия между версиями)

Lodger: /* Взаимодействие с холстом */

2008-03-12T12:37:33Z

Взаимодействие с холстом

← Предыдущая		Версия 12:37, 12 марта 2008
Строка 270:		Строка 270:
	function addShapeOption(shape, name) {		function addShapeOption(shape, name) {
	shapeOptions[name] = shape;		shapeOptions[name] = shape;
-	$(‘slist’).innerHTML += ’<li><a href=”#” onClick=”currentDrawSh	+	$(‘slist’).innerHTML += ’<nowiki><li></nowiki><a href=”#” onClick=”currentDrawSh
	ape = shapeOptions[\’’+name+’\’]; return false;”>’+name+’</li>’;		ape = shapeOptions[\’’+name+’\’]; return false;”>’+name+’</li>’;
	}		}

Lodger: /* Взаимодействие с холстом */

2008-03-12T12:26:57Z

Взаимодействие с холстом

← Предыдущая		Версия 12:26, 12 марта 2008
Строка 270:		Строка 270:
	function addShapeOption(shape, name) {		function addShapeOption(shape, name) {
	shapeOptions[name] = shape;		shapeOptions[name] = shape;
-	$(~~'slist'~~).innerHTML += '<li><a href=”#” onClick=”currentDrawSh	+	$(‘slist’).innerHTML += ’<li><a href=”#” onClick=”currentDrawSh
-	ape = shapeOptions[\''+name+'\']; return false;”>'+name+'</li>';	+	ape = shapeOptions[\’’+name+’\’]; return false;”>’+name+’</li>’;
	}		}

Lodger: /* Взаимодействие с холстом */

2008-03-12T12:25:35Z

Взаимодействие с холстом

← Предыдущая		Версия 12:25, 12 марта 2008
Строка 270:		Строка 270:
	function addShapeOption(shape, name) {		function addShapeOption(shape, name) {
	shapeOptions[name] = shape;		shapeOptions[name] = shape;
-	$(~~‘slist’~~).innerHTML += ‘<li><a href=”#” onClick=”currentDrawSh	+	$('slist').innerHTML += '<li><a href=”#” onClick=”currentDrawSh
-	ape = shapeOptions[\’’+name+’\’]; return false;”>’+name+’</li>’;	+	ape = shapeOptions[\''+name+'\']; return false;”>'+name+'</li>';
	}		}

Lodger: /* Взаимодействие с холстом */

2008-03-12T12:22:37Z

Взаимодействие с холстом

← Предыдущая		Версия 12:22, 12 марта 2008
Строка 270:		Строка 270:
	function addShapeOption(shape, name) {		function addShapeOption(shape, name) {
	shapeOptions[name] = shape;		shapeOptions[name] = shape;
-	$(‘slist’).innerHTML += ‘<li><a href=”#” onClick=”currentDrawSh ape = shapeOptions[’\’+name+’\’]; return false;”>’+name+’</li>’;	+	$(‘slist’).innerHTML += ‘<li><a href=”#” onClick=”currentDrawSh
		+	ape = shapeOptions[\’’+name+’\’]; return false;”>’+name+’</li>’;
	}		}

Lodger: /* Взаимодействие с холстом */

2008-03-12T12:21:56Z

Взаимодействие с холстом

← Предыдущая		Версия 12:21, 12 марта 2008
Строка 270:		Строка 270:
	function addShapeOption(shape, name) {		function addShapeOption(shape, name) {
	shapeOptions[name] = shape;		shapeOptions[name] = shape;
-	$(‘slist’).innerHTML += ‘<li><a href=”#” onClick=”currentDrawSh ape = shapeOptions[\’’+name+’\’]; return false;”>’+name+’</li>’;	+	$(‘slist’).innerHTML += ‘<li><a href=”#” onClick=”currentDrawSh ape = shapeOptions[’\’+name+’\’]; return false;”>’+name+’</li>’;
	}		}

Lodger: /* Взаимодействие с холстом */

2008-03-12T12:20:33Z

Взаимодействие с холстом

← Предыдущая		Версия 12:20, 12 марта 2008
Строка 270:		Строка 270:
	function addShapeOption(shape, name) {		function addShapeOption(shape, name) {
	shapeOptions[name] = shape;		shapeOptions[name] = shape;
-	$(‘slist’).innerHTML += ‘<li><a href=”#” onClick=”currentDrawSh	+	$(‘slist’).innerHTML += ‘<li><a href=”#” onClick=”currentDrawSh ape = shapeOptions[\’’+name+’\’]; return false;”>’+name+’</li>’;
-	ape = shapeOptions[\’’+name+’\’]; return false;”>’+name+’</li>’;	+
	}		}

Lodger: /* Взаимодействие с холстом */

2008-03-12T12:19:17Z

Взаимодействие с холстом

← Предыдущая		Версия 12:19, 12 марта 2008
Строка 242:		Строка 242:

	=== Взаимодействие с холстом ===		=== Взаимодействие с холстом ===
		+
		+	Картинки рисовать мы научились. Но ключевая задача сети – обеспечить взаимодействие пользователя с объектами. На нашем уроке мы реализовали возможность создания копий фигур всего одной строкой кода, drawShape(). Форма каждого объекта может быть сколь угодно сложной – изображение, кривые, штрихи и так далее. Чтобы превратить этот скромный базис в простую программу рисования, надо просто следить за событиями мыши. Я собираюсь использовать Script. aculo.us, коллекцию интерфейсных библиотек JavaScript, для отслеживания событий мыши, а код поставляется вместе с примером на сайте. Вы можете использовать любую подобную среду.
		+
		+	Цель этого примера – рисовать фигуру на холсте по щелчку мыши с помощью drawShape(). На текущий момент единственной фигурой является домик. Мы будем слушать любые щелчки мыши для id canvas.
		+
		+	function setupInteraction() {
		+	currentDrawShape = house;
		+	new Event.observe(
		+	‘canvas’,
		+	‘click’,
		+	function(evt) {
		+	ic.drawShape(currentDrawShape, {x : Event.pointerX(evt), y :
		+	Event.pointerY(evt)});
		+	}
		+	);
		+	}
		+
		+	Вызов setupInteraction() в конце функции draw() позволяет помещать объекты на холст с помощью мыши. Пока от него мало проку, разве что вы затеяли нарисовать много-много домиков. Куда полезнее будет позволить пользователю самому выбирать из доступных фигур-
		+	шаблонов – как в Dia или OmniGraffe. На уровне кода, для того, чтобы изменить изображение, которое мы рисуем, достаточно изменить значение currentDrawImage. Поэтому, если вы добавите строку
		+
		+	currentDrawShape = eye;
		+
		+	в setupInteraction(), то будете рисовать глаза вместо домов.
		+
		+	Включим функцию addOption() для добавления фигуры в перечень шаблонов:
		+
		+	function addShapeOption(shape, name) {
		+	shapeOptions[name] = shape;
		+	$(‘slist’).innerHTML += ‘<li><a href=”#” onClick=”currentDrawSh
		+	ape = shapeOptions[\’’+name+’\’]; return false;”>’+name+’</li>’;
		+	}
		+
		+	Это хороший способ для пользователя выбрать текущий шаблон currentDrawShape, и все, что нам надо сделать для активации опции, это вызвать функцию
		+
		+	addShapeOption(theShapeObject, ‘name of object’);
		+
		+	В заключительной версии исходного кода на сайте каждая фигура сама добавляет себя в список, а пользователь может из него выбирать.
		+
		+	Тэг canvas будет одним из самых интересных добавлений в спецификацию HTML, c учетом огромного интереса к нему в так называемых средах Web 2.0. Ныне доступные примеры покамест довольно примитивны, но потенциал огромен. Уже создаются библиотеки для графиков, и комбинируя их с простыми действиями, можно добиться поразительных – и полезных приложений.

	----		----