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

Вход на сайт

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

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

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

torrvic, возможно, Вам нужно добавить -lGLU
Извините за тупой вопрос. У меня при сборке Вашего примера выходит ошибка: "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
Среда программирования: 
HTML 5 + JavaScript

Использовать canvas не очень сложно, приветствуется если у вас есть понимание HTML и JavaScript.

Предварительная «настройка» нашего холста.

Сanvas с английского переводится как холст. <canvas> пожалуй самое интересное в HTML5 так как он предназначен для создания графики при помощи скриптования.
Посмотрим на сам элемент <canvas>

<canvas id="tutorial" width="150" height="150"></canvas>

Элемент <canvas> имеет всего два атрибута - width и height. Оба они не обязательны, если ширина и высота не определены, canvas будет создан шириной в 300 пикселей и 150 пикселей высотой. Размер элемента может быть произвольным и задаваться через CSS. Перед тем как приступить непосредственно к рисованию, давайте заготовим минимальный шаблон. Для этого откроем любой текстовый редактор, скопируем код, приведенный ниже и сохраним его с расширение ( .html ).
<html>
    <head>
        <title>canvasExample</title>
        <style>
            #example {
                border: 1px #000 solid;
            }
        </style>
    </head>
    <body>
        <canvas height='320' width='480' id='example'>Обновите браузер</canvas>
        <script>
            var example = document.getElementById("example");
            var ctx = example.getContext('2d');
        </script>
    </body>
</html>

Теперь можете открыть сохраненный файл в браузере и полюбоваться на результат. По умолчанию поле для рисования белого цвета, что бы наш <canvas> не сливался была добавлена добавлена черная обводка.

Ближе к делу.

Я думаю вы уже поняли из заголовка урока, что рисовать мы будем не стандартными методами, а с использованием библиотеки Fabric.js.
Проблема в том, что родной canvas API ужасно низко-уровневый. Одно дело если нужно нарисовать несколько простых фигур или графиков, и забыть о них. Другое — интерактивность, изменение картинки в какой-то момент, или рисование более сложных фигур. Дело в том, что обычные canvas методы позволяют нам вызывать только очень простые графические комманды, вслепую меняя целый битмап холста <canvas>. Нужно нарисовать прямоугольник? Используем fillRect(left, top, width, height). Нарисовать линию? Используем комбинацию moveTo(left, top) и lineTo(x, y). Как будто рисуем кисточкой по холсту, накладывая всё больше и больше краски, почти без какого-либо контроля. Fabric.js включает в себя обектную модель, которой так не хватает при работе с <canvas>, а так же SVG парсер, интерактивный слой и множество других, незаменимых инструментов.
Скачайте последнюю версию Fabric.js и положите рядом с вашим файлом. Теперь немного изменим наш шаблон.

<html>
    <head>
        <title>canvasExample</title>
        <style>
            #example {
                border: 1px #000 solid;
            }
        </style>
        <meta charset="utf-8"/>
        <!-- подключаем  скачанный Fabric.js -->
        <script src="min.js"></script>
    </head>
    <body>
        <canvas height='320' width='480' id='example'>Обновите браузер</canvas>
        <script>
            // создаем "оболочку" вокруг canvas элемента (id="example")
            var example = new fabric.Canvas('example');
        </script>
    </body>
</html>

Переходим к рисованию.

Давайте изобразим прямоугольник. Все очень просто, создадим переменную rect и после строки

var canvas = new fabric.Canvas('example');
переменной rect присвоим класс отвечающий за прорисовку прямоугольника.
            var rect = new fabric.Rect({
                  left: 100,
                  top: 100,
                  fill: '#000',
                  width: 100,
                  height: 60
                });
            // добавляем прямоугольник, чтобы он отобразился
            example.add(rect);

результат:

#example, #example1 { border: 1px #000 solid; }

Обновите браузер

var example = document.getElementById("example"); var ctx = example.getContext('2d'); ctx.fillStyle = '#000'; // меняем цвет клеток ctx.fillRect(100, 100, 100, 60);

Рисовать прямоугольник — это конечно не серьёзно. Давайте хоть сделаем с ним что-нибудь интересное. Например, повернем на 45 градусов.

var canvas = new fabric.Canvas('c');
 
// создаём прямоугольник с углом в 45 градусов
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: '#000',
  width: 100,
  height: 60,
  //просто добавим параметр angle и все готово
  angle: 45
});
 
example.add(rect);

пример:

Обновите браузер

var example = document.getElementById("example1"); var ctx = example.getContext('2d'); ctx.fillStyle = '#000'; // меняем цвет клеток ctx.translate(100, 100); ctx.rotate(Math.PI / 180 * 45); ctx.fillRect(-50, -30, 100, 60);

Используя Fabric, всё что надо было сделать, это поменять значение угла на 45. А вот с обычными методами всё не так-то просто. Во первых, мы не можем управлять объектами напрямую. Вместо этого, приходится менять позицию и угол самого битмапа (без Fabric ctx.translate, ctx.rotate). Потом рисуем прямоугольник, при этом не забывая отодвинуть битмап соответственно (-50, -30), так, чтобы прямоугольник появился на 100,100. Ещё надо не забыть перевести угол из градусов в радианы при повороте битмапа.

Теперь вам, наверное, становится понятно зачем существует Fabric.

Объекты.

Мы уже видели как работать с прямоугольниками, используя fabric.Rect конструктор. Но, конечно же, Fabric предоставляет многие другие простые фигуры: круги, треугольники, эллипсы и т.д. Все они доступны из fabric объектов, соответственно, fabric.Circle, fabric.Triangle, fabric.Ellipse и т.д.

7 базовых фигур доступных в Fabric:

Нужно нарисовать круг, треугольник? Просто создаём соответствующий объект и добавляем его на холст. Тоже самое с другими формами:

//круг
var circle = new fabric.Circle({
  radius: 20, 
  fill: '#D5002C', 
  left: 100,
  top: 100
});
//треугольник
var triangle = new fabric.Triangle({
  width: 20, 
  height: 30, 
  fill: '#FBBA1E', 
  left: 50, 
  top: 50
});
 
example.add(circle, triangle);

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

Fabric берёт на себя заботу о состоянии холста и перерисовке. От нас требуется только менять сами объекты.

Что бы подвинуть объект используйте метод set:

//меняем положение круга
circle .set({ left: 20, top: 50 });
 
//перерисовать объекты
example.renderAll()
Точно также можно менять любые другие атрибуты, которых доступно несколько.

Во первых, есть атрибуты, меняющие позицию — left, top; размер — width, height; сам рендеринг (отображение объекта) — fill, opacity, stroke, strokeWidth; масштаб и поворот — scaleX, scaleY, angle; и даже переворот (180 градусов) — flipX, flipY.

Список всех атрибутов можно найти на официальном сайте

Послесловие

Для начала достаточно. Мы затронули только самые базовые аспекты Fabric. Разобравшись с ними, вы с лёгкостью сможете создать как простые, так и сложные фигуры, или картинки.
Например вот, что получилось у меня с использованием Fabric.js:

Прикрепленный файлРазмер
Исходный код Angry bird37.71 кб