Движение по произвольной кривой

Рассмотрим задачу организации движения видимого элемента по произвольной кривой, заданной выражением с одной переменной. Функция движения в качестве параметров будет иметь два выражения, которые описывают изменения вертикальной и горизонтальной координат элемента. Эти выражения будут содержать одну переменную, которую мы обозначим через х – строчной латинской буквой. Переменную х можно интерпретировать как независимый параметр движения (например, время). С помощью встроенной функции eval() можно вычислить значения этих выражений при конкретном значении переменной х и присвоить их параметрам left и top таблицы стилей перемещаемого элемента. Функция (пусть это будет move()), которая все это выполняет, передается в качестве первого параметра методу setInterval(), который периодически вызывает ее через заданный интервал времени.

Функция инициализации движения curvemove() принимает три строковых параметра (ID перемещаемого элемента, выражение для вертикальной координаты и выражение для горизонтальной координаты) и один числовой параметр (период времени, через который координаты элемента пересчитываются). Ниже приводятся определения функций curvemove() и move():

 

function curvemove(xid, уехрr, xexpr, ztime) {

/* Движение по произвольной кривой.*/

 

if (!xid) return null

if (!yexpr) yexpr = "x"

if (!xexpr) xexpr = "x"

if (!ztime) ztime = 100 // интервал времени, мс

x = 0 /* глобальная переменная, входящая в выражения уехрr и хехрr */

setInterval("move('"+xid+" ', + уехрг + " "+ xexpr +"' ztime)

}

function move(xid, yexpr, xexpr) {

x++

document.all[xid].style.top = eval(yexpr)

document.all[xid].style.left = eval(xexpr)

}

Параметры:

- хid – id движущегося объекта, строка;

- уехрr – выражение для вертикальной координаты;

- хехрr – выражение для горизонтальной координаты;

- ztime – интервал времени между вызовами функции move(), мс.

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

Ниже приведен пример HTML документа с движущимся изображением:

 

<НТМL>

<IMG ID = "myimg" SRC = "pict1.gif" STYLE = "position:absolute">

<SCRIPT>

function curvemove(xid, yexpr, xexpr, ztime) {

// код определения функции

}

function move(xid, yexpr, xexpr) {

// код определения функции

}

Curvemove()'myimg', "100 + 50*Math.sin(0.03*x)", "50 + х", 100)

</SCRIPT>

</HTML>

 

В этом примере изображение будет перемещаться по синусоиде с 50 пикселов и горизонтальной скоростью 10 пикселов в секунду. Начальные ординаты графического объекта равны 100 и 50 пикселов по вертикали и горизонтали соответственно.

Рисование линий

В JavaScript нет специальных встроенных средств для рисования произвольных линий. Для решения этой задачи ужно вывести на экран изображение размером 1x1 пиксел, залитое цветом, отличающимся от цвета фона. Это изображение следует разместить несколько раз в соответствии с координатами, которые задаются параметрами позиционирования top и left атрибута STYLE тега <IMG>. С помощью сценария можно сформировать строку, содержащую теги <IMG> с не­обходимыми атрибутами, а затем записать ее в документ методом write().

Рисование прямой линии

Для отображения точки в HTML можно использовать следующий тег:

 

<IMG SRC = "point.bmp" STYLE = "position:absolute; top:y; left:x">

Здесь point.bmp – имя графического файла, содержащего один пиксел; у, х – числа, указывающие положение графического файла в пикселах. Изображение точки размером 1x1 пиксел можно создать в любом графическом редакторе. Из соображений экономии его лучше всего сохранить в файле формата BMP, а не JPEG или GIF (при малых размерах изображения алгоритмы сжатия неэффективны).

Чтобы задать размеры отображения точки на экране, следует использовать атрибуты WIDTH и HEIGHT (ширина и высота):

 

<IMG SRC = "point.bmp" STYLE = "position: absolute; top:y; left:x" WIDTH=n HEIGHT=n>

 

Одинаковые значения атрибутов WIDTH и HEIGHT задают представление точки в виде квадрата размером n×n пикселов. При этом точка с исходными размерами 1x1 пиксел просто растягивается. Таким образом, имеется возможность задать отображаемые размеры (масштаб) одной точки, а, следовательно, и определить толщину линии.

Далее следует пример определения функции, которая рисует прямую линию с заданными координатами xl, yl, х2, у2 и толщиной линии n.

 

Function line(xl, yl, х2, у2, n){

/*xl, yl – начало линии, х2, у2 – конец, n – толщина */

var clinewidth = " WIDTH=" + n + "HEIGHT=" + n /* строка для учета толщины */

var xstr = "" // строка тегов для записи в HTML-документ

var xstr0 = ' <IMG SRC="point.bmp"' + clinewidth + ' STYLE = "positlon:absolute; '

var k = (y2 – yl)/(x2 – xl) // коэффициент наклона линии

var x = xl // начальное значение координаты х

/* Формирование строки, содержащей теги <IMG... >: */

while (x <= х2) {

xstr += xstr9 + 'top:' + (yl + k* (x – xl)) + ': left:¹ + x + '

x+ +

// запись в документ

 

Рисование кривой линии

Функция curve() для рисования кривой принимаtn следующие параметры: имя графического файла с изображением точки (может быть любое изображение), выражение, задающее кривую, координаты начала линии, количество точек линии, толщина линии и длина штриха (если потребуется штриховая линия). Далее следует код функции curve() для рисования кривых.

 

function curve(pict_file,yexpr, x0, y0, t, n. s){

/* pict_file - имя графического файла

yexpr - выражение с переменной х

х0, у0 - координаты начала кривой

t - количество точек кривой (значений переменной х)

n - толщина линии

s - длина штриха и паузы */

if (!yexpr) return null

if (!pict_file) pict_file = "point.bmp"

if (!s) s = 0

if (!t) t = 0

var clinewidth = ''

if (!n)

clinewidth = 'WIDTH=' + n + 'HEIGHT=' + n

var x

xstrG = '<IMGSRO "' + pict_file + '"'' + clinewidth + STYLE = "position:absolute;top: '

xstr = ""

var i = 0, draw = true

for(x = 0; x < t; x++) {

if (draw)

xstr += xstr0 + (y0 + eval(yexpr)) + '; left:' + (x0 + x)

if (i > s&&s > 0) {

draw =!draw

i = 0

}

i ++

}

document.write (xstr) // запись в документ

 

Задания к лабораторной работе № 9

 

Задание 1. Создать программу на JS, позволяющую перетащить мышью область текста и картинку.

Задание 2. Создать программу на JS, организующую движение картинки по прямой линии.

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

Задание 4. Нарисовать график функции, выбрав функцию с помощью радио кнопки (y=x², y=x³, y=sin(x), y=cos(x)).

Задание 5*. Реализовать выбор цвета графика функции с помощью списка.