10CanvasProtoHomework.md 2.9 KB
Canvas OOP Proto ДЗ
Пояснения.
Предполагается что вы разберетесь с http://canvas.asmer.fe.a-level.com.ua, и будете наращивать функционал по мотивам. При создании любого визуального элемента вы должны запускать конструктор и перерисовывать всё, что есть в instances.
OOP
Переведите рисовалку на ООП рельсы
Tail
используйте событие mousemove и поле event.buttons, для того что бы рисовать пока нажата кнопка мыши.
Size
Добавьте возможность изменять размер кружков и линий (толщина). input type='number' в помощь
Color
Добавьте возможность изменять цвет кружков. input type='color' в помощь
Rectangle
Добавьте наследник Rectangle, который будет отрисовывать прямоугольники.
Line
Добавьте наследник Line, который будет отрисовывать линию.
LineDrag
Пусть полупрозрачная линия появляется на лету, пока зажата кнопка мыши. Когда же вы отпускаете, линия должна создаваться.
RectangleDrag
Сделайте тоже самое с прямоугольником - при создании прямоугольника вы тянете "тень" прямоугольника, а потом он создается.
Undo
Предусмотрите возможность отмены последних действий
Select
Предусмотрите возможность "выбора объекта" с помощью клика рядом с объектом при зажатой клавише Ctrl. Используйте массив selected в прототипе Drawable для хранения списка текущих выбранных объектов.
Визуально выделите выбранные объекты.
ChangeSelected
При изменении цвета или размера меняйте эти свойства у всех выделенных элементах. Сделайте функцию forSelected по аналогии с forAll, которая будет перебирать все выбранные элементы и вызывать callback для изменения того или иного параметра.
DeleteSelected
Сделайте возможность удаления элементов. Для этого нужно удалить элементы из массива Drawable.prototype.instances