KeepDraw.js — javascript framework для рисования на canvas

в 9:12, , рубрики: canvas, framework, github, html, html5, javascript

Всем привет. В этой статье речь пойдет о библиотеке для рисования на canvas — KeepDraw.
Это фреймворк для работы с canvas 2d с поддержкой событий и анимации.

Отличительные черты:

  1. API в стиле ООП;
  2. События для мыши, клавиатуры и сенсорных экранов;
  3. Поддержка анимации;
  4. Рисование кривых безье по точкам;
  5. Множество функций, проверяющих пересечения фигур и точек;
  6. Заливка фигур градиентами и изображениями;
  7. Шаблоны объектов — линия, прямоугольник, текст, многоугольник и круг.
  8. Поддержка мобильных устройств.
  9. Сглаживание фигур с использование кривых безье.
  10. Легковесный. Сжатая версия весит 15 килобайт.

Введение

Главным объектом на холсте является Stage. В нем указывается ширина холста, идентификатор div блока (canvas), высота и фон. В Stage.childs включены все видимые фигуры на холсте. К каждому холсту можно указать по одному объекту Stage. Если вы указали stage и фигуры, можно приступать к анимации или событиям.

Пример кода:

//создаем контейнер
var stage = new KeepDraw.Stage({
width: innerWidth,
height: innerHeight,
canvas: 'canvas',
fill: '#00afff'
});

//создаем фигуру
var circle = new KeepDraw.Circle({
x: innerWidth / 2,
y: innerHeight / 2,
radius: innerHeight / 3,
color: 'white',
stage: stage
});

image

Основные фигуры

В KeepDraw имеются: прямоугольник (Rect), правильный многоугольник (Polygon), Текст (Text), Линия или собственная фигура (Line).

Пример собственной фигуры:

var stage = new KeepDraw.Stage({
width: innerWidth,
height: innerHeight,
canvas: 'canvas',
fill: '#00afff'
});
var line = new KeepDraw.Line({
x: 100,
y: 50,
segments: [[0,0,-70,0,-70,100],[0,100,70,100,130,10],[200,10,270,10,270,108.94],[200,100,130,100,70,0.3],[0,0,-70,0]],
color: 'white',
strokeWidth: 5,
strokeColor: '#30ccff',
stage: stage
});

image

Стили

Ко всем фигурам можно применить следующие значения:

  • color — Заливка (цвет, градиент или изображение);
  • strokeColor — цвет обводки;
  • strokeWidth — ширина обводки;
  • shadowColor — цвет тени;
  • shadowWidth — ширина тени;
  • lineCap — обводка сегментов линии (обычная — butt, прямоугольная — square, овальная — round;
  • lineJoin — обводка концов линии (обычная — mitter, прямоугольная — bevel, овальная — round;
  • shadowOffsetX — сдвиг тени по оси x;
  • shadowOffsetY — сдвиг тени по оси y;
  • font — шрифт текста (размер и шрифт);
  • opacity — непрозрачность (0 — 1);

Пример кода:

var stage = new KeepDraw.Stage({
width: innerWidth,
height: innerHeight,
canvas: 'canvas',
fill: '#00afff'
});

var circle = new KeepDraw.Circle({
x: innerWidth / 2,
y: innerHeight / 2,
radius: innerHeight / 6,
color: 'rgba(255, 255, 255, 0.5)',
strokeColor: 'white',
shadowWidth: 100,
strokeWidth: 20,
shadowColor: 'rgba(0,0,0,0.5)',
stage: stage
});

image

Дополнительные функции

У всех фигур есть свои функции:

  • toLine() — преобразовать любую фигуру в линию;
  • smooth(сила 0 — 3) — сглаживание с помощью безье, применимо только к линии;
  • endPoints() — возвращает массив крайних точек: [верхняя[x, y], нижняя[x, y], левая[x, y], правая[x, y]];
  • clone() — возвращает клон фигуры;
  • star() — делает линию похожей на звезду;
  • floor() — округляет все значения в объекте фигуры;
  • setAttrs(объект) — присваивает фигуре значения объекта;
  • simplify(периодичность) — равномерно удаляет сегменты линии;
  • reflect(по ширине, по высоте), true или false — отражает линию;
  • inScreen() — определяет, видна ли фигура на экране;
  • inDistance(minX, minY, maxX, maxY) — определяет, находится ли фигура на определенной дистанции;
  • rotate(градусы, [x, y]) — поворачивает линию вокруг своей оси или точки;

События

К фигурам можно подписать события (click, mousedown, touchstart и другие);

Пример

Анимация. Установить анимацию можно несколькими способами:

Через Stage.Animation:
stage.draw = function(diff) {
if (poly.x > innerWidth * 0.88) vel = -1;
if (poly.x < innerWidth * 0.12) vel = 1;
poly.rotate(vel * diff);
poly.x += innerHeight / 150 * vel;
};
var anim = new KeepDraw.Animation(stage);

Демо

Или через Tween:

var tween = new KeepDraw.Tween(poly, {
	age: 40,
	end: 5000,
	attrs: {
      x: innerWidth,
      opacity: 0
	}
});
tween.play();
var anim = new KeepDraw.Animation(stage);

Демо

Заключение

→ Онлайн-редактор рисунков на основе KeepDraw — roundraw.github.io;
Github
→ Домашняя страница — keepdraw.github.io

Автор: wNow

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js