Всё для Учёбы — студенческий файлообменник
1 монета
pdf

Студенческий документ № 005300 из ИУБиП

Лабораторное занятие № 7

Тема: Работа со слоями

Цель: Изучить приемы вырезки из слоя, создания вложенных слоев, использования различных эффектов с прозрачными слоями

Задания:

1 Ознакомиться с теоретическими аспектами темы.

2 Создать документ согласно методическим указаниям.

3 Создайте документ, содержащий три кнопки, которые могут запускать и останавливать движение слоев.

4 Создайте документ, в котором можно задать выделяемую область. В документе должен быть использован механизм вырезания и перемещение изображения. Это нужно для того, чтобы вырезаемая часть была зафиксирована, т.е. чтобы при перемещении всего изображения не происходила смена видимого на экране фрагмента.

5 Создайте документ, в котором используются два изображения (сплошные серые зоны здесь на самом деле являются прозрачными):

Необходимые приборы: ПК, текстовый редактор Блокнот, браузер

Методические рекомендации к выполнению лабораторной работы:

Методические рекомендации к выполнению задания 1

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

(Здесь приписаны параметры left=0 и top=0, поскольку в противном случае, если этого не сделать, то в некоторых версиях возникают проблемы).

Хотя само изображение и имеет размеры 209x264 пикселов, мы можем видеть лишь его малую часть:

Данный фрагмент изображения имеет размер 90x70 (пикселов). Первые два значения, указанные в атрибуте clip (атрибуте HTML-тэга или ), указывают верхний левый угол вырезаемой части. Следующие два значения указывают нижний правый угол. Сказанное можно проиллюстрировать следующим рисунком:

Еще более интересных результатов можно добиться, управляя вырезанной частью с помощью языка JavaScript. Точнее, Вы можете изменять значения свойств clip.left, clip.top, clip.right и clip.bottom объекта

Layer. Достаточно всего лишь занести в одно из этих свойств новое значение, как фрагмент тут же будет кадрирован соответствующим образом . В следующем примере параметры вырезанной части изображения меняются динамически, и в результате у пользователя создается впечатление, будто изображение медленно "растет":

Методические рекомендации к выполнению задания 2 Создайте документ со следующим кодом скрипта:

middleX) && (pos > middleY)))

setTimeout("show()", 20); }

// -->

Кнопка, представленная в разделе , вызывает функцию start(). Сначала мы должны определить точку, с которой нам следует начать работу - фактически это будет некий пиксел в центре нашего изображения. Значения координат x и y этого пиксела мы помещаем в переменные middleX и middleY. После этого мы вызываем функцию show(), которая задает размеры вырезаемой части изображения в зависимости от значений переменных middleX, middleY и параметра pos. При этом значение переменной pos автоматически увеличивается при каждом вызове функции show(). То есть размер вырезаемой части изображения с каждым разом становится все больше и больше. В самом конце процедуры show() мы устанавливаем таймер с помощью вызова setTimeout() - и благодаря этому функция show() вызывается вновь и вновь. И этот процесс остановится только тогда, когда изображение будет показано целиком.

Заметим, что размер изображения мы получаем в самом начале функции start():

var width= document.layers["imgLayer"].document.davinci.width; var height= document.layers["imgLayer"].document.davinci.height; С помощью конструкции document.layers["imgLayer"] мы можем обратиться к слою с именем imgLayer. Однако почему после document.layers["imgLayer"] мы ставим document? Дело в том, что каждый слой имеет свою собственную HTML-страницу - то есть, каждый слой имеет свой объект document. Чтобы получить доступ к изображению внутри слоя imgLayer, нам необходимо получить доступ к этому объекту document. В приведенном выше примере такое изображение носило название davinci. Все остальное поле листа должно быть чистым.

Методические рекомендации к выполнению задания 3

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

В первом примере используется слой (называемый parentLayer), в который вложено еще два других слоя (layer1 и layer2).

Создайте документ, содержащий три кнопки, которые могут запускать и останавливать движение слоев. Исходный код скрипта:

100) dir0= true;

document.layers["parentLayer"].left= 100 + pos0; } if (move1) {

// перемещение parentLayer

if (dir1) pos1-- else pos1++;

if (pos1 20) dir1= true;

document.layers["parentLayer"].layers["layer1"].top= 10 + pos1; } if (move2) {

// перемещение parentLayer

if (dir2) pos2-- else pos2++;

if (pos2 20) dir2= true;

document.layers["parentLayer"].layers["layer2"].top= 10 + pos2; }} // -->

Этопервыйслой

Это второй слой

Это главный (родительский) слой

Также можно видеть, что перемещение слоя parentLayer

сопровождается перемещением и двух других слоев, тогда как перемещение слоя layer1 (или layer2) ни на что другое не влияет. Этот пример демонстрирует возможность объединения группы объектов с помощью механизма вложенных слоев.

Можно видеть, что внутри parentLayer мы определили два слоя. Это как раз и есть вложенные слои. Как получить к этим слоям доступ в языке JavaScript? Как это делается, можно посмотреть в функции move():

document.layers["parentLayer"].left= 100 + pos0;

... document.layers["parentLayer"].layers["layer1"].top= 10 + pos1;

... document.layers["parentLayer"].layers["layer2"].top= 10 + pos2;

Чтобыполучитьдоступквложеннымслоям,

Вамнедостаточнобудетпростонаписатьdocument.layers["layer1"]илиdocument.

layers["layer2"], посколькуслоиlayer1иlayer2лежатвнутриparentLayer.

Методические рекомендации к выполнению задания 4

Создайте документ, в котором можно задать выделяемую область. В документе должен быть использован механизм вырезания и перемещение изображения. Это нужно для того, чтобы вырезаемая часть была зафиксирована, т.е. чтобы при перемещении всего изображения не происходила смена видимого на экране фрагмента. Исходный код скрипта:

40) direction= false; if (direction) pos+= 2 else pos-= 2;

document.layers["clippingLayer"].layers["imgLayer"].top= 100 + pos;}

// -->

И снова, можно видеть обращение к вложенному слою:

document.layers["clippingLayer"].layers["imgLayer"].top= 100 + pos;

Методические рекомендации к выполнению задания 5

Интересные эффекты могут быть созданы с помощью (частично) прозрачных слоев. Сочетание специально подобранных изображений с прозрачными областями может создавать совершенно потрясающий результат. Не все форматы изображений поддерживают работу с прозрачными частями. В настоящее время лучший из отвечающих этому условию форматов - gif89a. Большинство новых графических программ поддерживает этот формат. Помимо этого, в Internet доступны некоторые свободно распространяемые инструменты для работы с графикой. Новый формат изображений PNG также поддерживает эффект прозрачных частей изображения.

Скриптдокумента:

Вопросы для самоконтроля:

1 Охарактеризуйте процесс вырезания.

2 Перечислите основные команды для работы с изображениями.

3 Какие параметры слоев существуют?

4 Каким образом осуществляется изменение прозрачности слоев? 5 Какую роль выполняет функция move()?

Показать полностью… https://vk.com/doc62771886_249148504
231 Кб, 11 декабря 2013 в 10:52 - Россия, Ростов-на-Дону, ИУБиП, 2013 г., pdf
Рекомендуемые документы в приложении