Рисование на javascript jsgraphics

Сколько раз вы хотели просто нарисовать стрелку на своей web-странице? Или несколько линий тут и там? К сожалению, HTML ничем не может в этом помочь, а использование изображений съедает трафик и замедляют загрузку ваших страниц.


Благодаря Уолтеру Зорну, вы можете теперь использовать JavaScript, чтобы рисовать объекты на ваших web-страницах. Запустите свой JavaScript редактор, следуйте инструкциям, приведенным ниже, и вы будете рисовать формы на своих web-страницах в мгновение ока.
Нажмите здесь, чтобы загрузить JavaScript библиотеку векторного рисования (6 КБ) согласно лицензии LGPL

Используйте библиотеку, чтобы рисовать:
линии
круги и овалы
прямоугольники
ломаные линии и многоугольники
тексты
картинки

Особенности: библиотека – кроссбраузерная и быстрая. Однако, из-за ограничений HTML, рисование на ваших web-страницах с использованием JavaScript медленнее по сравнению с рисованием в автономных приложениях. Если Вы хотите видеть более детальные объяснения про работу библиотеки, посетите вебсайт Уолтера Зорна www.walterzorn.com.

Кака использовать библиотеку, 3 быстрых шага

Скопируйте библиотеку в папку с web-страницами и добавьте следующее в разделе <head> :

1
<script type="text/javascript" src="wz_jsgraphics.js"></script>

В теле документа, определите один или более <div> тэгов для рисунка, например:

1
<div id="Canvas" style="position:relative;height:5px;width:5px;"></div>

Рисуем !
Вызовите jsGraphics () без параметров при рисунке в пределах всего документа
Используйте див «Canvas» для рисования

1
2
3
4
5
6
7
8
9
10
11
12
13
var jg = new jsGraphics("Canvas");
jg.setColor("maroon");
jg.fillEllipse(450, -5, 40, 70);
jg.setStroke(1);
jg.setColor("#ff6666");
jg.drawPolyline(new Array(90, 640, 90), new Array(0, 25, 90));
jg.setColor("green");
jg.drawRect(100,40,200,18);
jg.setColor("blue");
jg.setStroke(Stroke.DOTTED);
jg.drawRect(-20,0,32,50);
jg.drawEllipse(250,10,100,100);
jg.paint();

Функции

clear();
Цель: очищает информационное наполнение между тэгами <div>..</div>, используемые для рисунка.
Пример:

1
2
jg.clear();
drawEllipse (x, y, ширина, высота);

Цель: рисует эллипс.
Пример:

1
2
jg.drawEllipseEllipse (0, 0, 100, 200);
drawImage ("URL", x, y, ширина, высота, обработчик события);

Цель: отображает изображение в заданном месте, с дополнительным обработчиком событий.
Примеры:

1
2
3
drawImage ("MyImage.gif", 10, 10, 100, 200);
drawImage ("MyImage.gif", 10, 10, 100, 200, 'onmouseover = "DoSomething ()"');
drawLine (x1, y1, x2, y2);

Цель: рисует линию от точки x1, y1 к точке x2, y2.
Пример:

1
2
jg.drawLine (0, 0, 100, 200);
drawPolyline (Xpoints, Ypoints);

Цель: создавая массив точек, рисует множество соединенных линий.
Пример:

1
2
jg.drawPolygon(new Array(0,10,200), new Array(0,10,100));
drawRect (x, y, ширина, высота);

Цель: рисует прямоугольник.
Пример:

1
2
jg.drawRect (0,0, 100 200);
drawPolygon(xPoints, yPoints);

Цель: создавая массив точек, рисует многоугольник.
Пример:

1
2
jg.drawPolygon(new Array(0,10,200), new Array(0,10,100));
drawString("text", x, y);

Цель: отображает текст в заданном месте.
Пример:

1
2
jg.drawString("Hello World!", 10, 10);
drawStringRect("text", x, y, width, "justification");

Цель: отображает выровненный текст определенной ширины. Выравнивание может быть:
«left»
«center»
«right»
«justify»
Пример:

1
2
jg.drawString("Hello World!", 10, 10, 500, "center");
fillEllipse (x, y, ширина, высота);

Цель: рисует эллипс с заливкой.
Пример:

1
2
jg.fillEllipse (0,0, 100, 200);
fillPolygon (Xpoints, Ypoints);

Цель: рисует многоугольник с заливкой.
Пример:

1
2
jg.fillPolygon(new Array(0,10,200), new Array(0,10,100));
fillRect (x, y, ширина, высота);

Цель: рисует прямоугольник с заливкой.
Пример:

1
2
jg.fillRect (0,0, 100, 200);
paint();

Цель: Чтобы оптимизировать производительность, библиотечные функции генерируют код рисунка внутренне. Функцию paint() нужно назвать, чтобы сделать фактический рисунок.
Пример:…
Ряд вызовов рисовальных функций здесь…

1
2
jg.paint ();
setColor ("#HexColor");

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

1
2
3
jg.setColor("#ff6666");
jg.setColor("blue");
setFont ("семейство шрифтов", "size+unit", fontStyle);

Цель: Определяет свойства шрифта, которые будут использоваться drawString (); функцией. Доступные начертания шрифта:
Font.PLAIN
Font.BOLD
Font.ITALIC
Font.ITALIC_BOLD
Пример:

1
2
jg.setFont("Times New Roman", "10px", Font.PLAIN);
setPrintable (boolEnable);

Цель: допускает печать JavaScript-сгенерированных рисунков. Отметьте, что есть ущерб производительности: рендеринг замедляется.
Пример:

1
2
jg.setPrintable(true);
setStroke (толщина);

Цель: Определяет толщину линии, которая будет использоваться последующими функциями рисунка.
Пример:

1
jg.setStroke (3);



Рекомендуем почитать

 

Добавить комментарий


Ваше имя:


Комментарий:


Введите: Картинка