Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/greetclock/skeleton

Рисование математических 2D визуализаций
https://github.com/greetclock/skeleton

Last synced: 4 months ago
JSON representation

Рисование математических 2D визуализаций

Awesome Lists containing this project

README 

          
Сейчас скелетон еще разрабатывается, поэтому я не могу обещать, что интерфейс сохранится в следующих коммитах.

Эта документация **актуальна для версии 0.0.5**. Проверить версию можно так: `Plotter.version`



`Plotter` -- основной объект. Он отвечает за прорисовку графика и всех объектов, которые на нем находятся.

Для создания графика нужно передать в качестве первого аргумента в конструктор `Plotter` id DOM-элемента, где дальше будет отрисовываться график. 

```javascript

var plotter = new Plotter("plot", options);

```



Второй *необязательный* аргумент конструктора `Plotter` `options` -- это объект, в котором можно менять некоторые свойства `Plotter`. Вот они, а также их значения по-умолчанию:

  * **left: -10**, левая граница графика

  * **right: 10**, правая граница графика

  * **bottom: -5**, нижняя граница графика

  * **top: 5**, верхняя граница графика

  * **width: 800**, ширина графика в пикселях

  * **height: 600**, высота графика в пикселях

  * **stroke: "#000000"**, цвет рамки графика



Есть еще несколько других свойств, которые я намеренно не перечисляю. Какие-то из них лучше не трогать, а изменение других может привести к падению программы.



Функции-рисовалки -- главное, что есть у `Plotter`, и основная фишка библиотеки. С помощью них можно много рисовать, но писать мало кода. Пример вызова функции, которая нарисует график sin(x):

```javascript

var func = plotter.addFunc(function (x) {

    return Math.sin(x);

}, options);

```



Существуют методы для добавления закрашенной области, линии, точки и функции. Каждый метод возвращает объект. у которого есть методя для его модификации. Например, `Plotter.addFunc` вернет объект функции, у которого можно будет поменять цвет, границы прорисовки, точность, толщину, точки разрыва и даже саму функцию. 



### Методы Plotter

О конструкторе Plotter я уже рассказал.Теперь я расскажу о том, что делать с объектом, которые возвращает конструктор. У него есть несколько методов:



##### Plotter.addFunc(Function, Object)

Первый аргумент - это функция, которую нужно нарисовать. Второй *необязательный* аргумент - это объект, в котором можно менять некоторые свойства.

*  **accuracy: Plotter.width**, точность прорисовки графика. По-умолчанию равна ширине графика в пикселях. Количество точек, по которым строится график.

*  **strokeWidth: 2**, толщина линии графика

*  **color: 0**, цвет. Нулевой цвет -- это синий.  Если менять это свойство вручную, без вызова метода setColor, то нужно указывать цвет в формате rgb. Первый символ должен быть решеткой, а дальше следуют 6 шестнадцатиричныных цирф: `"#FF0000"` - красный. Лучше не менять это свойство напрямую, а использовать сеттер, так как в нем можно выбрать цвет из заранее заданного набора.

*  **breaks: []**, массив точек разрыва. Когда строится график функции, у которой есть разрывы, то здесь их нужно указать. Например, у графика сигнума точкой разрыва будет 0. Такая же точка разрыва будет у гиперболы и у графика sin(x)/x.

*  **left: null**, левая граница прорисовки. Левее нее график никогда не будет рисоваться. `null` означает, что границы нет.

*  **right: null**, правая граница прорисовки. Правее нее график никогда не будет рисоваться. `null` означает, что границы нет.



##### Методы Func

Вот построена функци и получен объект типа `Func`:

```javascript

var func = plotter.addFunc(function (x) {

    return x;

});

```

Можно, например, поменять цвет:

```javascript

func.setColor(7);   //поменяет цвет на красный.

```

Можно получить цвет:

```javascript

func.getColor();    //"#d62728" -- тот, который был установлен. Цвет всегда возвращается в формате rgb.

```

Можно делать и то, и другое с помощью одного метода:

```javacript

func.Color(9);  //вызов .Color() с аргументом поменяет цвет. Сейчас был установлен фиолетовый.

func.Color();   //вызов .Color() без аргументов просто вернет текущий цвет. Будет возвращен rgb-код фиолетового: "#9467bd".

```



Я показал примеры использования методов Func. Какие вообще методы у него есть? 

* **Func.getAccuracy()**, вернет текущую точность прорисовки

* **Func.setAccuracy(Number)**, установит указанную точность прорисовки. Число должно быть целым.

* **Func.Accuracy(Number)**, если передать *необязательный* аргумент, то установит точность прорисовки. Если не указывать, то вернет текущую точность прорисовки.



---



* **Func.getStrokeWidth()**, вернет текущую толщину линии графика.

* **Func.setStrokeWidth(Number)**, установит указанную толщину.

* **Func.StrokeWidth(Number)**, если передать *необязательный* аргумент, то установит толщину. Если не указывать, то вернет текущую толщину.



---



* **Func.getColor()**, вернет текущий цвет в формате rgb.

* **Func.setColor(Number or String)**, установит указанный цвет. Если передавать строку, то она должна быть в формате rgb, то есть первый символ - решетка, а дальше 6 шестандцатиричных цифр. Если передавать число, то оно может быть от 0 до 20 включительно. 20 соответствует черному цвету. Остальные номера соответсвуют этим цветам: https://github.com/mbostock/d3/wiki/Ordinal-Scales#category20

* **Func.Color(Number or String)**, аргумент необязателен. Если он есть, тобудет установлен указанный цвет, как в `.setColor(Number or String)`. Если его нет, то будет возвращен текущий цвет в формате rgb.



---



* **Func.getColour()**, алиас для `.getColor()`

* **Func.setColour(Number or String)**, алиас для `.setColor(Number or String)`

* **Func.Colour(Number or String)**, алиас для `.Color(Number or String)`



---



* **Func.getBreaks()**, вернет массив точек разрыва. Модификации в этом массиве приведут к изменениям в массиве внутри объекта. Иначе говоря, копия не создается. При необходимости копию можно создать с помощью `var newArr = _.clone(arr);`. В сборку скелетона уже включен lodash 2.4.1, набор утилит для js. Подробнее: https://lodash.com/

* **Func.setBreaks(Array)**, установит указанный массив точек разрыва. Копия при этом создаваться не будет. 

* **Func.Breaks(Array)**, если *необязательный* аргумент указан, то установит новый массив точек разрыва. Если нет, то вернет текущий массив.



---



* **Func.getLeft()**, вернет левую границу прорисовки.

* **Func.setLeft(Number)**, установит левую границу прорисовки.

* **Func.Left(Number)**, если *необязательный* аргумент указан, то установит левую границу прорисовки. Иначе вернет текущую.



---



* **Func.getRight()**, вернет правую границу прорисовки.

* **Func.setRight(Number)**, установит правую границу прорисовки.

* **Func.Right(Number)**, если *необязательный* аргумент указан, то установит правую границу прорисовки. Иначе вернет текущую.



---



* **Func.getFunc()**, вернет текущую функцию.

* **Func.setFunc(Function)**, установит функцию.

* **Func.Func(Function)**, если аргумент указан, то установит функцию. Если нет, то вернет текущую функцию.



---



##### Plotter.addLine(x1, y1, x2, y2, Object)

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



* **strokeWidth: 2**, толщина линии

* **color: 0**



##### Методы Line

* **Line.setX1(x1)**

* **Line.getX1()**

* **Line.X1(x1)**, принимает *необязательный* аргумент. Если он задан, то устанавливает x1. Иначе возвращает текущее значение x1.



---



* **Line.setX2(x2)**

* **Line.getX2()**

* **Line.X2(x2)**, принимает *необязательный* аргумент. Если он задан, то устанавливает x2. Иначе возвращает текущее значение x2.



---



* **Line.setY1(y1)**

* **Line.getY1()**

* **Line.Y1(y1)**, принимает *необязательный* аргумент. Если он задан, то устанавливает y1. Иначе возвращает текущее значение y1.

 

---



* **Line.setY2(y2)**

* **Line.getY2()**

* **Line.Y2(y2)**, принимает *необязательный* аргумент. Если он задан, то устанавливает y2. Иначе возвращает текущее значение y2.



---



* **Line.getColor()**, вернет текущий цвет в формате rgb.

* **Line.setColor(Number or String)**, установит указанный цвет. Если передавать строку, то она должна быть в формате rgb, то есть первый символ - решетка, а дальше 6 шестандцатиричных цифр. Если передавать число, то оно может быть от 0 до 20 включительно. 20 соответствует черному цвету. Остальные номера соответсвуют этим цветам: https://github.com/mbostock/d3/wiki/Ordinal-Scales#category20

* **Line.Color(Number or String)**, аргумент необязателен. Если он есть, тобудет установлен указанный цвет, как в `.setColor(Number or String)`. Если его нет, то будет возвращен текущий цвет в формате rgb.



---



* **Line.getColour()**, алиас для `.getColor()`

* **Line.setColour(Number or String)**, алиас для `.setColor(Number or String)`

* **Line.Colour(Number or String)**, алиас для `.Color(Number or String)`



---



##### Plotter.addArea(Array, Object)

Строит произвльную закрашенную область на графике. Для построения нужно передать в качестве первого аргумента массив точек. Каждая точка - это объект, у которого есть два поля: x и y.

```javascript

    var arr = [];

    arr.push({

        x: 0,

        y: 0

    });

    arr.push({

        x: 1,

        y: 0

    });

    arr.push({

        x: 0.5,

        y: 1

    });

    var area = Plotter.addArea(arr);

```



Второй *необязательный* аргумент `.addLine` - объект с опциями. Можно менять следующие свойства:

  * **color: 20**, цвет границы области. По-умолчанию черный.

  * **fillOpacity: 0.2**, прозрачность закраски области. Может меняться от 0 до 1, где 1 - непрозрачная, а 0 - полностью прозрачная, невидимая.

  * **strokeWidth: 0**, толщина границы области. По-молчанию толщина нулевая, то есть граница невидимая

  * **fill: 1**, цвет закраски области.

  

##### Методы Area

* **Area.getColor()**, вернет текущий цвет в формате rgb.

* **Area.setColor(Number or String)**, установит указанный цвет. Если передавать строку, то она должна быть в формате rgb, то есть первый символ - решетка, а дальше 6 шестандцатиричных цифр. Если передавать число, то оно может быть от 0 до 20 включительно. 20 соответствует черному цвету. Остальные номера соответсвуют этим цветам: https://github.com/mbostock/d3/wiki/Ordinal-Scales#category20

* **Area.Color(Number or String)**, аргумент необязателен. Если он есть, тобудет установлен указанный цвет, как в `.setColor(Number or String)`. Если его нет, то будет возвращен текущий цвет в формате rgb.



---



* **Area.getColour()**, алиас для `.getColor()`

* **Area.setColour(Number or String)**, алиас для `.setColor(Number or String)`

* **Area.Colour(Number or String)**, алиас для `.Color(Number or String)`

 

---



* **Area.setFill(Number or String)**, устанавливает цвет заливки области. Работает также, как и `.setColor`

* **Area.getFill()**, возвращает цвет заливки области

* **Area.Fill(String or Number)**, принимает *необязательный* аргумент. Если он есть, то устанавливает указанный цвет, иначе возвращает текущий цвет.



---



* **Area.setFillOpacity(Number)**, принимает число от 0 до 1 и устанавливает указанную прозрачность заливки.

* **Area.getFillOpacity()**, возвращает текущую прозрачность заливки.

* **Area.FillOpacity(Number)**, принимает *необязательный* аргумент. Если он есть, то устанваливает указанную прозрачность, иначе возвращает текущую.

 

---



* **Area.getStrokeWidth()**, вернет текущую толщину границы области.

* **Area.setStrokeWidth(Number)**, установит указанную толщину.

* **Area.StrokeWidth(Number)**, если передать *необязательный* аргумент, то установит толщину. Если не указывать, то вернет текущую толщину.



---



##### Plotter.addPoint(x, y, Object)

Рисует точку по указанным координатам. Третьеим *необязательным* аргументом можно передать некоторые свойства:

*  **movable: false**, можно ли точку перетаскивать мышкой. По-умолчанию нельзя.

*  **color: 6**

*  **size: 3**, размер точки



##### Методы Point

* **Point.setSize(size)**, меняет размер точки. Можно передать либо неотрицательное число, либо одну из четырех строк: "large", "medium", "small", "tiny".

* **Point.getSize()**, возвращает текущий размер

* **Point.Size(size)**, принимает *необязательный* аргумент. Если он есть, то устанавливает размер, иначе возвращает текущий размер.



---



* **Point.getX()**

* **Point.setX(x)**

* **Point.X(x)**, аргумент необязательный.



---



* **Point.getY()**

* **Point.setY(y)**

* **Point.Y(y)**, аргумент необязательный.



---



* **Point.getColor()**, вернет текущий цвет в формате rgb.

* **Point.setColor(Number or String)**, установит указанный цвет. Если передавать строку, то она должна быть в формате rgb, то есть первый символ - решетка, а дальше 6 шестандцатиричных цифр. Если передавать число, то оно может быть от 0 до 20 включительно. 20 соответствует черному цвету. Остальные номера соответсвуют этим цветам: https://github.com/mbostock/d3/wiki/Ordinal-Scales#category20

* **Point.Color(Number or String)**, аргумент необязателен. Если он есть, тобудет установлен указанный цвет, как в `.setColor(Number or String)`. Если его нет, то будет возвращен текущий цвет в формате rgb.



---



* **Point.getColour()**, алиас для `.getColor()`

* **Point.setColour(Number or String)**, алиас для `.setColor(Number or String)`

* **Point.Colour(Number or String)**, алиас для `.Color(Number or String)`

 

---



##### Остальные методы Plotter

Помимо рисования объектов, Plotter еще отвечает за учет всех созданных объектов. Если нужно удалить какой-нибудь, то нужно вызвать метод `.remove`:



```javascript

    var point = plotter.addPoint(1, 1);

    plotter.remove(point);

```



В некоторых случаях может помочь вызов методов `Plotter.draw()` или, что то же самое, `Plotter.redraw()`. В текущей версии их использовать не нужно.

Также можно узнать id элемента, к которому привязан график: `Plotter.getID()`



# PlotContainer, несколько графиков на одной странице

Как и Plotter, PlotContainer является глобальным объектом. Он служит для того, чтобы DOM-элемент с указанным ID работал в качестве контейнера для других DOM-элементов, которые, в свою очередь могут содержать либо графики, либо произвольный

html-код.



Проще говорить, что PlotContainer - это контейнер, который хранит в себе несколько Plotter'ов.



`Plotter PlotContainer.addPlot(options)` добавляет в DOM-контейнер график и возвращает его. Возвращает то же самое, что и конструктор Plotter. Опции те же самые, что и у Plotter.



`DOM_ID PlotContainer.addEmptyDiv()` создает в контейнере пустой 
 и возвращает его ID. Можно использовать, например, для дальнейшей работы с Controls.



Инициализация контейнера и создание графика в нем:



```javascript

    var container = new PlotContainer("plot");



    var plotter = container.addPlot();

```



Второй график можно создать также, как и первый:



```javascript

    var plotter2 = container.addPlot();

```



Кроме того, в метод можно передавать опции, как это делает с конструктором Plotter:

```javascript

 var plotter3 = container.addPlot({

   width: 400,

   height: 400

  });

 ```



#Примеры

Их можно посмотреть в папке scripts. В index.html можно менять имя подключаемого файла, чтобы смотреть разные примеры.