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, {
	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
Поделиться публикацией

Комментарии 19

    +1
    Отличительные черты

    Отличительные отчего?
    Просто таких решений огромное количество, чем эта лучше?

      0
      Ни в одной из других библиотек я не нашел подходящие функции для поиска пересечений фигур.
        0

        Эээ, а это что:


          0
          Насчет FabricJS и KinectJS я не знаю, но в остальных я не смог найти точки пересечения двух фигур. А также эти библиотеки в несколько раз больше весят, чем KeepDraw.
            0

            В следующий раз набирайте в поисковике "CanvasLibName intersection", а не пишите ещё одну библиотеку, да ещё и без тестов.

      +6
      Это не framework, а библиотека.
        0
        Как на счет изменения масштаба, смещения (сдвиг) и, возможно, поворота холста?
        В онлайн редакторе не помешали бы всплывающие названия контролов, когда курсор над ними.
          +1
          Сделаю, когда будет время.
          +3
          Посмотрел демки, посмотрел исходники. Нарисовал вам 4 issue в github. Одно спасибо, что учли 0.5px для отключения anti-aliasing'а, но хардкодить это в коде для всех ИМХО не очень, не всем нужна эта фича, хотелось бы это отключаемой опцией. Есть translate(0.5,0.5), хотя мне он не нравится.
          Как-то непоследовательно подошли с ">> 0". В некоторых случаях он есть, в некоторых нету
          Пример
          arg.stage.ctx.lineTo(seg[0][0] + 0.5, seg[0][1] + 0.5);
          ...
          arg.stage.ctx.quadraticCurveTo((seg[i-1][2] + 0.5) >> 0, (seg[i-1][3] + 0.5) >> 0, seg[i][0], (seg[i][1] + 0.5) >> 0);
          

          Хотелось бы услышать обоснование такого решения
          Также в скомпилированном виде https://keepdraw.github.io/KeepDraw.js я вижу странные отступы. Кодогенерация? Если да, то хотелось бы увидеть 0.5px как опцию. Не в приоритете, я все-равно буду делать свой велосипед. BTW. Кодогенератора в репозитории не увидел, надеюсь, что он есть, т.к. если всё это делалось ручками, то у многих возникнут замечания к стилю кодирования
          Пример вырвиглазного отступа
          
                  draw: function(arg) {
          var crush = !1;
                      if (arg.fill) {
                      arg.ctx.fillStyle = arg.fill.grd || arg.fill;
                      arg.ctx.fillRect(0, 0, arg.width, arg.height);
                      }
                      else arg.ctx.clearRect(0, 0, arg.width, arg.height);
                    for (var i = 0; i < arg.childs.length; i++) {
                      if (arg.childs[i]) arg.childs[i].draw(arg.childs[i]);
          		else crush = !0;
                    }
          

          Выравниватель пробелов для кодогенерации от КО
          make_tab = function(target, spacer) {
            return target.replace(/\n/g, "\n" + spacer);
          };
          

            0
            Хорошо, учту ваши замечания. Кодогенерации действительно нет, пользовался JSfiddle.
            0
            del
              0
              прямоугольник (Rect), правильный многоугольник (Polygon)

              Вообще нигде не нашел ни документации, ни примеров использования.
                0
                Добавлю в ближайшее время.
              0

              А tween-анимаций poly-to-poly нет?

                0
                Нет, такая анимация не предусмотрена.
                +1
                Если потянуть за верхние углы прямоугольника — он развалится
                  0
                  Можете прислать скрин, или описать подробнее, чтобы мне исправить баг?
                    0
                    Понял, исправлено.
                      0
                      я сам пишу большой редактор изображений на основе fabricjs. Посмотрите эту библиотеку. Хотя бы ради идей. А уж реализуете сами

                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                  Самое читаемое