Рисование на 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);
|
Рекомендуем почитать