KeepDraw.js — javascript framework для малювання на canvas

Всім привіт. У цій статті мова піде про бібліотеку для малювання на 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, {
вік: 40,
end: 5000,
attrs: {
x: innerWidth,
opacity: 0
}
});
tween.play();
var anim = new KeepDraw.Animation(stage);

Демо

Висновок
→ Онлайн-редактор зображень на основі KeepDraw — roundraw.github.io;
Github
→ Домашня сторінка — keepdraw.github.io
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.