svg.point.js v0.1.0
svg.point.js
This is a plugin for the svg.js library that add methods to SVG.Point
.
Installation
npm install --save svg.point.js
Usage
How to include
In Html
Include this plugin after including svg.js in your html document.
CommonJs
You can just require this plugin, it will take care of requiring svg.js,
perform the necessary modification and return you the modified SVG
object.
var SVG = require('svg.point.js')
Or, you can require this plugin after having required svg.js.
var SVG = require('svg.js')
require('svg.point.js')
If you are using npm3, the two require in the code above would return a reference to the same object since npm3 install secondary dependencies in a flat way. That would not be the case if you are using npm2 since it installs all dependencies in a nested way.
// If using npm3
var SVG1 = require('svg.js')
var SVG2 = require('svg.point.js')
SVG1 === SVG2 // true
SVG1.Point.prototype.add != null // true
// If using npm2
var SVG1 = require('svg.js')
var SVG2 = require('svg.point.js')
SVG1 === SVG2 // false
SVG1.Point.prototype.add != null // false
Long story short, to avoid issues you should use npm3 if you plan to use this plugin with a CommonJs module bundler.
Creating a point
The SVG.Point
constructor of svg.js allow passing the x and y coordinates
that make up a point using any of the following ways.
As parameters
When 2 parameters are passed, the first one is used as the x coordinates and the other one as the y coordinate.
var point = new SVG.Point(3, 4)
point.x // 3
point.y // 4
When only one parameter is used and that parameter is not an object or an array, it is used as the value for both the x and y coordinates.
var point = new SVG.Point(7)
point.x // 7
point.y // 7
When no parameter are passed to the constructor, the x and y coordinates default to 0.
var point = new SVG.Point()
point.x // 0
point.y // 0
As an object
Any object that have an x and y attribute can be used to create a new SVG.Point
.
var point = new SVG.Point({x:1, y:2})
point.x // 1
point.y // 2
point = new SVG.Point(new SVG.Point(3, 4))
point.x // 3
point.y // 4
As an array
Any array of at least two values can be used to specify the x and y coordinates. The first value of the array represent the x coordinate while the second value represent the y coordinate.
var point = new SVG.Point([5, 6])
point.x // 5
point.y // 6
Methods added by this plugin
Here are the methods added to SVG.Point
by this plugin. Note that for any of
those methods that require a point you can pass the x and y coordinates the
same ways as for the SVG.Point
constructor.
plus()
Create a new SVG.Point
from the addition of the x and y coordinates of this
point to the x and y coordinates of the passed point.
var point1 = new SVG.Point(7, 12)
var point2 = new SVG.Point(3, 8)
var point3 = point1.add(point2)
point3.x // 10
point3.y // 20
Also, since a point can be passed by passing a single number that represent both the x and y coordinates, you can perform an addition with a constant too.
var point1 = new SVG.Point(2, 25)
var constant = 4
var point2 = point1.add(constant)
point2.x // 6
point2.y // 29
returns
: SVG.Point
minus()
Create a new SVG.Point
from the soustraction of the x and y coordinates of
this point to the x and y coordinates of the passed point.
var point1 = new SVG.Point(5, 12)
var point2 = point1.minus(6, 8)
point2.x // -1
point2.y // 4
Also, since a point can be passed by passing a single number that represent both the x and y coordinates, you can perform a soustraction with a constant too.
var point1 = new SVG.Point(2, 25)
var constant = 4
var point2 = point1.minus(constant)
point2.x // -2
point2.y // 21
returns
: SVG.Point
times()
Create a new SVG.Point
from the multiplication of the x and y coordinates of
this point to the x and y coordinates of the passed point.
var point1 = new SVG.Point(5, 12)
var point2 = point1.times([6, 10])
point2.x // 30
point2.y // 120
Also, since a point can be passed by passing a single number that represent both the x and y coordinates, you can perform a multiplication with a constant too.
var point1 = new SVG.Point(2, 25)
var constant = 5
var point2 = point1.times(constant)
point2.x // 10
point2.y // 125
returns
: SVG.Point
divide()
Create a new SVG.Point
from the division of the x and y coordinates of this
point to the x and y coordinates of the passed point.
var point1 = new SVG.Point(30, 49)
var point2 = new SVG.Point(5, 7)
var point3 = point1.divide(point2)
point3.x // 6
point3.y // 7
Also, since a point can be passed by passing a single number that represent both the x and y coordinates, you can perform a division with a constant too.
var point1 = new SVG.Point(18, 16)
var constant = 2
var point2 = point1.divide(constant)
point2.x // 9
point2.y // 8
returns
: SVG.Point
equal()
Return true
if the passed point is equal to this point, false
otherwise.
var point1 = new SVG.Point(3, 7)
point1.equal(3, 7) // true
point1.equal(9, 7) // false
returns
: boolean
toArray()
Return the x and y coordinates in an array of two values where the first value is x and the second value is y.
var point = new SVG.Point(13, 21)
point.toArray() // [13, 21]
returns
: array
norm()
Calculate the Euclidean norm (i.e., sqrt(x^2 + y^2)).
var point = new SVG.Point([14, 26])
point.norm() // 29.5296461204668
returns
: number
distance()
Return the distance between this point and the passed point.
var point1 = new SVG.Point(14, 22)
var point2 = new SVG.Point(30, 17)
point1.distance(point2) // 16.76305461424021
returns
: number
Dependencies
svg.js >= v2.3.6
License
svg.point.js is licensed under the MIT License.
7 years ago