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

Вход на сайт

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

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

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

Спасибо за реализацию, она действительно быстрая. Но не все линии отрисовывает в нужную сторону... Необходимо добавить проверку для случая X-линии if(y1 "<" y0) grad=-grad; и аналогично для Y-линии if(x1 "<" x0) grad=-grad; P.S. На...
Отличные уроки(учу GL по ним), только в renderScene нужно добавить очистку буфера цвета и буфера глубины. При изменении размеров треугольники размножаются)
как исправить это , сделал все по инструкции
Timer1 - выдает ошибку. Использовал IdleTimer1, работает! unit Unit1; {$mode objfpc}{$H+} interface uses Classes, SysUtils, FileUtil, Forms, Controls, Graphics, Dialogs, StdCtrls, ExtCtrls, OpenGLContext, GL, GLU; type { TForm1 } TForm1 =...
в коде присутствуют ошибки! // Считываем координаты procedure TForm1.getCoords(Sender: TObject); var j1:longint; begin n:= StrToInt(Edit2.Text); //число точек s1:=Edit1.Text; s2:=''; i := 1; j:=1; k:=0...

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

Яндекс.Метрика Рейтинг@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?