Element.add()⚓➭
See Element.append.
-Parameters +
Element.after(el)⚓➭
Inserts given element after the current one.
-- el -
- Element -
- element to insert -
Parameters
- el +Element +element to insert +
Returns: Element parent
-Animate given attributes of the element. +
Element.animate(attrs, ms, [easing], [callback])⚓➭
Animate given attributes of the element.
-Parameters -
-- attrs -
- object -
- key-value pairs of destination attributes -
- ms -
- number -
- duration -
- easing -
- optional -
- function -
- easing function from mina or custom -
- callback -
- optional -
- function -
- -
Parameters
- attrs +object +key-value pairs of destination attributes +
- ms +number +duration +
- easing +optional +function +easing function from mina or custom +
- callback +optional +function + +
Returns: Element the element
-Appends given element to current one. +
Element.append(el)⚓➭
Appends given element to current one.
-Parameters -
-- el -
- Element Set -
- element to append -
Parameters
- el +Element Set +element to append +
Returns: Element parent
-Return given attribute of the element as a px value. (Not %, em, etc)
+
Element.asPX(attr, [value])⚓➭
Return given attribute of the element as a px value. (Not %, em, etc)
Parameters -
-- attr -
- string -
- attribute name -
- value -
- optional -
- string -
- attribute value -
Parameters
- attr +string +attribute name +
- value +optional +string +attribute value +
Returns: Element result of query selection
-Gets or sets given attributes of the element +
Element.attr(…)⚓➭
Gets or sets given attributes of the element
-Parameters -
-- params -
- object -
- key-value pairs of attributes you want to set -
Parameters
- params +object +key-value pairs of attributes you want to set +
or
-- param -
- string -
- name of the attribute -
Parameters
- param +string +name of the attribute +
Returns: Element
or
Returns: string value of attribute
-Usage -
-el.attr({
- fill: "#fc0",
- stroke: "#000",
- strokeWidth: 2, // CamelCase...
- "fill-opacity": 0.5 // or dash-separated names
+Usage
el.attr({
+ fill: "#fc0",
+ stroke: "#000",
+ strokeWidth: 2, // CamelCase...
+ "fill-opacity": 0.5 // or dash-separated names
});
-console.log(el.attr("fill")); // “#fc0”
-
-Inserts given element before the current one. +console.log(el.attr("fill")); // “#fc0” + +
Element.before(el)⚓➭
Inserts given element before the current one.
-Parameters -
-- el -
- Element -
- element to insert -
Parameters
- el +Element +element to insert +
Returns: Element parent
-Adds event handler for click for the element. +
Element.click(handler)⚓➭
Adds event handler for click for the element.
-Parameters -
-- handler -
- function -
- handler for the event -
Parameters
- handler +function +handler for the event +
Returns: object Element
-Creates <use> element linked to the current element.
+
Element.clone()⚓➭
Creates <use> element linked to the current element.
Returns: Element <use> element
Adds or retrieves given value asociated with given key. +
Element.data(key, [value])⚓➭
Adds or retrieves given value asociated with given key. See also Element.removeData
-Parameters -
-- key -
- string -
- key to store data -
- value -
- optional -
- any -
- value to store -
Parameters
- key +string +key to store data +
- value +optional +any +value to store +
Returns: object Element
or, if value is not specified:
Returns: any value
-Usage -
-for (var i = 0, i < 5, i++) {
- paper.circle(10 + 15 * i, 10, 10)
- .attr({fill: "#000"})
- .data("i", i)
- .click(function () {
- alert(this.data("i"));
+Usage
for (var i = 0, i < 5, i++) {
+ paper.circle(10 + 15 * i, 10, 10)
+ .attr({fill: "#000"})
+ .data("i", i)
+ .click(function () {
+ alert(this.data("i"));
});
}
-
-Adds event handler for double click for the element. + +
Element.dblclick(handler)⚓➭
Adds event handler for double click for the element.
-Parameters -
-- handler -
- function -
- handler for the event -
Parameters
- handler +function +handler for the event +
Returns: object Element
-Adds event handlers for drag of the element. +
Element.drag(onmove, onstart, onend, [mcontext], [scontext], [econtext])⚓➭
Adds event handlers for drag of the element.
-Parameters -
-- onmove -
- function -
- handler for moving -
- onstart -
- function -
- handler for drag start -
- onend -
- function -
- handler for drag end -
- mcontext -
- optional -
- object -
- context for moving handler -
- scontext -
- optional -
- object -
- context for drag start handler -
- econtext -
- optional -
- object -
- context for drag end handler -
Parameters
- onmove +function +handler for moving +
- onstart +function +handler for drag start +
- onend +function +handler for drag end +
- mcontext +optional +object +context for moving handler +
- scontext +optional +object +context for drag start handler +
- econtext +optional +object +context for drag end handler +
Additionaly following drag events will be triggered: drag.start.<id> on start,
drag.end.<id> on end and drag.move.<id> on every move. When element will be dragged over another element
drag.over.<id> will be fired as well.
@@ -201,8 +207,8 @@ See also Element.removeData
- eventobjectDOM event object
Returns: object Element
-Returns bounding box descriptor for the given element. +
Element.getBBox()⚓➭
Returns bounding box descriptor for the given element.
Returns: object bounding box descriptor:
- {
- cx:numberx of the center, @@ -221,60 +227,54 @@ See also Element.removeData
- y2:numbery of the right side,
- y:numbery of the left side
- }
Return coordinates of the point located at the given length on the given path. Only works for element of “path” type. +
Element.getPointAtLength(length)⚓➭
Return coordinates of the point located at the given length on the given path. Only works for element of “path” type.
-Parameters -
-- length -
- number -
- -
Parameters
- length +number + +
Returns: object representation of the point:
- {
- x:numberx coordinate
- y:numbery coordinate
- alpha:numberangle of derivative
- }
Return subpath of a given element from given length to given length. Only works for element of “path” type. +
Element.getSubpath(from, to)⚓➭
Return subpath of a given element from given length to given length. Only works for element of “path” type.
-Parameters -
-- from -
- number -
- position of the start of the segment -
- to -
- number -
- position of the end of the segment -
Parameters
- from +number +position of the start of the segment +
- to +number +position of the end of the segment +
Returns: string pathstring for the segment
-Returns length of the path in pixels. Only works for element of “path” type. +
Element.getTotalLength()⚓➭
Returns length of the path in pixels. Only works for element of “path” type.
Returns: number length.
-Adds event handlers for hover for the element. +
Element.hover(f_in, f_out, [icontext], [ocontext])⚓➭
Adds event handlers for hover for the element.
-Parameters -
-- f_in -
- function -
- handler for hover in -
- f_out -
- function -
- handler for hover out -
- icontext -
- optional -
- object -
- context for hover in handler -
- ocontext -
- optional -
- object -
- context for hover out handler -
Parameters
- f_in +function +handler for hover in +
- f_out +function +handler for hover out +
- icontext +optional +object +context for hover in handler +
- ocontext +optional +object +context for hover out handler +
Returns: object Element
-Returns an array of animations element currently in +
Element.inAnim()⚓➭
Returns an array of animations element currently in
Returns: object in format
- {
- animobjectanimation object, @@ -282,243 +282,209 @@ See also Element.removeData
- statusfunctiongets or sets the status of the animation,
- stopfunctionstops the animation
- }
Inserts the element after the given one. +
Element.insertAfter(el)⚓➭
Inserts the element after the given one.
-Parameters -
-- el -
- Element -
- element next to whom insert to -
Parameters
- el +Element +element next to whom insert to +
Returns: Element parent
-Inserts the element after the given one. +
Element.insertBefore(el)⚓➭
Inserts the element after the given one.
-Parameters -
-- el -
- Element -
- element next to whom insert to -
Parameters
- el +Element +element next to whom insert to +
Returns: Element parent
-Creates <marker> element from the current element.
+
Element.marker(x, y, width, height, refX, refY)⚓➭
Creates <marker> element from the current element.
+To create a marker you have to specify the bounding rect and reference point:
Parameters -
To create a marker you have to specify the bounding rect and reference point: -
-- x -
- number -
- -
- y -
- number -
- -
- width -
- number -
- -
- height -
- number -
- -
- refX -
- number -
- -
- refY -
- number -
- -
Parameters
- x +number + +
- y +number + +
- width +number + +
- height +number + +
- refX +number + +
- refY +number + +
Returns: Element <marker> element
You can use pattern later on as an argument for marker-start or marker-end attributes.
Adds event handler for mousedown for the element. +
Element.mousedown(handler)⚓➭
Adds event handler for mousedown for the element.
-Parameters -
-- handler -
- function -
- handler for the event -
Parameters
- handler +function +handler for the event +
Returns: object Element
-Adds event handler for mousemove for the element. +
Element.mousemove(handler)⚓➭
Adds event handler for mousemove for the element.
-Parameters -
-- handler -
- function -
- handler for the event -
Parameters
- handler +function +handler for the event +
Returns: object Element
-Adds event handler for mouseout for the element. +
Element.mouseout(handler)⚓➭
Adds event handler for mouseout for the element.
-Parameters -
-- handler -
- function -
- handler for the event -
Parameters
- handler +function +handler for the event +
Returns: object Element
-Adds event handler for mouseover for the element. +
Element.mouseover(handler)⚓➭
Adds event handler for mouseover for the element.
-Parameters -
-- handler -
- function -
- handler for the event -
Parameters
- handler +function +handler for the event +
Returns: object Element
-Adds event handler for mouseup for the element. +
Element.mouseup(handler)⚓➭
Adds event handler for mouseup for the element.
-Parameters -
-- handler -
- function -
- handler for the event -
Parameters
- handler +function +handler for the event +
Returns: object Element
-Shortcut for assigning event handler for drag.over.<id> event, where id is id of the element (see Element.id).
+
Element.onDragOver(f)⚓➭
Shortcut for assigning event handler for drag.over.<id> event, where id is id of the element (see Element.id).
Parameters -
-- f -
- function -
- handler for event, first argument would be the element you are dragging over -
Returns parent of the element +
Parameters
- f +function +handler for event, first argument would be the element you are dragging over +
Element.parent()⚓➭
Returns parent of the element
Returns: Element parent
-Creates <pattern> element from the current element.
+
Element.pattern(x, y, width, height)⚓➭
Creates <pattern> element from the current element.
+To create a pattern you have to specify the pattern rect:
Parameters -
To create a pattern you have to specify the pattern rect: -
-- x -
- string number -
- -
- y -
- string number -
- -
- width -
- string number -
- -
- height -
- string number -
- -
Parameters
- x +string number + +
- y +string number + +
- width +string number + +
- height +string number + +
Returns: Element <pattern> element
You can use pattern later on as an argument for fill attribute:
var p = paper.path("M10-5-10,15M15,0,0,15M0-5-20,15").attr({
- fill: "none",
- stroke: "#bada55",
- strokeWidth: 5
- }).pattern(0, 0, 10, 10),
- c = paper.circle(200, 200, 100);
+var p = paper.path("M10-5-10,15M15,0,0,15M0-5-20,15").attr({
+ fill: "none",
+ stroke: "#bada55",
+ strokeWidth: 5
+ }).pattern(0, 0, 10, 10),
+ c = paper.circle(200, 200, 100);
c.attr({
fill: p
});
-
-Prepends given element to current one. + +
Element.prepend(el)⚓➭
Prepends given element to current one.
-Parameters -
-- el -
- Element -
- element to prepend -
Parameters
- el +Element +element to prepend +
Returns: Element parent
-Removes element from the DOM +
Element.remove()⚓➭
Removes element from the DOM
-Removes value associated with an element by given key. +
Element.removeData([key])⚓➭
Removes value associated with an element by given key. If key is not provided, removes all the data of the element.
-Parameters -
-- key -
- optional -
- string -
- key -
Parameters
- key +optional +string +key +
Returns: object Element
-Applies CSS selector with the element as a parent and returns the result as an Element. +
Element.select(query)⚓➭
Applies CSS selector with the element as a parent and returns the result as an Element.
-Parameters -
-- query -
- string -
- CSS selector -
Parameters
- query +string +CSS selector +
Returns: Element result of query selection
-Applies CSS selector with the element as a parent and returns the result as a set or array of elements. +
Element.selectAll(query)⚓➭
Applies CSS selector with the element as a parent and returns the result as a set or array of elements.
-Parameters -
-- query -
- string -
- CSS selector -
Parameters
- query +string +CSS selector +
Returns: Set array result of query selection
-Adds event handler for touchcancel for the element. +
Element.stop()⚓➭
Stops all the animations of the current element.
-Parameters +
Returns: Element the element
+Element.touchcancel(handler)⚓➭
Adds event handler for touchcancel for the element.
-- handler -
- function -
- handler for the event -
Parameters
- handler +function +handler for the event +
Returns: object Element
-Adds event handler for touchend for the element. +
Element.touchend(handler)⚓➭
Adds event handler for touchend for the element.
-Parameters -
-- handler -
- function -
- handler for the event -
Parameters
- handler +function +handler for the event +
Returns: object Element
-Adds event handler for touchmove for the element. +
Element.touchmove(handler)⚓➭
Adds event handler for touchmove for the element.
-Parameters -
-- handler -
- function -
- handler for the event -
Parameters
- handler +function +handler for the event +
Returns: object Element
-Adds event handler for touchstart for the element. +
Element.touchstart(handler)⚓➭
Adds event handler for touchstart for the element.
-Parameters -
-- handler -
- function -
- handler for the event -
Parameters
- handler +function +handler for the event +
Returns: object Element
-Gets or sets transformation of the element +
Element.transform(tstr)⚓➭
Gets or sets transformation of the element
-Parameters -
-- tstr -
- string -
- transform string in Savage or SVG format -
Parameters
- tstr +string +transform string in Savage or SVG format +
Returns: Element
or
@@ -531,217 +497,187 @@ If key is not provided, removes all the data of the element.string property
Removes event handler for click for the element. +
Element.unclick(handler)⚓➭
Removes event handler for click for the element.
-Parameters -
-- handler -
- function -
- handler for the event -
Parameters
- handler +function +handler for the event +
Returns: object Element
-Removes event handler for double click for the element. +
Element.undblclick(handler)⚓➭
Removes event handler for double click for the element.
-Parameters -
-- handler -
- function -
- handler for the event -
Parameters
- handler +function +handler for the event +
Returns: object Element
-Removes all drag event handlers from given element. +
Element.undrag()⚓➭
Removes all drag event handlers from given element.
-Removes event handlers for hover for the element. +
Element.unhover(f_in, f_out)⚓➭
Removes event handlers for hover for the element.
-Parameters -
-- f_in -
- function -
- handler for hover in -
- f_out -
- function -
- handler for hover out -
Parameters
- f_in +function +handler for hover in +
- f_out +function +handler for hover out +
Returns: object Element
-Removes event handler for mousedown for the element. +
Element.unmousedown(handler)⚓➭
Removes event handler for mousedown for the element.
-Parameters -
-- handler -
- function -
- handler for the event -
Parameters
- handler +function +handler for the event +
Returns: object Element
-Removes event handler for mousemove for the element. +
Element.unmousemove(handler)⚓➭
Removes event handler for mousemove for the element.
-Parameters -
-- handler -
- function -
- handler for the event -
Parameters
- handler +function +handler for the event +
Returns: object Element
-Removes event handler for mouseout for the element. +
Element.unmouseout(handler)⚓➭
Removes event handler for mouseout for the element.
-Parameters -
-- handler -
- function -
- handler for the event -
Parameters
- handler +function +handler for the event +
Returns: object Element
-Removes event handler for mouseover for the element. +
Element.unmouseover(handler)⚓➭
Removes event handler for mouseover for the element.
-Parameters -
-- handler -
- function -
- handler for the event -
Parameters
- handler +function +handler for the event +
Returns: object Element
-Removes event handler for mouseup for the element. +
Element.unmouseup(handler)⚓➭
Removes event handler for mouseup for the element.
-Parameters -
-- handler -
- function -
- handler for the event -
Parameters
- handler +function +handler for the event +
Returns: object Element
-Removes event handler for touchcancel for the element. +
Element.untouchcancel(handler)⚓➭
Removes event handler for touchcancel for the element.
-Parameters -
-- handler -
- function -
- handler for the event -
Parameters
- handler +function +handler for the event +
Returns: object Element
-Removes event handler for touchend for the element. +
Element.untouchend(handler)⚓➭
Removes event handler for touchend for the element.
-Parameters -
-- handler -
- function -
- handler for the event -
Parameters
- handler +function +handler for the event +
Returns: object Element
-Removes event handler for touchmove for the element. +
Element.untouchmove(handler)⚓➭
Removes event handler for touchmove for the element.
-Parameters -
-- handler -
- function -
- handler for the event -
Parameters
- handler +function +handler for the event +
Returns: object Element
-Removes event handler for touchstart for the element. +
Element.untouchstart(handler)⚓➭
Removes event handler for touchstart for the element.
-Parameters -
-- handler -
- function -
- handler for the event -
Parameters
- handler +function +handler for the event +
Returns: object Element
-Creates <use> element linked to the current element.
+
Element.use()⚓➭
Creates <use> element linked to the current element.
Returns: Element <use> element
Fragment⚓
-See Element.select +
Fragment⚓
Fragment.select()⚓➭
See Element.select
-See Element.selectAll +
Fragment.selectAll()⚓➭
-
Matrix⚓
-Adds given matrix to existing one. +
Matrix⚓
Matrix.add(a, b, c, d, e, f, matrix)⚓➭
Adds given matrix to existing one.
-Parameters -
-- a -
- number -
- -
- b -
- number -
- -
- c -
- number -
- -
- d -
- number -
- -
- e -
- number -
- -
- f -
- number -
- -
- matrix -
- object -
- Matrix -
Returns copy of the matrix +
Parameters
- a +number + +
- b +number + +
- c +number + +
- d +number + +
- e +number + +
- f +number + +
- matrix +object +Matrix +
Matrix.clone()⚓➭
Returns copy of the matrix
Returns: object Matrix
-Returns inverted version of the matrix +
Matrix.invert()⚓➭
Returns inverted version of the matrix
Returns: object Matrix
-Rotates the matrix +
Matrix.rotate(a, x, y)⚓➭
Rotates the matrix
-Parameters +
Parameters
- a +number + +
- x +number + +
- y +number + +
Matrix.scale(x, [y], [cx], [cy])⚓➭
Scales the matrix
-- a -
- number -
- -
- x -
- number -
- -
- y -
- number -
- -
Scales the matrix -
-Parameters -
-- x -
- number -
- -
- y -
- optional -
- number -
- -
- cx -
- optional -
- number -
- -
- cy -
- optional -
- number -
- -
Splits matrix into primitive transformations +
Parameters
- x +number + +
- y +optional +number + +
- cx +optional +number + +
- cy +optional +number + +
Matrix.split()⚓➭
Splits matrix into primitive transformations
Returns: object in format:
- dxnumbertranslation by x @@ -752,213 +688,176 @@ If key is not provided, removes all the data of the element.
- rotatenumberrotation in deg
- isSimplebooleancould it be represented via simple transformations
Return transform string that represents given matrix +
Matrix.toTransformString()⚓➭
Return transform string that represents given matrix
Returns: string transform string
-Translate the matrix +
Matrix.translate(x, y)⚓➭
Translate the matrix
-Parameters +
Parameters
- x +number + +
- y +number + +
Matrix.x(x, y)⚓➭
Return x coordinate for given point after transformation described by the matrix. See also Matrix.y
-- x -
- number -
- -
- y -
- number -
- -
Return x coordinate for given point after transformation described by the matrix. See also Matrix.y -
-Parameters -
-- x -
- number -
- -
- y -
- number -
- -
Parameters
- x +number + +
- y +number + +
Returns: number x
-Return y coordinate for given point after transformation described by the matrix. See also Matrix.x +
Matrix.y(x, y)⚓➭
Return y coordinate for given point after transformation described by the matrix. See also Matrix.x
-Parameters -
-- x -
- number -
- -
- y -
- number -
- -
Parameters
- x +number + +
- y +number + +
Returns: number y
-Paper⚓
-Draws a circle. +
Paper⚓
Paper.circle(x, y, r)⚓➭
Draws a circle.
-Parameters -
-- x -
- number -
- x coordinate of the centre -
- y -
- number -
- y coordinate of the centre -
- r -
- number -
- radius -
Parameters
- x +number +x coordinate of the centre +
- y +number +y coordinate of the centre +
- r +number +radius +
Returns: object Element object with type “circle”
-Usage +
Usage
var c = paper.circle(50, 50, 40);
+Paper.el(name)⚓➭
Creates element on paper with a given name and no attributes.
-var c = paper.circle(50, 50, 40);
-Creates element on paper with a given name and no attributes. -
-Parameters -
-- name -
- string -
- element tag name -
Parameters
- name +string +element tag name +
Returns: Element the element
-Usage -
-var c = paper.circle(10, 10, 10); // is the same as...
-var c = paper.el("circle").attr({
- cx: 10,
- cy: 10,
- r: 10
+Usage
var c = paper.circle(10, 10, 10); // is the same as...
+var c = paper.el("circle").attr({
+ cx: 10,
+ cy: 10,
+ r: 10
});
-
-Draws an ellipse. + +
Paper.ellipse(x, y, rx, ry)⚓➭
Draws an ellipse.
-Parameters -
-- x -
- number -
- x coordinate of the centre -
- y -
- number -
- y coordinate of the centre -
- rx -
- number -
- horizontal radius -
- ry -
- number -
- vertical radius -
Parameters
- x +number +x coordinate of the centre +
- y +number +y coordinate of the centre +
- rx +number +horizontal radius +
- ry +number +vertical radius +
Returns: object Element object with type “ellipse”
-Usage +
Usage
var c = paper.ellipse(50, 50, 40, 20);
+Paper.filter(filstr)⚓➭
Creates filter element
-var c = paper.ellipse(50, 50, 40, 20);
-Creates filter element -
-Parameters -
-- filstr -
- string -
- SVG fragment of filter provided as a string. -
Parameters
- filstr +string +SVG fragment of filter provided as a string. +
Returns: object Element
Note: It is recommended to use filters embedded into page inside empty SVG element.
-Usage -
-var f = paper.filter('<feGaussianBlur stdDeviation="2"/>'),
- c = paper.circle(10, 10, 10).attr({
+Usage
var f = paper.filter('<feGaussianBlur stdDeviation="2"/>'),
+ c = paper.circle(10, 10, 10).attr({
filter: f
});
-
-Returns string of the blur filter. + +
Paper.filter.blur(dx, dy, [blur], [color])⚓➭
Returns string of the blur filter.
-Parameters -
-- x -
- number -
- amount of horisontal blur in px. -
- y -
- optional -
- number -
- amount of vertical blur in px. -
Parameters
- x +number +amount of horisontal blur in px. +
- y +optional +number +amount of vertical blur in px. +
Returns: string filter representation
-Usage -
-var f = paper.filter(Savage.filter.blur(5, 10)),
- c = paper.circle(10, 10, 10).attr({
+Usage
var f = paper.filter(Savage.filter.blur(5, 10)),
+ c = paper.circle(10, 10, 10).attr({
filter: f
});
-
+Returns string of the blur filter.
-Parameters -
-- dx -
- number -
- horisontal shift of the shadow in px. -
- dy -
- number -
- vertical shift of the shadow in px. -
- blur -
- optional -
- number -
- amount of blur. -
- color -
- optional -
- string -
- color of the shadow. -
Parameters
- dx +number +horisontal shift of the shadow in px. +
- dy +number +vertical shift of the shadow in px. +
- blur +optional +number +amount of blur. +
- color +optional +string +color of the shadow. +
Returns: string filter representation
-Usage -
-var f = paper.filter(Savage.filter.shadow(5, 10)),
- c = paper.circle(10, 10, 10).attr({
+Usage
var f = paper.filter(Savage.filter.shadow(5, 10)),
+ c = paper.circle(10, 10, 10).attr({
filter: f
});
-
-Makes a group element. + +
Paper.g([varargs])⚓➭
Makes a group element.
-Parameters -
-- varargs -
- optional -
- … -
- elements -
Parameters
- varargs +optional +… +elements +
Returns: object Element object with type “g”
-Usage -
-var c1 = paper.circle(),
- c2 = paper.rect(),
- g = paper.g(c2, c1); // note that the order of elements will be different
-Usage
var c1 = paper.circle(),
+ c2 = paper.rect(),
+ g = paper.g(c2, c1); // note that the order of elements will be different
+or
-var c1 = paper.circle(),
- c2 = paper.rect(),
- g = paper.g();
+var c1 = paper.circle(),
+ c2 = paper.rect(),
+ g = paper.g();
g.add(c2, c1);
-
-Creates a gradient element. + +
Paper.gradient(gradient)⚓➭
Creates a gradient element.
-Parameters -
-- gradient -
- string -
- gradient descriptor -
Gradient Descriptor -
Gradient descriptor consists of <type>(<coords>)<colors>. Type
+
Parameters
- gradient +string +gradient descriptor +
Gradient Descriptor
Gradient descriptor consists of <type>(<coords>)<colors>. Type
could be linear or radial, which presented as letter “L” or “R”. Any
type could be absolute or relative, absolute gradient take it coords
relative to the SVG surface, while relative takes them relative to
@@ -969,119 +868,103 @@ vector of gradient for linear as x1, y1, x2, y2. For radial as cx,
cy, r and optional fx, fy. Colors are list of dash separated colors.
Optionally color could have offset after colon.
Example -
-var g = paper.gradient("l(0, 0, 1, 1)#000-#f00-#fff");
-Example
var g = paper.gradient("l(0, 0, 1, 1)#000-#f00-#fff");
+Linear gradient, relative from top-left corner to bottom-right corner, from black through red to white.
-var g = paper.gradient("L(0, 0, 100, 100)#000-#f00:25%-#fff");
-var g = paper.gradient("L(0, 0, 100, 100)#000-#f00:25%-#fff");
+Linear gradient, absolute from (0, 0) to (100, 100), from black through red at 25% to white.
-var g = paper.gradient("r(0.5, 0.5, 0.5)#000-#fff");
-var g = paper.gradient("r(0.5, 0.5, 0.5)#000-#fff");
+Radial gradient, relative from the center of the element with radius 0.5 of the width, from black to white.
-paper.circle(50, 50, 40).attr({
+paper.circle(50, 50, 40).attr({
fill: g
});
-
+Returns: object Element object with type “gradient”
-See Paper.g +
Paper.group()⚓➭
See Paper.g
-Embeds an image into the surface. +
Paper.image(src, x, y, width, height)⚓➭
Embeds an image into the surface.
-Parameters -
-- src -
- string -
- URI of the source image -
- x -
- number -
- x coordinate position -
- y -
- number -
- y coordinate position -
- width -
- number -
- width of the image -
- height -
- number -
- height of the image -
Parameters
- src +string +URI of the source image +
- x +number +x coordinate position +
- y +number +y coordinate position +
- width +number +width of the image +
- height +number +height of the image +
Returns: object Raphaël element object with type “image”
-Usage -
-var c = paper.image("apple.png", 10, 10, 80, 80);
-Usage
var c = paper.image("apple.png", 10, 10, 80, 80);
+Embeds an image into the surface.
-Parameters -
-- src -
- string -
- URI of the source image -
- x -
- number -
- x coordinate position -
- y -
- number -
- y coordinate position -
- width -
- number -
- width of the image -
- height -
- number -
- height of the image -
Parameters
- src +string +URI of the source image +
- x +number +x coordinate position +
- y +number +y coordinate position +
- width +number +width of the image +
- height +number +height of the image +
Returns: object Element object with type “image”
-Usage +
Usage
var c = paper.image("apple.png", 10, 10, 80, 80);
+Paper.line(x1, y1, x2, y2)⚓➭
Draws a line.
-var c = paper.image("apple.png", 10, 10, 80, 80);
-Draws a line. -
-Parameters -
-- x1 -
- number -
- x coordinate position of the start -
- y1 -
- number -
- y coordinate position of the start -
- x2 -
- number -
- x coordinate position of the end -
- y2 -
- number -
- y coordinate position of the end -
Parameters
- x1 +number +x coordinate position of the start +
- y1 +number +y coordinate position of the start +
- x2 +number +x coordinate position of the end +
- y2 +number +y coordinate position of the end +
Returns: object Element object with type “line”
-Usage +
Usage
var t1 = paper.line(50, 50, 100, 100);
+Paper.path([pathString])⚓➭
Creates a path element by given path data string.
-var t1 = paper.line(50, 50, 100, 100);
-Creates a path element by given path data string. -
-Parameters -
-- pathString -
- optional -
- string -
- path string in SVG format. -
Parameters
- pathString +optional +string +path string in SVG format. +
Path string consists of one-letter commands, followed by comma seprarated arguments in numercal form. Example:
-"M10,20L30,40"
-"M10,20L30,40"
+Here we can see two commands: “M”, with arguments (10, 20) and “L” with arguments (30, 40). Upper case letter mean command is absolute, lower case—relative.
Usage +
Usage
var c = paper.path("M10 10L90 90");
+// draw a diagonal line:
+// move to 10,10, line to 90,90
+Paper.polygon()⚓➭
Draws a polygon. See Paper.polyline
-var c = paper.path("M10 10L90 90");
-// draw a diagonal line:
-// move to 10,10, line to 90,90
-Draws a polygon. See Paper.polyline +
Paper.polyline(…)⚓➭
Draws a polyline.
-Draws a polyline. -
-Parameters -
-- points -
- array -
- array of points -
Parameters
- points +array +array of points +
or
-- varargs -
- … -
- points -
Parameters
- varargs +… +points +
Returns: object Element object with type “text”
-Usage -
-var p1 = paper.polyline([10, 10, 100, 100]);
-var p2 = paper.polyline(10, 10, 100, 100);
-
+
Usage
var p1 = paper.polyline([10, 10, 100, 100]);
+var p2 = paper.polyline(10, 10, 100, 100);
+Paper.rect(x, y, width, height, [rx], [ry])⚓➭
Draws a rectangle.
-Parameters -
-- x -
- number -
- x coordinate of the top left corner -
- y -
- number -
- y coordinate of the top left corner -
- width -
- number -
- width -
- height -
- number -
- height -
- rx -
- optional -
- number -
- horisontal radius for rounded corners, default is 0 -
- ry -
- optional -
- number -
- vertical radius for rounded corners, default is rx or 0 -
Parameters
- x +number +x coordinate of the top left corner +
- y +number +y coordinate of the top left corner +
- width +number +width +
- height +number +height +
- rx +optional +number +horisontal radius for rounded corners, default is 0 +
- ry +optional +number +vertical radius for rounded corners, default is rx or 0 +
Returns: object Element object with type “rect”
-Usage +
Usage
// regular rectangle
+var c = paper.rect(10, 10, 50, 50);
+// rectangle with rounded corners
+var c = paper.rect(40, 40, 50, 50, 10);
+Paper.text(x, y, text)⚓➭
Draws a text string.
-// regular rectangle
-var c = paper.rect(10, 10, 50, 50);
-// rectangle with rounded corners
-var c = paper.rect(40, 40, 50, 50, 10);
-Draws a text string. -
-Parameters -
-- x -
- number -
- x coordinate position -
- y -
- number -
- y coordinate position -
- text -
- string array -
- The text string to draw or array of <tspan>s -
Parameters
- x +number +x coordinate position +
- y +number +y coordinate position +
- text +string array +The text string to draw or array of <tspan>s +
Returns: object Element object with type “text”
-Usage -
-var t1 = paper.text(50, 50, "Savage");
-var t2 = paper.text(50, 50, ["S","a","v","a","g","e"]);
-Savage⚓
-Utility method +
Usage
var t1 = paper.text(50, 50, "Savage");
+var t2 = paper.text(50, 50, ["S","a","v","a","g","e"]);
+Savage⚓
Savage.Matrix(…)⚓➭
Utility method Returns matrix based on given parameters.
-Parameters -
-- a -
- number -
- -
- b -
- number -
- -
- c -
- number -
- -
- d -
- number -
- -
- e -
- number -
- -
- f -
- number -
- -
Parameters
- a +number + +
- b +number + +
- c +number + +
- d +number + +
- e +number + +
- f +number + +
or
-- svgMatrix -
- SVGMatrix -
- -
Parameters
- svgMatrix +SVGMatrix + +
Returns: object Matrix
-Runs generic animation of one number into another with a caring function. +
Savage.ajax(…)⚓➭
Simple implementation of Ajax.
-Parameters +
Parameters
- url +string +URL +
- postData +object string +data for post request +
- callback +function +callback +
- scope +optional +object +scope of callback +
or
-- from -
- number array -
- number or array of numbers -
- to -
- number array -
- number or array of numbers -
- setter -
- function -
- caring function that will take one number argument -
- ms -
- number -
- duration -
- easing -
- optional -
- function -
- easing function from mina or custom -
- callback -
- optional -
- function -
- -
Parameters
- url +string +URL +
- callback +function +callback +
- scope +optional +object +scope of callback +
Returns: XMLHttpRequest XMLHttpRequest (just in case)
+Savage.animate(from, to, setter, ms, [easing], [callback])⚓➭
Runs generic animation of one number into another with a caring function. +
+Parameters
- from +number array +number or array of numbers +
- to +number array +number or array of numbers +
- setter +function +caring function that will take one number argument +
- ms +number +duration +
- easing +optional +function +easing function from mina or custom +
- callback +optional +function + +
Returns: object animation object in mina format
- {
- idstringanimation id, consider it read-only,
- durationfunctiongets or sets the duration of the animation, @@ -1254,36 +1150,32 @@ Returns matrix based on given parameters.
- statusfunctiongets or sets the status of the animation,
- stopfunctionstops the animation
- }
Creates animation object. +
Savage.animation(attr, ms, [easing], [callback])⚓➭
Creates animation object.
-Parameters -
-- attr -
- object -
- attributes of final destination -
- ms -
- number -
- animation duration -
- easing -
- optional -
- function -
- one of easing functions of mina or custom one -
- callback -
- optional -
- function -
- callback -
Parameters
- attr +object +attributes of final destination +
- ms +number +animation duration +
- easing +optional +function +one of easing functions of mina or custom one +
- callback +optional +function +callback +
Returns: object animation object
-Parses the color string and returns object with all values for the given color. +
Savage.color(clr)⚓➭
Parses the color string and returns object with all values for the given color.
-Parameters -
-- clr -
- string -
- color string in one of the supported formats (see Savage.getRGB) -
Parameters
- clr +string +color string in one of the supported formats (see Savage.getRGB) +
Returns: object Combined RGB & HSB object in format:
- {
- rnumberred,
- gnumbergreen, @@ -1295,50 +1187,46 @@ Returns matrix based on given parameters.
- vnumbervalue (brightness),
- lnumberlightness
- }
Transform angle to degrees +
Savage.deg(deg)⚓➭
Transform angle to degrees
-Parameters -
-- deg -
- number -
- angle in radians -
Parameters
- deg +number +angle in radians +
Returns: number angle in degrees.
-Utility method +
Savage.findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t)⚓➭
Utility method Find dot coordinates on the given cubic bezier curve at the given t.
-Parameters -
-- p1x -
- number -
- x of the first point of the curve -
- p1y -
- number -
- y of the first point of the curve -
- c1x -
- number -
- x of the first anchor of the curve -
- c1y -
- number -
- y of the first anchor of the curve -
- c2x -
- number -
- x of the second anchor of the curve -
- c2y -
- number -
- y of the second anchor of the curve -
- p2x -
- number -
- x of the second point of the curve -
- p2y -
- number -
- y of the second point of the curve -
- t -
- number -
- position on the curve (0..1) -
Parameters
- p1x +number +x of the first point of the curve +
- p1y +number +y of the first point of the curve +
- c1x +number +x of the first anchor of the curve +
- c1y +number +y of the first anchor of the curve +
- c2x +number +x of the second anchor of the curve +
- c2y +number +y of the second anchor of the curve +
- p2x +number +x of the second point of the curve +
- p2y +number +y of the second point of the curve +
- t +number +position on the curve (0..1) +
Returns: object point information in format:
- {
- x:numberx coordinate of the point
- y:numbery coordinate of the point @@ -1352,51 +1240,43 @@ Find dot coordinates on the given cubic bezier curve at the given t.
- y:numbery coordinate of the end of the curve
- }
- alpha:numberangle of the curve derivative at the point
Replaces construction of type “{<name>}” to the corresponding argument.
+
Savage.format(token, json)⚓➭
Replaces construction of type “{<name>}” to the corresponding argument.
Parameters -
-- token -
- string -
- string to format -
- json -
- object -
- object which properties will be used as a replacement -
Parameters
- token +string +string to format +
- json +object +object which properties will be used as a replacement +
Returns: string formated string
-Usage -
-// this will draw a rectangular shape equivalent to "M10,20h40v50h-40z"
-paper.path(Savage.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative width']}z", {
- x: 10,
- y: 20,
+Usage
// this will draw a rectangular shape equivalent to "M10,20h40v50h-40z"
+paper.path(Savage.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative width']}z", {
+ x: 10,
+ y: 20,
dim: {
- width: 40,
- height: 50,
- "negative width": -40
+ width: 40,
+ height: 50,
+ "negative width": -40
}
}));
-
-Creates DOM fragment from given list of elements or strings + +
Savage.fragment(varargs)⚓➭
Creates DOM fragment from given list of elements or strings
-Parameters -
-- varargs -
- … -
- SVG string -
Parameters
- varargs +… +SVG string +
Returns: Fragment the Fragment
-Parses colour string as RGB object +
Savage.getRGB(colour)⚓➭
Parses colour string as RGB object
-Parameters -
-- colour -
- string -
- colour string in one of formats: -
Parameters
- colour +string +colour string in one of formats: +
- Colour name (“
red”, “green”, “cornflowerblue”, etc) - #••• — shortened HTML colour: (“
#000”, “#fc0”, etc)
@@ -1415,225 +1295,199 @@ paper.path(Savage.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative wi
- hexstringcolor in HTML/CSS format: #••••••,
- errorbooleantrue if string cant be parsed
- } -
Converts HSB values to hex representation of the colour. +
Savage.hsb(h, s, b)⚓➭
Converts HSB values to hex representation of the colour.
-Parameters -
-- h -
- number -
- hue -
- s -
- number -
- saturation -
- b -
- number -
- value or brightness -
Parameters
- h +number +hue +
- s +number +saturation +
- b +number +value or brightness +
Returns: string hex representation of the colour.
-Converts HSB values to RGB object. +
Savage.hsb2rgb(h, s, v)⚓➭
Converts HSB values to RGB object.
-Parameters -
-- h -
- number -
- hue -
- s -
- number -
- saturation -
- v -
- number -
- value or brightness -
Parameters
- h +number +hue +
- s +number +saturation +
- v +number +value or brightness +
Returns: object RGB object in format:
- {
- rnumberred,
- gnumbergreen,
- bnumberblue,
- hexstringcolor in HTML/CSS format: #••••••
- }
Converts HSL values to hex representation of the colour. +
Savage.hsl(h, s, l)⚓➭
Converts HSL values to hex representation of the colour.
-Parameters -
-- h -
- number -
- hue -
- s -
- number -
- saturation -
- l -
- number -
- luminosity -
Parameters
- h +number +hue +
- s +number +saturation +
- l +number +luminosity +
Returns: string hex representation of the colour.
-Converts HSL values to RGB object. +
Savage.hsl2rgb(h, s, l)⚓➭
Converts HSL values to RGB object.
-Parameters -
-- h -
- number -
- hue -
- s -
- number -
- saturation -
- l -
- number -
- luminosity -
Parameters
- h +number +hue +
- s +number +saturation +
- l +number +luminosity +
Returns: object RGB object in format:
- {
- rnumberred,
- gnumbergreen,
- bnumberblue,
- hexstringcolor in HTML/CSS format: #••••••
- }
Handfull replacement for typeof operator.
+
Savage.is(o, type)⚓➭
Handfull replacement for typeof operator.
Parameters -
-- o -
- … -
- any object or primitive -
- type -
- string -
- name of the type, i.e. “string”, “function”, “number”, etc. -
Parameters
- o +… +any object or primitive +
- type +string +name of the type, i.e. “string”, “function”, “number”, etc. +
Returns: boolean is given value is of given type
-Parses SVG fragment and converts it into Fragment. +
Savage.parse(svg)⚓➭
Parses SVG fragment and converts it into Fragment.
-Parameters -
-- svg -
- string -
- SVG string -
Parameters
- svg +string +SVG string +
Returns: Fragment the fragment
-Utility method +
Savage.parsePathString(pathString)⚓➭
Utility method Parses given path string into an array of arrays of path segments.
-Parameters -
-- pathString -
- string array -
- path string or array of segments (in the last case it will be returned straight away) -
Parameters
- pathString +string array +path string or array of segments (in the last case it will be returned straight away) +
Returns: array array of segments.
-Utility method +
Savage.parseTransformString(TString)⚓➭
Utility method Parses given path string into an array of transformations.
-Parameters -
-- TString -
- string array -
- transform string or array of transformations (in the last case it will be returned straight away) -
Parameters
- TString +string array +transform string or array of transformations (in the last case it will be returned straight away) +
Returns: array array of transformations.
-Savage.path⚓
-Utility method +
Savage.path⚓
Savage.path.bezierBBox(…)⚓➭
Utility method Return bounding box of a given cubic bezier curve
-Parameters -
-- p1x -
- number -
- x of the first point of the curve -
- p1y -
- number -
- y of the first point of the curve -
- c1x -
- number -
- x of the first anchor of the curve -
- c1y -
- number -
- y of the first anchor of the curve -
- c2x -
- number -
- x of the second anchor of the curve -
- c2y -
- number -
- y of the second anchor of the curve -
- p2x -
- number -
- x of the second point of the curve -
- p2y -
- number -
- y of the second point of the curve -
Parameters
- p1x +number +x of the first point of the curve +
- p1y +number +y of the first point of the curve +
- c1x +number +x of the first anchor of the curve +
- c1y +number +y of the first anchor of the curve +
- c2x +number +x of the second anchor of the curve +
- c2y +number +y of the second anchor of the curve +
- p2x +number +x of the second point of the curve +
- p2y +number +y of the second point of the curve +
or
-- bez -
- array -
- array of six points for bezier curve -
Parameters
- bez +array +array of six points for bezier curve +
Returns: object point information in format:
- {
- min: {
- x:numberx coordinate of the left point
- y:numbery coordinate of the top point
- }
- max: {
- x:numberx coordinate of the right point
- y:numbery coordinate of the bottom point
- }
- min: {
- }
Return coordinates of the point located at the given length on the given path. +
Savage.path.getPointAtLength(path, length)⚓➭
Return coordinates of the point located at the given length on the given path.
-Parameters -
-- path -
- string -
- SVG path string -
- length -
- number -
- -
Parameters
- path +string +SVG path string +
- length +number + +
Returns: object representation of the point:
- {
- x:numberx coordinate
- y:numbery coordinate
- alpha:numberangle of derivative
- }
Return subpath of a given path from given length to given length. +
Savage.path.getSubpath(path, from, to)⚓➭
Return subpath of a given path from given length to given length.
-Parameters -
-- path -
- string -
- SVG path string -
- from -
- number -
- position of the start of the segment -
- to -
- number -
- position of the end of the segment -
Parameters
- path +string +SVG path string +
- from +number +position of the start of the segment +
- to +number +position of the end of the segment +
Returns: string pathstring for the segment
-Returns length of the given path in pixels. +
Savage.path.getTotalLength(path)⚓➭
Returns length of the given path in pixels.
-Parameters -
-- path -
- string -
- SVG path string. -
Parameters
- path +string +SVG path string. +
Returns: number length.
-Utility method +
Savage.path.intersection(path1, path2)⚓➭
Utility method Finds intersections of two paths
-Parameters -
-- path1 -
- string -
- path string -
- path2 -
- string -
- path string -
Parameters
- path1 +string +path string +
- path2 +string +path string +
Returns: array dots of intersection
- [
- {
- x:numberx coordinate of the point
- y:numbery coordinate of the point @@ -1644,110 +1498,94 @@ Finds intersections of two paths
- bez1:arrayeight coordinates representing beziér curve for the segment of path1
- bez2:arrayeight coordinates representing beziér curve for the segment of path2
- }
- ]
Utility method +
Savage.path.isBBoxIntersect(bbox1, bbox2)⚓➭
Utility method
Returns true if two bounding boxes intersect
Parameters -
-- bbox1 -
- string -
- first bounding box -
- bbox2 -
- string -
- second bounding box -
Parameters
- bbox1 +string +first bounding box +
- bbox2 +string +second bounding box +
Returns: boolean true if they intersect
Utility method +
Savage.path.isPointInside(path, x, y)⚓➭
Utility method
Returns true if given point is inside a given closed path.
Parameters -
-- path -
- string -
- path string -
- x -
- number -
- x of the point -
- y -
- number -
- y of the point -
Parameters
- path +string +path string +
- x +number +x of the point +
- y +number +y of the point +
Returns: boolean true, if point is inside the path
-Utility method +
Savage.path.isPointInsideBBox(bbox, x, y)⚓➭
Utility method
Returns true if given point is inside bounding box.
Parameters -
-- bbox -
- string -
- bounding box -
- x -
- string -
- x coordinate of the point -
- y -
- string -
- y coordinate of the point -
Parameters
- bbox +string +bounding box +
- x +string +x coordinate of the point +
- y +string +y coordinate of the point +
Returns: boolean true if point inside
Transform the path string with given matrix. +
Savage.path.map(path, matrix)⚓➭
Transform the path string with given matrix.
-Parameters -
-- path -
- string -
- path string -
- matrix -
- object -
- see Matrix -
Parameters
- path +string +path string +
- matrix +object +see Matrix +
Returns: string transformed path string
-Utility method +
Savage.path.toAbsolute(path)⚓➭
Utility method Converts path coordinates into absolute values.
-Parameters -
-- path -
- string -
- path string -
Parameters
- path +string +path string +
Returns: array path string
-Utility method +
Savage.path.toCubic(pathString)⚓➭
Utility method Converts path to a new path where all segments are cubic bezier curves.
-Parameters -
-- pathString -
- string array -
- path string or array of segments -
Parameters
- pathString +string array +path string or array of segments +
Returns: array array of segments.
-Utility method +
Savage.path.toRelative(path)⚓➭
Utility method Converts path coordinates into relative values.
-Parameters -
-- path -
- string -
- path string -
Parameters
- path +string +path string +
Returns: array path string
-Utility method +
Savage.pathBBox(path)⚓➭
Utility method Return bounding box of a given path
-Parameters -
-- path -
- string -
- path string -
Parameters
- path +string +path string +
Returns: object bounding box
- {
- x:numberx coordinate of the left top point of the box
- y:numbery coordinate of the left top point of the box @@ -1756,191 +1594,169 @@ Return bounding box of a given path
- width:numberwidth of the box
- height:numberheight of the box
- }
Transform angle to radians +
Savage.rad(deg)⚓➭
Transform angle to radians
-Parameters -
-- deg -
- number -
- angle in degrees -
Parameters
- deg +number +angle in degrees +
Returns: number angle in radians.
-Converts RGB values to hex representation of the colour. +
Savage.rgb(r, g, b)⚓➭
Converts RGB values to hex representation of the colour.
-Parameters -
-- r -
- number -
- red -
- g -
- number -
- green -
- b -
- number -
- blue -
Parameters
- r +number +red +
- g +number +green +
- b +number +blue +
Returns: string hex representation of the colour.
-Converts RGB values to HSB object. +
Savage.rgb2hsb(r, g, b)⚓➭
Converts RGB values to HSB object.
-Parameters -
-- r -
- number -
- red -
- g -
- number -
- green -
- b -
- number -
- blue -
Parameters
- r +number +red +
- g +number +green +
- b +number +blue +
Returns: object HSB object in format:
- {
- hnumberhue
- snumbersaturation
- bnumberbrightness
- }
Converts RGB values to HSL object. +
Savage.rgb2hsl(r, g, b)⚓➭
Converts RGB values to HSL object.
-Parameters -
-- r -
- number -
- red -
- g -
- number -
- green -
- b -
- number -
- blue -
Parameters
- r +number +red +
- g +number +green +
- b +number +blue +
Returns: object HSL object in format:
- {
- hnumberhue
- snumbersaturation
- lnumberluminosity
- }
Wraps DOM element specified by CSS selector as Element +
Savage.select(query)⚓➭
Wraps DOM element specified by CSS selector as Element
-Parameters -
-- query -
- string -
- CSS selector of the element -
Parameters
- query +string +CSS selector of the element +
Returns: Element
-Wraps DOM elements specified by CSS selector as set or array of Element +
Savage.selectAll(query)⚓➭
Wraps DOM elements specified by CSS selector as set or array of Element
-Parameters -
-- query -
- string -
- CSS selector of the element -
Parameters
- query +string +CSS selector of the element +
Returns: Element
-Snaps given value to given grid. +
Savage.snapTo(values, value, [tolerance])⚓➭
Snaps given value to given grid.
-Parameters -
-- values -
- array number -
- given array of values or step of the grid -
- value -
- number -
- value to adjust -
- tolerance -
- optional -
- number -
- tolerance for snapping. Default is
10.
-
Parameters
- values +array number +given array of values or step of the grid +
- value +number +value to adjust +
- tolerance
+optional
+number
+tolerance for snapping. Default is
10.
+
Returns: number adjusted value.
-Set⚓
-Removeds all elements from the set +
Set⚓
Set.clear()⚓➭
Removeds all elements from the set
-Removes given element from the set +
Set.exclude(element)⚓➭
Removes given element from the set
-Parameters -
-- element -
- object -
- element to remove -
Parameters
- element +object +element to remove +
Returns: boolean true if object was found & removed from the set
Executes given function for each element in the set. +
Set.forEach(callback, thisArg)⚓➭
Executes given function for each element in the set.
If function returns false it will stop loop running.
Parameters -
-- callback -
- function -
- function to run -
- thisArg -
- object -
- context object for the callback -
Parameters
- callback +function +function to run +
- thisArg +object +context object for the callback +
Returns: object Set object
-Removes last element and returns it. +
Set.pop()⚓➭
Removes last element and returns it.
Returns: object element
-Adds each argument to the current set. +
Set.push()⚓➭
Adds each argument to the current set.
Returns: object original element
-Removes given element from the set +
Set.splice(index, count, [insertion…])⚓➭
Removes given element from the set
-Parameters -
-- index -
- number -
- position of the deletion -
- count -
- number -
- number of element to remove -
- insertion… -
- optional -
- object -
- elements to insert -
Parameters
- index +number +position of the deletion +
- count +number +number of element to remove +
- insertion… +optional +object +elements to insert +
Returns: object set elements that were deleted
-Generic animation of numbers. +
mina(a, A, b, B, get, set, [easing])⚓➭
Generic animation of numbers.
-Parameters -
-- a -
- number -
- start “slave” number -
- A -
- number -
- end “slave” number -
- b -
- number -
- start “master” number (start time in gereal case) -
- B -
- number -
- end “master” number (end time in gereal case) -
- get -
- function -
- getter of “master” number (see mina.time) -
- set -
- function -
- setter of “slave” number -
- easing -
- optional -
- function -
- easing function, default is mina.linear -
Parameters
- a +number +start “slave” number +
- A +number +end “slave” number +
- b +number +start “master” number (start time in gereal case) +
- B +number +end “master” number (end time in gereal case) +
- get +function +getter of “master” number (see mina.time) +
- set +function +setter of “slave” number +
- easing +optional +function +easing function, default is mina.linear +
Returns: object animation descriptor
- {
- idstringanimation id,
- startnumberstart “slave” number, @@ -1957,121 +1773,105 @@ Return bounding box of a given path
- durationfunctionduration getter/setter,
- stopfunctionanimation stopper
- }
Backin easing. +
mina.backin(n)⚓➭
Backin easing.
-Parameters -
-- n -
- number -
- input 0..1 -
Parameters
- n +number +input 0..1 +
Returns: number output 0..1
-Backout easing. +
mina.backout(n)⚓➭
Backout easing.
-Parameters -
-- n -
- number -
- input 0..1 -
Parameters
- n +number +input 0..1 +
Returns: number output 0..1
-Bounce easing. +
mina.bounce(n)⚓➭
Bounce easing.
-Parameters -
-- n -
- number -
- input 0..1 -
Parameters
- n +number +input 0..1 +
Returns: number output 0..1
-Easein easing. +
mina.easein(n)⚓➭
Easein easing.
-Parameters -
-- n -
- number -
- input 0..1 -
Parameters
- n +number +input 0..1 +
Returns: number output 0..1
-Easeinout easing. +
mina.easeinout(n)⚓➭
Easeinout easing.
-Parameters -
-- n -
- number -
- input 0..1 -
Parameters
- n +number +input 0..1 +
Returns: number output 0..1
-Easeout easing. +
mina.easeout(n)⚓➭
Easeout easing.
-Parameters -
-- n -
- number -
- input 0..1 -
Parameters
- n +number +input 0..1 +
Returns: number output 0..1
-Elastic easing. +
mina.elastic(n)⚓➭
Elastic easing.
-Parameters -
-- n -
- number -
- input 0..1 -
Parameters
- n +number +input 0..1 +
Returns: number output 0..1
-Returns animation by it’s id. +
mina.getById(id)⚓➭
Returns animation by it’s id.
-Parameters -
-- id -
- string -
- animation’s id -
Parameters
- id +string +animation’s id +
Returns: object See mina
-Default linear easing. +
mina.linear(n)⚓➭
Default linear easing.
-Parameters -
-- n -
- number -
- input 0..1 -
Parameters
- n +number +input 0..1 +
Returns: number output 0..1
-Returns current time. Equal to +
mina.time()⚓➭
Returns current time. Equal to
-function () {
- return (new Date).getTime();
+function () {
+ return (new Date).getTime();
}
-
-