/excessor

secretTechnology

Primary LanguageJavaScript

Excessor - canvas library

Создаём холст

var myDrawing = new Drawing(width,height);

Добавляем DOM елемент холста в документ

document.body.appendChild(myDrawing.DOMObject);

Для того чтобы нарисовать кружок создаём экземпляр класса круга (Circle)

var circle = new Circle({
    // необязательное поле, но для удобства дальнейшей работы следует указать
    id      : "my wonderfull circle",
    // объект холста на котором необходимо отрисовать круг
    drawing : myDrawing,
    // объект свойств для отрисовки
    settings: {
        radius  : 40,
        fill    : "#000000"
    }
})

Хорошо, круг создали, теперь запустим рендеринг холста и отрисуем наш кружок

// запусаем рендер
myDrawing.fps = 30;

// этот метод добавляет наш круг к списку объектов, которые будет отрисовывать холст
circle.start();

Список методов класса Drawing

name arguments
render() canvasObject, id
pause() none
play() none

Список свойств класса Drawing

name type
DOMObject DOM canvas object
context canvas 2d context
stack listObject
fps number

Основы

new CanvasObject(options)

Базовый графический класс.
Может использоваться как родительский объект, в этом случае наследники корректируют свои координаты относительно родителей по цепочке до корневого объекта.

Так же является основой для создания других графических классов.

По сути это - всего лишь управляющая прослойка, со всеми необходимыми методами для работы с параметрами объекта.

Список параметров объекта options

name type
id random number from 0 to 1
settings object (настройки для отрисовки)
x number
y number
radian number
drawing Drawing Object

Список параметров объекта settings

name type used classes
fill HEX or RGB all
stroke HEX or RGB all
lineWidth number all
x number all
y number all
radian number all
radius number Circle, Polygon
sidesCount number Polygon
points object Curve, Line
shift number from 0 to 100 Curve, Line, Circle
step number from 0 to 1 Curve, Ellipse
semiAxisX number Ellipse
semiAxisY number Ellipse

Список свойств и методов класса CanvasObject

*methods*

Более подробное описание методов для анимации будет далее.

name arguments
start()
stop()
transform(transform) Transform Object
move(coord,time) numeric array ([x,y]), number (1000)
moveProperty(property,value,time) string ('fill'), void ('#ff0000'), number (1000)
append(object) CanvasObject (идентично методу childrens.append() см. ниже)
*properties*

Свойствами объекта CanvasObject являются свойства перечисленные выше для массива options который передаётся в качестве аргумента конструктору объекта. Помимо этого CanvasObject имеет свойство childrens для работы с дочерними элементами:

name description
childrens
childrens.list список объектов
childrens.append(CanvasObject) добавление дочернего элемента (идентично методу append() см. выше)
childrens.remove(id) удаление, необходим идентификатор

Множественные объекты

new Cluster( count, correlation )

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

Пример использования:

//создание объекта circle см. выше

var cluster = new Cluster(150,{x : 15});
circle.append(cluster);

//else example

var cluster = new Cluster(100,{
    x : function(iteration,cluster){
        return formula.getPointOnCircle(
                (Math.PI*2/(cluster.count + 1)) * (iteration + 1),
                externalRadius,
                -cluster.parent.now.x,
                -cluster.parent.now.y
            )[0] / iteration
    },
    y : function(iteration,cluster){
        return formula.getPointOnCircle(
                (Math.PI*2/(cluster.count + 1)) * (iteration + 1),
                externalRadius,
                -cluster.parent.now.x,
                -cluster.parent.now.y
            )[1] / iteration
    }
});
circle.append(cluster);

Анимации

new Transform( options )

Конструктор анимаций, формируется такими методами как .move() .moveProperty() где большинство параметров формируются автоматически. После использования данные методы возвращают графический объект на котором была применена анимация. Последняя использованая анимация находится в свойстве .operationContext графического объекта.

Пример использования:

//создание объекта circle см. выше
//----------
circle.moveProperty('radius',50,1000); //move radius; 40px -> 50px; time 1s
var transform = circle.operationContext;
//or
var transform = circle.moveProperty('radius',50,1000).operationContext;
//----------

transform.event(50,function(event,transform,circle){ //complete 50% of animate
    transform.pause();
    circle
        .move([80,120],1500) //move coordinate to x=80px y=120px
        .moveProperty('fill','#ff0000',1200);
    //...
    //something operations
    //...
});

Список методов класса Transform

name arguments
stop() none
pause() none
play() none
repeat() none
event() state of animate, function

Список свойств класса Transform

name type
options object
id string
events listObject
reverse boolean

Список свойств объекта Transform.options

name type
endShift number
startShift number
start number
end number
time number
recourse boolean

Линии

new Line(options)

Класс графического объекта "линия"

Позволяет отрисовать прямую линию из одной точки к другой.

var line = new Line({
    points: [ [x1,y1], [x2,y2] ],
    settings: {
        //...
        shift: 100 // defaul value = 100
        stroke: '#000000'
        //...
    }
})

new Curve(options)

Класс графического объекта "кривая"

Строит кривую безье по набору точек, первая и последняя точки - опорные.

var curve = new Curve({
    points: [ [x1,y1], [x2,y2], [x3,y3] ],
    settings: {
        //...
        stroke: '#000000'
        //...
    }
})

new Spline(options)

Класс графического объекта "сплайн"

Строит сплайн безье по набору точек. Кроме крайних точек, как в кривой, опорными так же являются точки, которые имеют третий параметр true.

var spline = new Spline({
    points: [ [x1,y1], [x2,y2], [x3,y3,true], [x4,y4], [x5,y5] ],
    settings: {
        //...
        stroke: '#000000'
        //...
    }
})

new Path(options)

Класс графического объекта "путь"

Кроме постоения сплайнов позволяет рисовать окружности и эллипсы. Полученная дуга за начальную точку для отрисовки берёт предыдущую точку списка или начало координат объекта. Конец дуги - опорная точка, которая будет взята для построения следующих кривых или дуг.

var path = new Path({
    points: [ [radiusX,radiusY,startRadian,endRadian,tilt], ...points... ],
    settings: {
        //...
        stroke: '#000000'
        //...
    }
})