Уроки, алгоритмы, программы, примеры

Вход на сайт

Материалы по разделам

Построения
на плоскости (2D)
Графика
в пространстве (3D)
Вычислительная
геометрия
Физическое
моделирование
Фрактальная
графика

Новые комментарии

Извините за тупой вопрос. У меня при сборке Вашего примера выходит ошибка: "undefined reference to gluLookAt". Не могу найти в какой библиотеке находится эта функция. У меня задано: -lGL -lglut ... Искал в /usr/lib таким образом: nm lib*so* | grep...
Здравствуйте. Спасибо за проект. У меня вопрос, по какой причине определение принадлежности точки многоугольнику работает некорректно, если координаты из больших чисел состоят, например: int[] vertex = new int[] {...
Сейчас проверила нашла причину не запускания // Создание контекста воспроизведения OpenGL и привязка его к панели на форме OpenGLControl1:=TOpenGLControl.Create(Self); with OpenGLControl1 do begin Name:='OpenGLControl1'; //вот тут...
Ну..кажется что то пошло не так http://pp.usera...

Счетчики и рейтинг

Рейтинг@Mail.ru
Deco Grille. Стальные решетки на подоконники с орнаментом на радиатор отопления.
Среда программирования: 
HTML 5 + JavaScript

raphael.js - это JavaScript библиотека для работы с векторной графикой в браузере, которая легка в использовании. С её помощью можно создавать свои собственные диаграммы, рисунки, работать с растровыми изображениями. С raphael.js это можно сделать легко и просто. Скачать raphael.js.

При использовании библиотеки ее желательно скопировать в папку с файлом html, так как библиотеки проще вызывать именно из папки вместе с проектом.
Для подключения нужно ввести строку

<html><script type="text/javascript" src="raphael.js">
<script type="text/javascript">

Создаём файл в формате html:
<html>
<head>
<title>Библиотека Raphael</title>
        </style>
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript">
        window.onload = function() {
            var ph = document.getElementById("placeholder");
            var paper = Raphael(10, 50, 5000, 5000);
        }
	</script>
</head>
 
<body>
<div id="placeholder"></div>
</body>
</html>

Функция Raphael создаёт холст, на котором мы будем рисовать. Достаточно указать координаты одного угла и координаты второго.

Рисуем фигуры

Создадим прямоугольник при помощи метода rect

var c = paper.rect(200, 120, 600, 400);

Для закраски прямоугольника используем attr:
c.attr({
		fill: "45-#000-#ccc:20-#000:50-#ccc:80-#000"
	});

Код результата:
<html>
<head>
<title>Библиотека Raphael</title>
        </style>
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript">
        window.onload = function() {
            var ph = document.getElementById("placeholder");
            var paper = Raphael(10, 50, 5000, 5000);
var c = paper.rect(200, 120, 600, 400);
c.attr({
		fill: "45-#000-#ccc:20-#000:50-#ccc:80-#000"
	});
        }
	</script>
</head>
 
<body>
<div id="placeholder"></div>
</body>
</html>

Результат:
Повернём прямоугольник при помощи метода rotate.
c.rotate(45);

Код с применением метода:
<html>
<head>
<title>Библиотека Raphael</title>
        </style>
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript">
        window.onload = function() {
            var ph = document.getElementById("placeholder");
            var paper = Raphael(10, 50, 5000, 5000);
var c = paper.rect(200, 120, 600, 400);
c.attr({
		fill: "45-#000-#ccc:20-#000:50-#ccc:80-#000"
	});
        }
	</script>
</head>
 
<body>
<div id="placeholder"></div>
</body>
</html>

Метод ellipse отображает эллипс.
var c = paper.ellipse(100, 100, 30, 40);

Пример:
<html>
<head>
<title>Библиотека Raphael</title>
        </style>
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript">
        window.onload = function() {
            var ph = document.getElementById("placeholder");
            var paper = Raphael(10, 50, 5000, 5000);
var c = paper.ellipse(790, 400, 400, 200);
c.attr({
		fill: "45-#000-#ccc:20-#000:50-#ccc:80-#000"
	});
        }
	</script>
</head>
 
<body>
<div id="placeholder"></div>
</body>
</html>

Пример повёрнутого эллипса:
<html>
<head>
<title>Библиотека Raphael</title>
        </style>
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript">
        window.onload = function() {
            var ph = document.getElementById("placeholder");
            var paper = Raphael(10, 50, 5000, 5000);
var c = paper.ellipse(790, 400, 400, 200);
c.attr({
		fill: "45-#000-#ccc:20-#000:50-#ccc:80-#000"
	});
        }
	</script>
</head>
 
<body>
<div id="placeholder"></div>
</body>
</html>

Можно также сдвинуть эллипс:
c.translate(x, y);

<html>
<head>
<title>Библиотека Raphael</title>
        </style>
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript">
        window.onload = function() {
            var ph = document.getElementById("placeholder");
            var paper = Raphael(10, 50, 5000, 5000);
var c = paper.ellipse(790, 400, 400, 200);
c.attr({
		fill: "45-#000-#ccc:20-#000:50-#ccc:80-#000"
	});
c.rotate(45);
c.translate(100, 100);
        }
	</script>
</head>
 
<body>
<div id="placeholder"></div>
</body>
</html>

И изменить размер
c.scale(1.5, 2.5);

увеличивает в 1.5 раза в длину и в 2.5 раза в ширину.
Можно вставить картинку
var c = paper.image("apple.png", 10, 10, 100, 100);

Вывод:

Здесь описаны только основные возможности библиотеки Raphael. На самом деле их гораздо больше.

Комментарии

releyshic аватар
Опубликовано releyshic в 7. Ноябрь 2014 - 10:42.

В примере с c.rotate(45); его нет в коде )

Хорошоб чтобы с картинкой пример был, ка ееё вращать и тп
А есть ли чтолибо для работы в 3D?