SVG

SVG

> Written with [StackEdit](https://stackedit.io/).
## Elements
### Path

#### Create a Path
There are three ways to create a path. You could send a path string when creating it
```javascript
var path = draw.path('M10,20L30,40');
```
or set the path attribute
```javascript
var path = draw.path();
path.attr({d:'M10,20L30,40'});
```
or you may use `plot()` method as below

> **Note:** For more details on Path data strings, please refer to [the SVG documentation][1]

----------

#### Plot a Path
`plot()` method has two arguments:

 - `data` this param accept `string` or `array` type.
 - `reset` this optional `booleam` param allow you to replace whole path.

```javascript
var strD = 'M10,10L20,20';
var path = draw.path();
path.plot(strD);

// Sending a array will work, too.
var arrD = [[30,30],[40,40]];
path.plot(arrD, true);              // When assign reset param to be true, the original path will be replaced.
```
> 傳入二維陣列尚未實作完成

`plot()` function can also act as a getter if you send no param to it.
```javascript
var strD = path.plot();
console.log(strD)                   // M30,30L40,40
```

----------

#### Dataset of Path
Every path has an `arrDataPoint` property ( type is `array` ) to store the sequence of path command and coordinates.
```javascript
var path = draw.path('M10,20L30,40');
console.log(path.arrDataPoint)          // [['M',10,20],['L',30,40]]
```
`arrDataPoint` has a format in [ [ 'M',x,y ] , [ ... ] ]

> **Note:**
> 
> 第二個和第三個值永遠記錄x, y

---

#### Store the Point Information to Dataset
Path has a `parsePath()` method to manage the dataset of points. But it is assumed to be a private method called by `plot()`. The argument accepts two kinds of type, which are `array` and `string`, sent by `plot()`.

The main purpose of `parsePath()` is:

 - parse the `array` argument into the format of Path string
 - parse the Path `string` into a sequence of point in `arrDataPoint`
 
All the Path command stored in `arrDataPoint` is assumed to be uppercase, for the reason of calculating vectors.

---

#### Math methods in Path

`intersection()` is based on the formulas as below:

$$
(y-y_{1})=(x-x_{1})(\frac{y_{2}-y_{1}}{x_{2}-x_{1}})
$$

$$
(y-y_{3})=(x-x_{3})(\frac{y_{4}-y_{3}}{x_{4}-x_{3}})
$$


`segmentLength()`
`midPoint()`

`interpolatedPoint()`
`perpendicularLine()`
`offsetLine()`


 


  [1]: http://www.w3.org/TR/SVG/paths.html#PathData