raphael-rails 1.5.2 → 2.1.0
Sign up to get free protection for your applications and to get access to all the features.
- data/lib/raphael-rails/version.rb +1 -1
- data/vendor/assets/javascripts/README.markdown +3 -0
- data/vendor/assets/javascripts/history.md +82 -0
- data/vendor/assets/javascripts/license.txt +21 -0
- data/vendor/assets/javascripts/make +45 -0
- data/vendor/assets/javascripts/raphael-min.js +10 -7
- data/vendor/assets/javascripts/raphael.core.js +5189 -0
- data/vendor/assets/javascripts/raphael.js +4479 -2389
- data/vendor/assets/javascripts/raphael.svg.js +1360 -0
- data/vendor/assets/javascripts/raphael.vml.js +973 -0
- data/vendor/assets/javascripts/reference.html +2489 -0
- data/vendor/assets/javascripts/reference.js +248 -0
- metadata +32 -55
- data/vendor/assets/javascripts/plugins/colorpicker.js +0 -259
- data/vendor/assets/javascripts/plugins/colorwheel.js +0 -212
- data/vendor/assets/javascripts/plugins/jquery.colorpicker.js +0 -16
- data/vendor/assets/javascripts/plugins/jquery.colorwheel.js +0 -9
- data/vendor/assets/javascripts/plugins/raphael.blur.js +0 -53
- data/vendor/assets/javascripts/plugins/raphael.path.methods.js +0 -60
- data/vendor/assets/javascripts/plugins/raphael.primitives.js +0 -99
- data/vendor/assets/javascripts/plugins/raphael.shadow.js +0 -52
- data/vendor/assets/javascripts/test/image/raphael.png +0 -0
- data/vendor/assets/javascripts/test/integration.html +0 -101
- data/vendor/assets/javascripts/test/vendor/jquery.js +0 -3549
|
@@ -0,0 +1,2489 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<!-- Generated with Dr.js -->
|
|
3
|
+
<html lang="en"><head><meta charset="utf-8"><title>Raphaël Reference</title><link rel="stylesheet" href="dr.css" media="screen"><link rel="stylesheet" href="dr-print.css" media="print"></head><body id="dr-js"><div id="dr"><ol class="dr-toc" id="dr-toc"><li class="dr-lvl0"><a href="#Animation" class="{clas}"><span>Animation</span></a></li><li class="dr-lvl1"><a href="#Animation.delay" class="dr-method"><span>Animation.delay()</span></a></li><li class="dr-lvl1"><a href="#Animation.repeat" class="dr-method"><span>Animation.repeat()</span></a></li><li class="dr-lvl0"><a href="#Element" class="{clas}"><span>Element</span></a></li><li class="dr-lvl1"><a href="#Element.animate" class="dr-method"><span>Element.animate()</span></a></li><li class="dr-lvl1"><a href="#Element.animateWith" class="dr-method"><span>Element.animateWith()</span></a></li><li class="dr-lvl1"><a href="#Element.attr" class="dr-method"><span>Element.attr()</span></a></li><li class="dr-lvl1"><a href="#Element.click" class="dr-method"><span>Element.click()</span></a></li><li class="dr-lvl1"><a href="#Element.clone" class="dr-method"><span>Element.clone()</span></a></li><li class="dr-lvl1"><a href="#Element.data" class="dr-method"><span>Element.data()</span></a></li><li class="dr-lvl1"><a href="#Element.dblclick" class="dr-method"><span>Element.dblclick()</span></a></li><li class="dr-lvl1"><a href="#Element.drag" class="dr-method"><span>Element.drag()</span></a></li><li class="dr-lvl1"><a href="#Element.getBBox" class="dr-method"><span>Element.getBBox()</span></a></li><li class="dr-lvl1"><a href="#Element.getPointAtLength" class="dr-method"><span>Element.getPointAtLength()</span></a></li><li class="dr-lvl1"><a href="#Element.getSubpath" class="dr-method"><span>Element.getSubpath()</span></a></li><li class="dr-lvl1"><a href="#Element.getTotalLength" class="dr-method"><span>Element.getTotalLength()</span></a></li><li class="dr-lvl1"><a href="#Element.glow" class="dr-method"><span>Element.glow()</span></a></li><li class="dr-lvl1"><a href="#Element.hide" class="dr-method"><span>Element.hide()</span></a></li><li class="dr-lvl1"><a href="#Element.hover" class="dr-method"><span>Element.hover()</span></a></li><li class="dr-lvl1"><a href="#Element.id" class="dr-property"><span>Element.id</span></a></li><li class="dr-lvl1"><a href="#Element.insertAfter" class="dr-method"><span>Element.insertAfter()</span></a></li><li class="dr-lvl1"><a href="#Element.insertBefore" class="dr-method"><span>Element.insertBefore()</span></a></li><li class="dr-lvl1"><a href="#Element.isPointInside" class="dr-method"><span>Element.isPointInside()</span></a></li><li class="dr-lvl1"><a href="#Element.matrix" class="dr-property"><span>Element.matrix</span></a></li><li class="dr-lvl1"><a href="#Element.mousedown" class="dr-method"><span>Element.mousedown()</span></a></li><li class="dr-lvl1"><a href="#Element.mousemove" class="dr-method"><span>Element.mousemove()</span></a></li><li class="dr-lvl1"><a href="#Element.mouseout" class="dr-method"><span>Element.mouseout()</span></a></li><li class="dr-lvl1"><a href="#Element.mouseover" class="dr-method"><span>Element.mouseover()</span></a></li><li class="dr-lvl1"><a href="#Element.mouseup" class="dr-method"><span>Element.mouseup()</span></a></li><li class="dr-lvl1"><a href="#Element.next" class="dr-property"><span>Element.next</span></a></li><li class="dr-lvl1"><a href="#Element.node" class="dr-property"><span>Element.node</span></a></li><li class="dr-lvl1"><a href="#Element.onDragOver" class="dr-method"><span>Element.onDragOver()</span></a></li><li class="dr-lvl1"><a href="#Element.paper" class="dr-property"><span>Element.paper</span></a></li><li class="dr-lvl1"><a href="#Element.pause" class="dr-method"><span>Element.pause()</span></a></li><li class="dr-lvl1"><a href="#Element.prev" class="dr-property"><span>Element.prev</span></a></li><li class="dr-lvl1"><a href="#Element.raphael" class="dr-property"><span>Element.raphael</span></a></li><li class="dr-lvl1"><a href="#Element.remove" class="dr-method"><span>Element.remove()</span></a></li><li class="dr-lvl1"><a href="#Element.removeData" class="dr-method"><span>Element.removeData()</span></a></li><li class="dr-lvl1"><a href="#Element.resume" class="dr-method"><span>Element.resume()</span></a></li><li class="dr-lvl1"><a href="#Element.rotate" class="dr-method"><span>Element.rotate()</span></a></li><li class="dr-lvl1"><a href="#Element.scale" class="dr-method"><span>Element.scale()</span></a></li><li class="dr-lvl1"><a href="#Element.setTime" class="dr-method"><span>Element.setTime()</span></a></li><li class="dr-lvl1"><a href="#Element.show" class="dr-method"><span>Element.show()</span></a></li><li class="dr-lvl1"><a href="#Element.status" class="dr-method"><span>Element.status()</span></a></li><li class="dr-lvl1"><a href="#Element.stop" class="dr-method"><span>Element.stop()</span></a></li><li class="dr-lvl1"><a href="#Element.toBack" class="dr-method"><span>Element.toBack()</span></a></li><li class="dr-lvl1"><a href="#Element.toFront" class="dr-method"><span>Element.toFront()</span></a></li><li class="dr-lvl1"><a href="#Element.touchcancel" class="dr-method"><span>Element.touchcancel()</span></a></li><li class="dr-lvl1"><a href="#Element.touchend" class="dr-method"><span>Element.touchend()</span></a></li><li class="dr-lvl1"><a href="#Element.touchmove" class="dr-method"><span>Element.touchmove()</span></a></li><li class="dr-lvl1"><a href="#Element.touchstart" class="dr-method"><span>Element.touchstart()</span></a></li><li class="dr-lvl1"><a href="#Element.transform" class="dr-method"><span>Element.transform()</span></a></li><li class="dr-lvl1"><a href="#Element.translate" class="dr-method"><span>Element.translate()</span></a></li><li class="dr-lvl1"><a href="#Element.unclick" class="dr-method"><span>Element.unclick()</span></a></li><li class="dr-lvl1"><a href="#Element.undblclick" class="dr-method"><span>Element.undblclick()</span></a></li><li class="dr-lvl1"><a href="#Element.undrag" class="dr-method"><span>Element.undrag()</span></a></li><li class="dr-lvl1"><a href="#Element.unhover" class="dr-method"><span>Element.unhover()</span></a></li><li class="dr-lvl1"><a href="#Element.unmousedown" class="dr-method"><span>Element.unmousedown()</span></a></li><li class="dr-lvl1"><a href="#Element.unmousemove" class="dr-method"><span>Element.unmousemove()</span></a></li><li class="dr-lvl1"><a href="#Element.unmouseout" class="dr-method"><span>Element.unmouseout()</span></a></li><li class="dr-lvl1"><a href="#Element.unmouseover" class="dr-method"><span>Element.unmouseover()</span></a></li><li class="dr-lvl1"><a href="#Element.unmouseup" class="dr-method"><span>Element.unmouseup()</span></a></li><li class="dr-lvl1"><a href="#Element.untouchcancel" class="dr-method"><span>Element.untouchcancel()</span></a></li><li class="dr-lvl1"><a href="#Element.untouchend" class="dr-method"><span>Element.untouchend()</span></a></li><li class="dr-lvl1"><a href="#Element.untouchmove" class="dr-method"><span>Element.untouchmove()</span></a></li><li class="dr-lvl1"><a href="#Element.untouchstart" class="dr-method"><span>Element.untouchstart()</span></a></li><li class="dr-lvl0"><a href="#Matrix" class="{clas}"><span>Matrix</span></a></li><li class="dr-lvl1"><a href="#Matrix.add" class="dr-method"><span>Matrix.add()</span></a></li><li class="dr-lvl1"><a href="#Matrix.clone" class="dr-method"><span>Matrix.clone()</span></a></li><li class="dr-lvl1"><a href="#Matrix.invert" class="dr-method"><span>Matrix.invert()</span></a></li><li class="dr-lvl1"><a href="#Matrix.rotate" class="dr-method"><span>Matrix.rotate()</span></a></li><li class="dr-lvl1"><a href="#Matrix.scale" class="dr-method"><span>Matrix.scale()</span></a></li><li class="dr-lvl1"><a href="#Matrix.split" class="dr-method"><span>Matrix.split()</span></a></li><li class="dr-lvl1"><a href="#Matrix.toTransformString" class="dr-method"><span>Matrix.toTransformString()</span></a></li><li class="dr-lvl1"><a href="#Matrix.translate" class="dr-method"><span>Matrix.translate()</span></a></li><li class="dr-lvl1"><a href="#Matrix.x" class="dr-method"><span>Matrix.x()</span></a></li><li class="dr-lvl1"><a href="#Matrix.y" class="dr-method"><span>Matrix.y()</span></a></li><li class="dr-lvl0"><a href="#Paper" class="{clas}"><span>Paper</span></a></li><li class="dr-lvl1"><a href="#Paper.add" class="dr-method"><span>Paper.add()</span></a></li><li class="dr-lvl1"><a href="#Paper.bottom" class="dr-property"><span>Paper.bottom</span></a></li><li class="dr-lvl1"><a href="#Paper.ca" class="dr-property"><span>Paper.ca</span></a></li><li class="dr-lvl1"><a href="#Paper.circle" class="dr-method"><span>Paper.circle()</span></a></li><li class="dr-lvl1"><a href="#Paper.clear" class="dr-method"><span>Paper.clear()</span></a></li><li class="dr-lvl1"><a href="#Paper.customAttributes" class="dr-property"><span>Paper.customAttributes</span></a></li><li class="dr-lvl1"><a href="#Paper.ellipse" class="dr-method"><span>Paper.ellipse()</span></a></li><li class="dr-lvl1"><a href="#Paper.forEach" class="dr-method"><span>Paper.forEach()</span></a></li><li class="dr-lvl1"><a href="#Paper.getById" class="dr-method"><span>Paper.getById()</span></a></li><li class="dr-lvl1"><a href="#Paper.getElementByPoint" class="dr-method"><span>Paper.getElementByPoint()</span></a></li><li class="dr-lvl1"><a href="#Paper.getElementsByPoint" class="dr-method"><span>Paper.getElementsByPoint()</span></a></li><li class="dr-lvl1"><a href="#Paper.getFont" class="dr-method"><span>Paper.getFont()</span></a></li><li class="dr-lvl1"><a href="#Paper.image" class="dr-method"><span>Paper.image()</span></a></li><li class="dr-lvl1"><a href="#Paper.path" class="dr-method"><span>Paper.path()</span></a></li><li class="dr-lvl1"><a href="#Paper.print" class="dr-method"><span>Paper.print()</span></a></li><li class="dr-lvl1"><a href="#Paper.raphael" class="dr-property"><span>Paper.raphael</span></a></li><li class="dr-lvl1"><a href="#Paper.rect" class="dr-method"><span>Paper.rect()</span></a></li><li class="dr-lvl1"><a href="#Paper.remove" class="dr-method"><span>Paper.remove()</span></a></li><li class="dr-lvl1"><a href="#Paper.renderfix" class="dr-method"><span>Paper.renderfix()</span></a></li><li class="dr-lvl1"><a href="#Paper.safari" class="dr-method"><span>Paper.safari()</span></a></li><li class="dr-lvl1"><a href="#Paper.set" class="dr-method"><span>Paper.set()</span></a></li><li class="dr-lvl1"><a href="#Paper.setFinish" class="dr-method"><span>Paper.setFinish()</span></a></li><li class="dr-lvl1"><a href="#Paper.setSize" class="dr-method"><span>Paper.setSize()</span></a></li><li class="dr-lvl1"><a href="#Paper.setStart" class="dr-method"><span>Paper.setStart()</span></a></li><li class="dr-lvl1"><a href="#Paper.setViewBox" class="dr-method"><span>Paper.setViewBox()</span></a></li><li class="dr-lvl1"><a href="#Paper.text" class="dr-method"><span>Paper.text()</span></a></li><li class="dr-lvl1"><a href="#Paper.top" class="dr-property"><span>Paper.top</span></a></li><li class="dr-lvl0"><a href="#Raphael" class="dr-method"><span>Raphael()</span></a></li><li class="dr-lvl1"><a href="#Raphael.angle" class="dr-method"><span>Raphael.angle()</span></a></li><li class="dr-lvl1"><a href="#Raphael.animation" class="dr-method"><span>Raphael.animation()</span></a></li><li class="dr-lvl1"><a href="#Raphael.bezierBBox" class="dr-method"><span>Raphael.bezierBBox()</span></a></li><li class="dr-lvl1"><a href="#Raphael.color" class="dr-method"><span>Raphael.color()</span></a></li><li class="dr-lvl1"><a href="#Raphael.createUUID" class="dr-method"><span>Raphael.createUUID()</span></a></li><li class="dr-lvl1"><a href="#Raphael.deg" class="dr-method"><span>Raphael.deg()</span></a></li><li class="dr-lvl1"><a href="#Raphael.easing_formulas" class="dr-property"><span>Raphael.easing_formulas</span></a></li><li class="dr-lvl1"><a href="#Raphael.el" class="dr-property"><span>Raphael.el</span></a></li><li class="dr-lvl1"><a href="#Raphael.findDotsAtSegment" class="dr-method"><span>Raphael.findDotsAtSegment()</span></a></li><li class="dr-lvl1"><a href="#Raphael.fn" class="dr-property"><span>Raphael.fn</span></a></li><li class="dr-lvl1"><a href="#Raphael.format" class="dr-method"><span>Raphael.format()</span></a></li><li class="dr-lvl1"><a href="#Raphael.fullfill" class="dr-method"><span>Raphael.fullfill()</span></a></li><li class="dr-lvl1"><a href="#Raphael.getColor" class="dr-method"><span>Raphael.getColor()</span></a></li><li class="dr-lvl2"><a href="#Raphael.getColor.reset" class="dr-method"><span>Raphael.getColor.reset()</span></a></li><li class="dr-lvl1"><a href="#Raphael.getPointAtLength" class="dr-method"><span>Raphael.getPointAtLength()</span></a></li><li class="dr-lvl1"><a href="#Raphael.getRGB" class="dr-method"><span>Raphael.getRGB()</span></a></li><li class="dr-lvl1"><a href="#Raphael.getSubpath" class="dr-method"><span>Raphael.getSubpath()</span></a></li><li class="dr-lvl1"><a href="#Raphael.getTotalLength" class="dr-method"><span>Raphael.getTotalLength()</span></a></li><li class="dr-lvl1"><a href="#Raphael.hsb" class="dr-method"><span>Raphael.hsb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.hsb2rgb" class="dr-method"><span>Raphael.hsb2rgb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.hsl" class="dr-method"><span>Raphael.hsl()</span></a></li><li class="dr-lvl1"><a href="#Raphael.hsl2rgb" class="dr-method"><span>Raphael.hsl2rgb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.is" class="dr-method"><span>Raphael.is()</span></a></li><li class="dr-lvl1"><a href="#Raphael.isBBoxIntersect" class="dr-method"><span>Raphael.isBBoxIntersect()</span></a></li><li class="dr-lvl1"><a href="#Raphael.isPointInsideBBox" class="dr-method"><span>Raphael.isPointInsideBBox()</span></a></li><li class="dr-lvl1"><a href="#Raphael.isPointInsidePath" class="dr-method"><span>Raphael.isPointInsidePath()</span></a></li><li class="dr-lvl1"><a href="#Raphael.mapPath" class="dr-method"><span>Raphael.mapPath()</span></a></li><li class="dr-lvl1"><a href="#Raphael.matrix" class="dr-method"><span>Raphael.matrix()</span></a></li><li class="dr-lvl1"><a href="#Raphael.ninja" class="dr-method"><span>Raphael.ninja()</span></a></li><li class="dr-lvl1"><a href="#Raphael.parsePathString" class="dr-method"><span>Raphael.parsePathString()</span></a></li><li class="dr-lvl1"><a href="#Raphael.parseTransformString" class="dr-method"><span>Raphael.parseTransformString()</span></a></li><li class="dr-lvl1"><a href="#Raphael.path2curve" class="dr-method"><span>Raphael.path2curve()</span></a></li><li class="dr-lvl1"><a href="#Raphael.pathBBox" class="dr-method"><span>Raphael.pathBBox()</span></a></li><li class="dr-lvl1"><a href="#Raphael.pathIntersection" class="dr-method"><span>Raphael.pathIntersection()</span></a></li><li class="dr-lvl1"><a href="#Raphael.pathToRelative" class="dr-method"><span>Raphael.pathToRelative()</span></a></li><li class="dr-lvl1"><a href="#Raphael.rad" class="dr-method"><span>Raphael.rad()</span></a></li><li class="dr-lvl1"><a href="#Raphael.registerFont" class="dr-method"><span>Raphael.registerFont()</span></a></li><li class="dr-lvl1"><a href="#Raphael.rgb" class="dr-method"><span>Raphael.rgb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.rgb2hsb" class="dr-method"><span>Raphael.rgb2hsb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.rgb2hsl" class="dr-method"><span>Raphael.rgb2hsl()</span></a></li><li class="dr-lvl1"><a href="#Raphael.setWindow" class="dr-method"><span>Raphael.setWindow()</span></a></li><li class="dr-lvl1"><a href="#Raphael.snapTo" class="dr-method"><span>Raphael.snapTo()</span></a></li><li class="dr-lvl1"><a href="#Raphael.st" class="dr-property"><span>Raphael.st</span></a></li><li class="dr-lvl1"><a href="#Raphael.svg" class="dr-property"><span>Raphael.svg</span></a></li><li class="dr-lvl1"><a href="#Raphael.toMatrix" class="dr-method"><span>Raphael.toMatrix()</span></a></li><li class="dr-lvl1"><a href="#Raphael.transformPath" class="dr-method"><span>Raphael.transformPath()</span></a></li><li class="dr-lvl1"><a href="#Raphael.type" class="dr-property"><span>Raphael.type</span></a></li><li class="dr-lvl1"><a href="#Raphael.vml" class="dr-property"><span>Raphael.vml</span></a></li><li class="dr-lvl0"><a href="#Set" class="{clas}"><span>Set</span></a></li><li class="dr-lvl1"><a href="#Set.clear" class="dr-method"><span>Set.clear()</span></a></li><li class="dr-lvl1"><a href="#Set.exclude" class="dr-method"><span>Set.exclude()</span></a></li><li class="dr-lvl1"><a href="#Set.forEach" class="dr-method"><span>Set.forEach()</span></a></li><li class="dr-lvl1"><a href="#Set.pop" class="dr-method"><span>Set.pop()</span></a></li><li class="dr-lvl1"><a href="#Set.push" class="dr-method"><span>Set.push()</span></a></li><li class="dr-lvl1"><a href="#Set.splice" class="dr-method"><span>Set.splice()</span></a></li><li class="dr-lvl0"><a href="#eve" class="dr-method"><span>eve()</span></a></li><li class="dr-lvl1"><a href="#eve.listeners" class="dr-method"><span>eve.listeners()</span></a></li><li class="dr-lvl1"><a href="#eve.nt" class="dr-method"><span>eve.nt()</span></a></li><li class="dr-lvl1"><a href="#eve.off" class="dr-method"><span>eve.off()</span></a></li><li class="dr-lvl1"><a href="#eve.on" class="dr-method"><span>eve.on()</span></a></li><li class="dr-lvl1"><a href="#eve.once" class="dr-method"><span>eve.once()</span></a></li><li class="dr-lvl1"><a href="#eve.stop" class="dr-method"><span>eve.stop()</span></a></li><li class="dr-lvl1"><a href="#eve.unbind" class="dr-method"><span>eve.unbind()</span></a></li><li class="dr-lvl1"><a href="#eve.version" class="dr-property"><span>eve.version</span></a></li></ol><div class="dr-doc"><h1>Raphaël Reference</h1><div class="Animation-section"><h2 id="Animation" class="undefined"><i class="dr-trixie"> </i>Animation<a href="#Animation" title="Link to this section" class="dr-hash">⚓</a></h2>
|
|
4
|
+
<div class="extra" id="Animation-extra"></div></div><div class="Animation-delay-section"><h3 id="Animation.delay" class="dr-method"><i class="dr-trixie"> </i>Animation.delay(delay)<a href="#Animation.delay" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 4196 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L4196">➭</a></h3>
|
|
5
|
+
<div class="extra" id="Animation.delay-extra"></div></div><div class="dr-method"><p>Creates a copy of existing animation object with given delay.
|
|
6
|
+
</p>
|
|
7
|
+
<p class="header">Parameters
|
|
8
|
+
</p>
|
|
9
|
+
<dl class="dr-parameters"><dt class="dr-param">delay</dt>
|
|
10
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
11
|
+
<dd class="dr-description">number of ms to pass between animation start and actual animation</dd>
|
|
12
|
+
</dl>
|
|
13
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">new altered Animation object</span></p>
|
|
14
|
+
<pre class="javascript code"><code><b>var</b> anim<span class="s"> = </span>Raphael.animation({cx: <span class="d">10</span>, cy: <span class="d">20</span>}, <span class="d">2e3</span>);
|
|
15
|
+
circle1.animate(anim); <span class="c">// run the given animation immediately</span>
|
|
16
|
+
circle2.animate(anim.delay(<span class="d">500</span>)); <span class="c">// run the given animation after <span class="d">500</span> ms</span>
|
|
17
|
+
</code></pre>
|
|
18
|
+
</div><div class="Animation-repeat-section"><h3 id="Animation.repeat" class="dr-method"><i class="dr-trixie"> </i>Animation.repeat(repeat)<a href="#Animation.repeat" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 4214 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L4214">➭</a></h3>
|
|
19
|
+
<div class="extra" id="Animation.repeat-extra"></div></div><div class="dr-method"><p>Creates a copy of existing animation object with given repetition.
|
|
20
|
+
</p>
|
|
21
|
+
<p class="header">Parameters
|
|
22
|
+
</p>
|
|
23
|
+
<dl class="dr-parameters"><dt class="dr-param">repeat</dt>
|
|
24
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
25
|
+
<dd class="dr-description">number iterations of animation. For infinite animation pass <code>Infinity</code></dd>
|
|
26
|
+
</dl>
|
|
27
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">new altered Animation object</span></p>
|
|
28
|
+
</div><div class="Element-section"><h2 id="Element" class="undefined"><i class="dr-trixie"> </i>Element<a href="#Element" title="Link to this section" class="dr-hash">⚓</a></h2>
|
|
29
|
+
<div class="extra" id="Element-extra"></div></div><div class="Element-animate-section"><h3 id="Element.animate" class="dr-method"><i class="dr-trixie"> </i>Element.animate(…)<a href="#Element.animate" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 4484 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L4484">➭</a></h3>
|
|
30
|
+
<div class="extra" id="Element.animate-extra"></div></div><div class="dr-method"><p>Creates and starts animation for given element.
|
|
31
|
+
</p>
|
|
32
|
+
<p class="header">Parameters
|
|
33
|
+
</p>
|
|
34
|
+
<dl class="dr-parameters"><dt class="dr-param">params</dt>
|
|
35
|
+
<dd class="dr-type"><em class="dr-type-object">object</em></dd>
|
|
36
|
+
<dd class="dr-description">final attributes for the element, see also <a href="#Element.attr" class="dr-link">Element.attr</a></dd>
|
|
37
|
+
<dt class="dr-param">ms</dt>
|
|
38
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
39
|
+
<dd class="dr-description">number of milliseconds for animation to run</dd>
|
|
40
|
+
<dt class="dr-param optional">easing</dt>
|
|
41
|
+
<dd class="dr-optional">optional</dd>
|
|
42
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
43
|
+
<dd class="dr-description">easing type. Accept one of <a href="#Raphael.easing_formulas" class="dr-link">Raphael.easing_formulas</a> or CSS format: <code>cubic‐bezier(XX, XX, XX, XX)</code></dd>
|
|
44
|
+
<dt class="dr-param optional">callback</dt>
|
|
45
|
+
<dd class="dr-optional">optional</dd>
|
|
46
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
47
|
+
<dd class="dr-description">callback function. Will be called at the end of animation.</dd>
|
|
48
|
+
</dl>
|
|
49
|
+
<p>or
|
|
50
|
+
</p>
|
|
51
|
+
<dl class="dr-parameters"><dt class="dr-param">animation</dt>
|
|
52
|
+
<dd class="dr-type"><em class="dr-type-object">object</em></dd>
|
|
53
|
+
<dd class="dr-description">animation object, see <a href="#Raphael.animation" class="dr-link">Raphael.animation</a></dd>
|
|
54
|
+
</dl>
|
|
55
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">original element</span></p>
|
|
56
|
+
</div><div class="Element-animateWith-section"><h3 id="Element.animateWith" class="dr-method"><i class="dr-trixie"> </i>Element.animateWith(…)<a href="#Element.animateWith" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 4087 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L4087">➭</a></h3>
|
|
57
|
+
<div class="extra" id="Element.animateWith-extra"></div></div><div class="dr-method"><p>Acts similar to <a href="#Element.animate" class="dr-link">Element.animate</a>, but ensure that given animation runs in sync with another given element.
|
|
58
|
+
</p>
|
|
59
|
+
<p class="header">Parameters
|
|
60
|
+
</p>
|
|
61
|
+
<dl class="dr-parameters"><dt class="dr-param">el</dt>
|
|
62
|
+
<dd class="dr-type"><em class="dr-type-object">object</em></dd>
|
|
63
|
+
<dd class="dr-description">element to sync with</dd>
|
|
64
|
+
<dt class="dr-param">anim</dt>
|
|
65
|
+
<dd class="dr-type"><em class="dr-type-object">object</em></dd>
|
|
66
|
+
<dd class="dr-description">animation to sync with</dd>
|
|
67
|
+
<dt class="dr-param optional">params</dt>
|
|
68
|
+
<dd class="dr-optional">optional</dd>
|
|
69
|
+
<dd class="dr-type"><em class="dr-type-object">object</em></dd>
|
|
70
|
+
<dd class="dr-description">final attributes for the element, see also <a href="#Element.attr" class="dr-link">Element.attr</a></dd>
|
|
71
|
+
<dt class="dr-param optional">ms</dt>
|
|
72
|
+
<dd class="dr-optional">optional</dd>
|
|
73
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
74
|
+
<dd class="dr-description">number of milliseconds for animation to run</dd>
|
|
75
|
+
<dt class="dr-param optional">easing</dt>
|
|
76
|
+
<dd class="dr-optional">optional</dd>
|
|
77
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
78
|
+
<dd class="dr-description">easing type. Accept on of <a href="#Raphael.easing_formulas" class="dr-link">Raphael.easing_formulas</a> or CSS format: <code>cubic‐bezier(XX, XX, XX, XX)</code></dd>
|
|
79
|
+
<dt class="dr-param optional">callback</dt>
|
|
80
|
+
<dd class="dr-optional">optional</dd>
|
|
81
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
82
|
+
<dd class="dr-description">callback function. Will be called at the end of animation.</dd>
|
|
83
|
+
</dl>
|
|
84
|
+
<p>or
|
|
85
|
+
</p>
|
|
86
|
+
<dl class="dr-parameters"><dt class="dr-param">element</dt>
|
|
87
|
+
<dd class="dr-type"><em class="dr-type-object">object</em></dd>
|
|
88
|
+
<dd class="dr-description">element to sync with</dd>
|
|
89
|
+
<dt class="dr-param">anim</dt>
|
|
90
|
+
<dd class="dr-type"><em class="dr-type-object">object</em></dd>
|
|
91
|
+
<dd class="dr-description">animation to sync with</dd>
|
|
92
|
+
<dt class="dr-param optional">animation</dt>
|
|
93
|
+
<dd class="dr-optional">optional</dd>
|
|
94
|
+
<dd class="dr-type"><em class="dr-type-object">object</em></dd>
|
|
95
|
+
<dd class="dr-description">animation object, see <a href="#Raphael.animation" class="dr-link">Raphael.animation</a></dd>
|
|
96
|
+
</dl>
|
|
97
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">original element</span></p>
|
|
98
|
+
</div><div class="Element-attr-section"><h3 id="Element.attr" class="dr-method"><i class="dr-trixie"> </i>Element.attr(…)<a href="#Element.attr" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 988 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.svg.js#L988">➭</a></h3>
|
|
99
|
+
<div class="extra" id="Element.attr-extra"></div></div><div class="dr-method"><p>Sets the attributes of the element.
|
|
100
|
+
</p>
|
|
101
|
+
<p class="header">Parameters
|
|
102
|
+
</p>
|
|
103
|
+
<dl class="dr-parameters"><dt class="dr-param">attrName</dt>
|
|
104
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
105
|
+
<dd class="dr-description">attribute’s name</dd>
|
|
106
|
+
<dt class="dr-param">value</dt>
|
|
107
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
108
|
+
<dd class="dr-description">value</dd>
|
|
109
|
+
</dl>
|
|
110
|
+
<p>or
|
|
111
|
+
</p>
|
|
112
|
+
<dl class="dr-parameters"><dt class="dr-param">params</dt>
|
|
113
|
+
<dd class="dr-type"><em class="dr-type-object">object</em></dd>
|
|
114
|
+
<dd class="dr-description">object of name/value pairs</dd>
|
|
115
|
+
</dl>
|
|
116
|
+
<p>or
|
|
117
|
+
</p>
|
|
118
|
+
<dl class="dr-parameters"><dt class="dr-param">attrName</dt>
|
|
119
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
120
|
+
<dd class="dr-description">attribute’s name</dd>
|
|
121
|
+
</dl>
|
|
122
|
+
<p>or
|
|
123
|
+
</p>
|
|
124
|
+
<dl class="dr-parameters"><dt class="dr-param">attrNames</dt>
|
|
125
|
+
<dd class="dr-type"><em class="dr-type-array">array</em></dd>
|
|
126
|
+
<dd class="dr-description">in this case method returns array of current values for given attribute names</dd>
|
|
127
|
+
</dl>
|
|
128
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a> if attrsName <em class="amp">&</em> value or params are passed in.</span></p>
|
|
129
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-...">...</em> <span class="dr-description">value of the attribute if only attrsName is passed in.</span></p>
|
|
130
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">array of values of the attribute if attrsNames is passed in.</span></p>
|
|
131
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">object of attributes if nothing is passed in.</span></p>
|
|
132
|
+
<p class="header">Possible parameters
|
|
133
|
+
</p>
|
|
134
|
+
<p>Please refer to the <a href="http://www.w3.org/TR/SVG/" title="The W3C Recommendation for the SVG language describes these properties in detail.">SVG specification</a> for an explanation of these parameters.</p>
|
|
135
|
+
<ol class="dr-json"><li><span class="dr-json-key">arrow-end</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">arrowhead on the end of the path. The format for string is <code><type>[-<width>[-<length>]]</code>. Possible types: <code>classic</code>, <code>block</code>, <code>open</code>, <code>oval</code>, <code>diamond</code>, <code>none</code>, width: <code>wide</code>, <code>narrow</code>, <code>midium</code>, length: <code>long</code>, <code>short</code>, <code>midium</code>.</span>
|
|
136
|
+
<li><span class="dr-json-key">clip-rect</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">comma or space separated values: x, y, width and height</span>
|
|
137
|
+
<li><span class="dr-json-key">cursor</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">CSS type of the cursor</span>
|
|
138
|
+
<li><span class="dr-json-key">cx</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">the x-axis coordinate of the center of the circle, or ellipse</span>
|
|
139
|
+
<li><span class="dr-json-key">cy</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">the y-axis coordinate of the center of the circle, or ellipse</span>
|
|
140
|
+
<li><span class="dr-json-key">fill</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">colour, gradient or image</span>
|
|
141
|
+
<li><span class="dr-json-key">fill-opacity</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description"> </span>
|
|
142
|
+
<li><span class="dr-json-key">font</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description"> </span>
|
|
143
|
+
<li><span class="dr-json-key">font-family</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description"> </span>
|
|
144
|
+
<li><span class="dr-json-key">font-size</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">font size in pixels</span>
|
|
145
|
+
<li><span class="dr-json-key">font-weight</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description"> </span>
|
|
146
|
+
<li><span class="dr-json-key">height</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description"> </span>
|
|
147
|
+
<li><span class="dr-json-key">href</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">URL, if specified element behaves as hyperlink</span>
|
|
148
|
+
<li><span class="dr-json-key">opacity</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description"> </span>
|
|
149
|
+
<li><span class="dr-json-key">path</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">SVG path string format</span>
|
|
150
|
+
<li><span class="dr-json-key">r</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">radius of the circle, ellipse or rounded corner on the rect</span>
|
|
151
|
+
<li><span class="dr-json-key">rx</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">horisontal radius of the ellipse</span>
|
|
152
|
+
<li><span class="dr-json-key">ry</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">vertical radius of the ellipse</span>
|
|
153
|
+
<li><span class="dr-json-key">src</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">image URL, only works for <a href="#Element.image" class="dr-link">Element.image</a> element</span>
|
|
154
|
+
<li><span class="dr-json-key">stroke</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">stroke colour</span>
|
|
155
|
+
<li><span class="dr-json-key">stroke-dasharray</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">[“”, “<code>-</code>”, “<code>.</code>”, “<code>-.</code>”, “<code>-..</code>”, “<code>. </code>”, “<code>- </code>”, “<code>--</code>”, “<code>- .</code>”, “<code>--.</code>”, “<code>--..</code>”]</span>
|
|
156
|
+
<li><span class="dr-json-key">stroke-linecap</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">[“<code>butt</code>”, “<code>square</code>”, “<code>round</code>”]</span>
|
|
157
|
+
<li><span class="dr-json-key">stroke-linejoin</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">[“<code>bevel</code>”, “<code>round</code>”, “<code>miter</code>”]</span>
|
|
158
|
+
<li><span class="dr-json-key">stroke-miterlimit</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description"> </span>
|
|
159
|
+
<li><span class="dr-json-key">stroke-opacity</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description"> </span>
|
|
160
|
+
<li><span class="dr-json-key">stroke-width</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">stroke width in pixels, default is '1'</span>
|
|
161
|
+
<li><span class="dr-json-key">target</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">used with href</span>
|
|
162
|
+
<li><span class="dr-json-key">text</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">contents of the text element. Use <code>\n</code> for multiline text</span>
|
|
163
|
+
<li><span class="dr-json-key">text-anchor</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">[“<code>start</code>”, “<code>middle</code>”, “<code>end</code>”], default is “<code>middle</code>”</span>
|
|
164
|
+
<li><span class="dr-json-key">title</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">will create tooltip with a given text</span>
|
|
165
|
+
<li><span class="dr-json-key">transform</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">see <a href="#Element.transform" class="dr-link">Element.transform</a></span>
|
|
166
|
+
<li><span class="dr-json-key">width</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description"> </span>
|
|
167
|
+
<li><span class="dr-json-key">x</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description"> </span>
|
|
168
|
+
<li><span class="dr-json-key">y</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description"> </span>
|
|
169
|
+
</ol>
|
|
170
|
+
<p class="header">Gradients
|
|
171
|
+
<p>Linear gradient format: “<code>‹angle›-‹colour›[-‹colour›[:‹offset›]]*-‹colour›</code>”, example: “<code>90-#fff-#000</code>” – 90°
|
|
172
|
+
gradient from white to black or “<code>0-#fff-#f00:20-#000</code>” – 0° gradient from white via red (at 20%) to black.
|
|
173
|
+
</p>
|
|
174
|
+
<p>radial gradient: “<code>r[(‹fx›, ‹fy›)]‹colour›[-‹colour›[:‹offset›]]*-‹colour›</code>”, example: “<code>r#fff-#000</code>” –
|
|
175
|
+
gradient from white to black or “<code>r(0.25, 0.75)#fff-#000</code>” – gradient from white to black with focus point
|
|
176
|
+
at 0.25, 0.75. Focus point coordinates are in 0..1 range. Radial gradients can only be applied to circles and ellipses.
|
|
177
|
+
</p>
|
|
178
|
+
<p class="header">Path String
|
|
179
|
+
</p>
|
|
180
|
+
<p>Please refer to <a href="http://www.w3.org/TR/SVG/paths.html#PathData" title="Details of a path’s data attribute’s format are described in the SVG specification.">SVG documentation regarding path string</a>. Raphaël fully supports it.</p>
|
|
181
|
+
<p class="header">Colour Parsing
|
|
182
|
+
</p>
|
|
183
|
+
<ul>
|
|
184
|
+
<li>Colour name (“<code>red</code>”, “<code>green</code>”, “<code>cornflowerblue</code>”, etc)</li>
|
|
185
|
+
<li>#••• — shortened HTML colour: (“<code>#000</code>”, “<code>#fc0</code>”, etc)</li>
|
|
186
|
+
<li>#•••••• — full length HTML colour: (“<code>#000000</code>”, “<code>#bd2300</code>”)</li>
|
|
187
|
+
<li>rgb(•••, •••, •••) — red, green and blue channels’ values: (“<code>rgb(200, 100, 0)</code>”)</li>
|
|
188
|
+
<li>rgb(•••%, •••%, •••%) — same as above, but in %: (“<code>rgb(100%, 175%, 0%)</code>”)</li>
|
|
189
|
+
<li>rgba(•••, •••, •••, •••) — red, green and blue channels’ values: (“<code>rgba(200, 100, 0, .5)</code>”)</li>
|
|
190
|
+
<li>rgba(•••%, •••%, •••%, •••%) — same as above, but in %: (“<code>rgba(100%, 175%, 0%, 50%)</code>”)</li>
|
|
191
|
+
<li>hsb(•••, •••, •••) — hue, saturation and brightness values: (“<code>hsb(0.5, 0.25, 1)</code>”)</li>
|
|
192
|
+
<li>hsb(•••%, •••%, •••%) — same as above, but in %</li>
|
|
193
|
+
<li>hsba(•••, •••, •••, •••) — same as above, but with opacity</li>
|
|
194
|
+
<li>hsl(•••, •••, •••) — almost the same as hsb, see <a href="http://en.wikipedia.org/wiki/HSL_and_HSV" title="HSL and HSV - Wikipedia, the free encyclopedia">Wikipedia page</a></li>
|
|
195
|
+
<li>hsl(•••%, •••%, •••%) — same as above, but in %</li>
|
|
196
|
+
<li>hsla(•••, •••, •••, •••) — same as above, but with opacity</li>
|
|
197
|
+
<li>Optionally for hsb and hsl you could specify hue as a degree: “<code>hsl(240deg, 1, .5)</code>” or, if you want to go fancy, “<code>hsl(240°, 1, .5)</code>”</li>
|
|
198
|
+
</ul>
|
|
199
|
+
</div><div class="Element-click-section"><h3 id="Element.click" class="dr-method"><i class="dr-trixie"> </i>Element.click(handler)<a href="#Element.click" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2798 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2798">➭</a></h3>
|
|
200
|
+
<div class="extra" id="Element.click-extra"></div></div><div class="dr-method"><p>Adds event handler for click for the element.
|
|
201
|
+
</p>
|
|
202
|
+
<p class="header">Parameters
|
|
203
|
+
</p>
|
|
204
|
+
<dl class="dr-parameters"><dt class="dr-param">handler</dt>
|
|
205
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
206
|
+
<dd class="dr-description">handler for the event</dd>
|
|
207
|
+
</dl>
|
|
208
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
|
|
209
|
+
</div><div class="Element-clone-section"><h3 id="Element.clone" class="dr-method"><i class="dr-trixie"> </i>Element.clone()<a href="#Element.clone" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3633 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L3633">➭</a></h3>
|
|
210
|
+
<div class="extra" id="Element.clone-extra"></div></div><div class="dr-method"><p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">clone of a given element</span></p>
|
|
211
|
+
</div><div class="Element-data-section"><h3 id="Element.data" class="dr-method"><i class="dr-trixie"> </i>Element.data(key, [value])<a href="#Element.data" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3043 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L3043">➭</a></h3>
|
|
212
|
+
<div class="extra" id="Element.data-extra"></div></div><div class="dr-method"><p>Adds or retrieves given value asociated with given key.
|
|
213
|
+
See also <a href="#Element.removeData" class="dr-link">Element.removeData</a>
|
|
214
|
+
</p>
|
|
215
|
+
<p class="header">Parameters
|
|
216
|
+
</p>
|
|
217
|
+
<dl class="dr-parameters"><dt class="dr-param">key</dt>
|
|
218
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
219
|
+
<dd class="dr-description">key to store data</dd>
|
|
220
|
+
<dt class="dr-param optional">value</dt>
|
|
221
|
+
<dd class="dr-optional">optional</dd>
|
|
222
|
+
<dd class="dr-type"><em class="dr-type-any">any</em></dd>
|
|
223
|
+
<dd class="dr-description">value to store</dd>
|
|
224
|
+
</dl>
|
|
225
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
|
|
226
|
+
<p>or, if value is not specified:
|
|
227
|
+
</p>
|
|
228
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-any">any</em> <span class="dr-description">value</span></p>
|
|
229
|
+
<p class="header">Usage
|
|
230
|
+
</p>
|
|
231
|
+
<pre class="javascript code"><code><b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, i < <span class="d">5</span>, i++) {
|
|
232
|
+
paper.circle(<span class="d">10</span><span class="s"> + </span><span class="d">15</span><span class="s"> * </span>i, <span class="d">10</span>, <span class="d">10</span>)
|
|
233
|
+
.attr({fill: <i>"#<span class="d">000</span>"</i>})
|
|
234
|
+
.data(<i>"i"</i>, i)
|
|
235
|
+
.click(<b>function</b> () {
|
|
236
|
+
alert(<b>this</b>.data(<i>"i"</i>));
|
|
237
|
+
});
|
|
238
|
+
}
|
|
239
|
+
</code></pre>
|
|
240
|
+
</div><div class="Element-dblclick-section"><h3 id="Element.dblclick" class="dr-method"><i class="dr-trixie"> </i>Element.dblclick(handler)<a href="#Element.dblclick" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2817 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2817">➭</a></h3>
|
|
241
|
+
<div class="extra" id="Element.dblclick-extra"></div></div><div class="dr-method"><p>Adds event handler for double click for the element.
|
|
242
|
+
</p>
|
|
243
|
+
<p class="header">Parameters
|
|
244
|
+
</p>
|
|
245
|
+
<dl class="dr-parameters"><dt class="dr-param">handler</dt>
|
|
246
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
247
|
+
<dd class="dr-description">handler for the event</dd>
|
|
248
|
+
</dl>
|
|
249
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
|
|
250
|
+
</div><div class="Element-drag-section"><h3 id="Element.drag" class="dr-method"><i class="dr-trixie"> </i>Element.drag(onmove, onstart, onend, [mcontext], [scontext], [econtext])<a href="#Element.drag" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3136 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L3136">➭</a></h3>
|
|
251
|
+
<div class="extra" id="Element.drag-extra"></div></div><div class="dr-method"><p>Adds event handlers for drag of the element.
|
|
252
|
+
</p>
|
|
253
|
+
<p class="header">Parameters
|
|
254
|
+
</p>
|
|
255
|
+
<dl class="dr-parameters"><dt class="dr-param">onmove</dt>
|
|
256
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
257
|
+
<dd class="dr-description">handler for moving</dd>
|
|
258
|
+
<dt class="dr-param">onstart</dt>
|
|
259
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
260
|
+
<dd class="dr-description">handler for drag start</dd>
|
|
261
|
+
<dt class="dr-param">onend</dt>
|
|
262
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
263
|
+
<dd class="dr-description">handler for drag end</dd>
|
|
264
|
+
<dt class="dr-param optional">mcontext</dt>
|
|
265
|
+
<dd class="dr-optional">optional</dd>
|
|
266
|
+
<dd class="dr-type"><em class="dr-type-object">object</em></dd>
|
|
267
|
+
<dd class="dr-description">context for moving handler</dd>
|
|
268
|
+
<dt class="dr-param optional">scontext</dt>
|
|
269
|
+
<dd class="dr-optional">optional</dd>
|
|
270
|
+
<dd class="dr-type"><em class="dr-type-object">object</em></dd>
|
|
271
|
+
<dd class="dr-description">context for drag start handler</dd>
|
|
272
|
+
<dt class="dr-param optional">econtext</dt>
|
|
273
|
+
<dd class="dr-optional">optional</dd>
|
|
274
|
+
<dd class="dr-type"><em class="dr-type-object">object</em></dd>
|
|
275
|
+
<dd class="dr-description">context for drag end handler</dd>
|
|
276
|
+
</dl>
|
|
277
|
+
<p>Additionaly following <code>drag</code> events will be triggered: <code>drag.start.<id></code> on start,
|
|
278
|
+
<code>drag.end.<id></code> on end and <code>drag.move.<id></code> on every move. When element will be dragged over another element
|
|
279
|
+
<code>drag.over.<id></code> will be fired as well.
|
|
280
|
+
</p>
|
|
281
|
+
<p>Start event and start handler will be called in specified context or in context of the element with following parameters:
|
|
282
|
+
</p>
|
|
283
|
+
<ol class="dr-json"><li><span class="dr-json-key">x</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x position of the mouse</span>
|
|
284
|
+
<li><span class="dr-json-key">y</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y position of the mouse</span>
|
|
285
|
+
<li><span class="dr-json-key">event</span><span class="dr-type"><em class="dr-type-object">object</em></span><span class="dr-json-description">DOM event object</span>
|
|
286
|
+
</ol>
|
|
287
|
+
<p>Move event and move handler will be called in specified context or in context of the element with following parameters:
|
|
288
|
+
</p>
|
|
289
|
+
<ol class="dr-json"><li><span class="dr-json-key">dx</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">shift by x from the start point</span>
|
|
290
|
+
<li><span class="dr-json-key">dy</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">shift by y from the start point</span>
|
|
291
|
+
<li><span class="dr-json-key">x</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x position of the mouse</span>
|
|
292
|
+
<li><span class="dr-json-key">y</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y position of the mouse</span>
|
|
293
|
+
<li><span class="dr-json-key">event</span><span class="dr-type"><em class="dr-type-object">object</em></span><span class="dr-json-description">DOM event object</span>
|
|
294
|
+
</ol>
|
|
295
|
+
<p>End event and end handler will be called in specified context or in context of the element with following parameters:
|
|
296
|
+
</p>
|
|
297
|
+
<ol class="dr-json"><li><span class="dr-json-key">event</span><span class="dr-type"><em class="dr-type-object">object</em></span><span class="dr-json-description">DOM event object</span>
|
|
298
|
+
</ol>
|
|
299
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
|
|
300
|
+
</div><div class="Element-getBBox-section"><h3 id="Element.getBBox" class="dr-method"><i class="dr-trixie"> </i>Element.getBBox(isWithoutTransform)<a href="#Element.getBBox" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3601 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L3601">➭</a></h3>
|
|
301
|
+
<div class="extra" id="Element.getBBox-extra"></div></div><div class="dr-method"><p>Return bounding box for a given element
|
|
302
|
+
</p>
|
|
303
|
+
<p class="header">Parameters
|
|
304
|
+
</p>
|
|
305
|
+
<dl class="dr-parameters"><dt class="dr-param">isWithoutTransform</dt>
|
|
306
|
+
<dd class="dr-type"><em class="dr-type-boolean">boolean</em></dd>
|
|
307
|
+
<dd class="dr-description">flag, <code>true</code> if you want to have bounding box before transformations. Default is <code>false</code>.</dd>
|
|
308
|
+
</dl>
|
|
309
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Bounding box object:</span></p>
|
|
310
|
+
<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">x:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">top left corner x</span>
|
|
311
|
+
<li><span class="dr-json-key">y:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">top left corner y</span>
|
|
312
|
+
<li><span class="dr-json-key">x2:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">bottom right corner x</span>
|
|
313
|
+
<li><span class="dr-json-key">y2:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">bottom right corner y</span>
|
|
314
|
+
<li><span class="dr-json-key">width:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">width</span>
|
|
315
|
+
<li><span class="dr-json-key">height:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">height</span>
|
|
316
|
+
</ol></li><li>}</li></ol>
|
|
317
|
+
</div><div class="Element-getPointAtLength-section"><h3 id="Element.getPointAtLength" class="dr-method"><i class="dr-trixie"> </i>Element.getPointAtLength(length)<a href="#Element.getPointAtLength" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3828 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L3828">➭</a></h3>
|
|
318
|
+
<div class="extra" id="Element.getPointAtLength-extra"></div></div><div class="dr-method"><p>Return coordinates of the point located at the given length on the given path. Only works for element of “path” type.
|
|
319
|
+
</p>
|
|
320
|
+
<p class="header">Parameters
|
|
321
|
+
</p>
|
|
322
|
+
<dl class="dr-parameters"><dt class="dr-param">length</dt>
|
|
323
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
324
|
+
<dd class="dr-description"> </dd>
|
|
325
|
+
</dl>
|
|
326
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">representation of the point:</span></p>
|
|
327
|
+
<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">x:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x coordinate</span>
|
|
328
|
+
<li><span class="dr-json-key">y:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y coordinate</span>
|
|
329
|
+
<li><span class="dr-json-key">alpha:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">angle of derivative</span>
|
|
330
|
+
</ol></li><li>}</li></ol>
|
|
331
|
+
</div><div class="Element-getSubpath-section"><h3 id="Element.getSubpath" class="dr-method"><i class="dr-trixie"> </i>Element.getSubpath(from, to)<a href="#Element.getSubpath" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3845 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L3845">➭</a></h3>
|
|
332
|
+
<div class="extra" id="Element.getSubpath-extra"></div></div><div class="dr-method"><p>Return subpath of a given element from given length to given length. Only works for element of “path” type.
|
|
333
|
+
</p>
|
|
334
|
+
<p class="header">Parameters
|
|
335
|
+
</p>
|
|
336
|
+
<dl class="dr-parameters"><dt class="dr-param">from</dt>
|
|
337
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
338
|
+
<dd class="dr-description">position of the start of the segment</dd>
|
|
339
|
+
<dt class="dr-param">to</dt>
|
|
340
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
341
|
+
<dd class="dr-description">position of the end of the segment</dd>
|
|
342
|
+
</dl>
|
|
343
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">pathstring for the segment</span></p>
|
|
344
|
+
</div><div class="Element-getTotalLength-section"><h3 id="Element.getTotalLength" class="dr-method"><i class="dr-trixie"> </i>Element.getTotalLength()<a href="#Element.getTotalLength" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3804 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L3804">➭</a></h3>
|
|
345
|
+
<div class="extra" id="Element.getTotalLength-extra"></div></div><div class="dr-method"><p>Returns length of the path in pixels. Only works for element of “path” type.
|
|
346
|
+
</p>
|
|
347
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">length.</span></p>
|
|
348
|
+
</div><div class="Element-glow-section"><h3 id="Element.glow" class="dr-method"><i class="dr-trixie"> </i>Element.glow([glow])<a href="#Element.glow" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3662 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L3662">➭</a></h3>
|
|
349
|
+
<div class="extra" id="Element.glow-extra"></div></div><div class="dr-method"><p>Return set of elements that create glow-like effect around given element. See <a href="#Paper.set" class="dr-link">Paper.set</a>.
|
|
350
|
+
</p>
|
|
351
|
+
<p>Note: Glow is not connected to the element. If you change element attributes it won’t adjust itself.
|
|
352
|
+
</p>
|
|
353
|
+
<p class="header">Parameters
|
|
354
|
+
</p>
|
|
355
|
+
<dl class="dr-parameters"><dt class="dr-param optional">glow</dt>
|
|
356
|
+
<dd class="dr-optional">optional</dd>
|
|
357
|
+
<dd class="dr-type"><em class="dr-type-object">object</em></dd>
|
|
358
|
+
<dd class="dr-description">parameters object with all properties optional:</dd>
|
|
359
|
+
</dl>
|
|
360
|
+
<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">width</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">size of the glow, default is <code>10</code></span>
|
|
361
|
+
<li><span class="dr-json-key">fill</span><span class="dr-type"><em class="dr-type-boolean">boolean</em></span><span class="dr-json-description">will it be filled, default is <code>false</code></span>
|
|
362
|
+
<li><span class="dr-json-key">opacity</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">opacity, default is <code>0.5</code></span>
|
|
363
|
+
<li><span class="dr-json-key">offsetx</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">horizontal offset, default is <code>0</code></span>
|
|
364
|
+
<li><span class="dr-json-key">offsety</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">vertical offset, default is <code>0</code></span>
|
|
365
|
+
<li><span class="dr-json-key">color</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">glow colour, default is <code>black</code></span>
|
|
366
|
+
</ol></li><li>}</li></ol>
|
|
367
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Paper.set" class="dr-link">Paper.set</a> of elements that represents glow</span></p>
|
|
368
|
+
</div><div class="Element-hide-section"><h3 id="Element.hide" class="dr-method"><i class="dr-trixie"> </i>Element.hide()<a href="#Element.hide" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 849 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.svg.js#L849">➭</a></h3>
|
|
369
|
+
<div class="extra" id="Element.hide-extra"></div></div><div class="dr-method"><p>Makes element invisible. See <a href="#Element.show" class="dr-link">Element.show</a>.
|
|
370
|
+
</p>
|
|
371
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
|
|
372
|
+
</div><div class="Element-hover-section"><h3 id="Element.hover" class="dr-method"><i class="dr-trixie"> </i>Element.hover(f_in, f_out, [icontext], [ocontext])<a href="#Element.hover" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3089 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L3089">➭</a></h3>
|
|
373
|
+
<div class="extra" id="Element.hover-extra"></div></div><div class="dr-method"><p>Adds event handlers for hover for the element.
|
|
374
|
+
</p>
|
|
375
|
+
<p class="header">Parameters
|
|
376
|
+
</p>
|
|
377
|
+
<dl class="dr-parameters"><dt class="dr-param">f_in</dt>
|
|
378
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
379
|
+
<dd class="dr-description">handler for hover in</dd>
|
|
380
|
+
<dt class="dr-param">f_out</dt>
|
|
381
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
382
|
+
<dd class="dr-description">handler for hover out</dd>
|
|
383
|
+
<dt class="dr-param optional">icontext</dt>
|
|
384
|
+
<dd class="dr-optional">optional</dd>
|
|
385
|
+
<dd class="dr-type"><em class="dr-type-object">object</em></dd>
|
|
386
|
+
<dd class="dr-description">context for hover in handler</dd>
|
|
387
|
+
<dt class="dr-param optional">ocontext</dt>
|
|
388
|
+
<dd class="dr-optional">optional</dd>
|
|
389
|
+
<dd class="dr-type"><em class="dr-type-object">object</em></dd>
|
|
390
|
+
<dd class="dr-description">context for hover out handler</dd>
|
|
391
|
+
</dl>
|
|
392
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
|
|
393
|
+
</div><div class="Element-id-section"><h3 id="Element.id" class="dr-property"><i class="dr-trixie"> </i>Element.id<a href="#Element.id" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 632 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.svg.js#L632">➭</a></h3>
|
|
394
|
+
<div class="extra" id="Element.id-extra"></div></div><div class="dr-property"><em class="dr-type dr-type-number">number</em><p>Unique id of the element. Especially usesful when you want to listen to events of the element,
|
|
395
|
+
because all events are fired in format <code><module>.<action>.<id></code>. Also useful for <a href="#Paper.getById" class="dr-link">Paper.getById</a> method.
|
|
396
|
+
</p>
|
|
397
|
+
</div><div class="Element-insertAfter-section"><h3 id="Element.insertAfter" class="dr-method"><i class="dr-trixie"> </i>Element.insertAfter()<a href="#Element.insertAfter" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1096 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.svg.js#L1096">➭</a></h3>
|
|
398
|
+
<div class="extra" id="Element.insertAfter-extra"></div></div><div class="dr-method"><p>Inserts current object after the given one.
|
|
399
|
+
</p>
|
|
400
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
|
|
401
|
+
</div><div class="Element-insertBefore-section"><h3 id="Element.insertBefore" class="dr-method"><i class="dr-trixie"> </i>Element.insertBefore()<a href="#Element.insertBefore" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1116 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.svg.js#L1116">➭</a></h3>
|
|
402
|
+
<div class="extra" id="Element.insertBefore-extra"></div></div><div class="dr-method"><p>Inserts current object before the given one.
|
|
403
|
+
</p>
|
|
404
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
|
|
405
|
+
</div><div class="Element-isPointInside-section"><h3 id="Element.isPointInside" class="dr-method"><i class="dr-trixie"> </i>Element.isPointInside(x, y)<a href="#Element.isPointInside" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3578 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L3578">➭</a></h3>
|
|
406
|
+
<div class="extra" id="Element.isPointInside-extra"></div></div><div class="dr-method"><p>Determine if given point is inside this element’s shape
|
|
407
|
+
</p>
|
|
408
|
+
<p class="header">Parameters
|
|
409
|
+
</p>
|
|
410
|
+
<dl class="dr-parameters"><dt class="dr-param">x</dt>
|
|
411
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
412
|
+
<dd class="dr-description">x coordinate of the point</dd>
|
|
413
|
+
<dt class="dr-param">y</dt>
|
|
414
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
415
|
+
<dd class="dr-description">y coordinate of the point</dd>
|
|
416
|
+
</dl>
|
|
417
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-boolean">boolean</em> <span class="dr-description"><code>true</code> if point inside the shape</span></p>
|
|
418
|
+
</div><div class="Element-matrix-section"><h3 id="Element.matrix" class="dr-property"><i class="dr-trixie"> </i>Element.matrix<a href="#Element.matrix" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2253 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2253">➭</a></h3>
|
|
419
|
+
<div class="extra" id="Element.matrix-extra"></div></div><div class="dr-property"><em class="dr-type dr-type-object">object</em><p>Keeps <a href="#Matrix" class="dr-link">Matrix</a> object, which represents element transformation
|
|
420
|
+
</p>
|
|
421
|
+
</div><div class="Element-mousedown-section"><h3 id="Element.mousedown" class="dr-method"><i class="dr-trixie"> </i>Element.mousedown(handler)<a href="#Element.mousedown" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2836 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2836">➭</a></h3>
|
|
422
|
+
<div class="extra" id="Element.mousedown-extra"></div></div><div class="dr-method"><p>Adds event handler for mousedown for the element.
|
|
423
|
+
</p>
|
|
424
|
+
<p class="header">Parameters
|
|
425
|
+
</p>
|
|
426
|
+
<dl class="dr-parameters"><dt class="dr-param">handler</dt>
|
|
427
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
428
|
+
<dd class="dr-description">handler for the event</dd>
|
|
429
|
+
</dl>
|
|
430
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
|
|
431
|
+
</div><div class="Element-mousemove-section"><h3 id="Element.mousemove" class="dr-method"><i class="dr-trixie"> </i>Element.mousemove(handler)<a href="#Element.mousemove" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2855 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2855">➭</a></h3>
|
|
432
|
+
<div class="extra" id="Element.mousemove-extra"></div></div><div class="dr-method"><p>Adds event handler for mousemove for the element.
|
|
433
|
+
</p>
|
|
434
|
+
<p class="header">Parameters
|
|
435
|
+
</p>
|
|
436
|
+
<dl class="dr-parameters"><dt class="dr-param">handler</dt>
|
|
437
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
438
|
+
<dd class="dr-description">handler for the event</dd>
|
|
439
|
+
</dl>
|
|
440
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
|
|
441
|
+
</div><div class="Element-mouseout-section"><h3 id="Element.mouseout" class="dr-method"><i class="dr-trixie"> </i>Element.mouseout(handler)<a href="#Element.mouseout" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2874 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2874">➭</a></h3>
|
|
442
|
+
<div class="extra" id="Element.mouseout-extra"></div></div><div class="dr-method"><p>Adds event handler for mouseout for the element.
|
|
443
|
+
</p>
|
|
444
|
+
<p class="header">Parameters
|
|
445
|
+
</p>
|
|
446
|
+
<dl class="dr-parameters"><dt class="dr-param">handler</dt>
|
|
447
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
448
|
+
<dd class="dr-description">handler for the event</dd>
|
|
449
|
+
</dl>
|
|
450
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
|
|
451
|
+
</div><div class="Element-mouseover-section"><h3 id="Element.mouseover" class="dr-method"><i class="dr-trixie"> </i>Element.mouseover(handler)<a href="#Element.mouseover" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2893 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2893">➭</a></h3>
|
|
452
|
+
<div class="extra" id="Element.mouseover-extra"></div></div><div class="dr-method"><p>Adds event handler for mouseover for the element.
|
|
453
|
+
</p>
|
|
454
|
+
<p class="header">Parameters
|
|
455
|
+
</p>
|
|
456
|
+
<dl class="dr-parameters"><dt class="dr-param">handler</dt>
|
|
457
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
458
|
+
<dd class="dr-description">handler for the event</dd>
|
|
459
|
+
</dl>
|
|
460
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
|
|
461
|
+
</div><div class="Element-mouseup-section"><h3 id="Element.mouseup" class="dr-method"><i class="dr-trixie"> </i>Element.mouseup(handler)<a href="#Element.mouseup" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2912 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2912">➭</a></h3>
|
|
462
|
+
<div class="extra" id="Element.mouseup-extra"></div></div><div class="dr-method"><p>Adds event handler for mouseup for the element.
|
|
463
|
+
</p>
|
|
464
|
+
<p class="header">Parameters
|
|
465
|
+
</p>
|
|
466
|
+
<dl class="dr-parameters"><dt class="dr-param">handler</dt>
|
|
467
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
468
|
+
<dd class="dr-description">handler for the event</dd>
|
|
469
|
+
</dl>
|
|
470
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
|
|
471
|
+
</div><div class="Element-next-section"><h3 id="Element.next" class="dr-property"><i class="dr-trixie"> </i>Element.next<a href="#Element.next" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 675 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.svg.js#L675">➭</a></h3>
|
|
472
|
+
<div class="extra" id="Element.next-extra"></div></div><div class="dr-property"><em class="dr-type dr-type-object">object</em><p>Reference to the next element in the hierarchy.
|
|
473
|
+
</p>
|
|
474
|
+
</div><div class="Element-node-section"><h3 id="Element.node" class="dr-property"><i class="dr-trixie"> </i>Element.node<a href="#Element.node" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 611 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.svg.js#L611">➭</a></h3>
|
|
475
|
+
<div class="extra" id="Element.node-extra"></div></div><div class="dr-property"><em class="dr-type dr-type-object">object</em><p>Gives you a reference to the DOM object, so you can assign event handlers or just mess around.
|
|
476
|
+
Note: Don’t mess with it.
|
|
477
|
+
</p>
|
|
478
|
+
<p class="header">Usage
|
|
479
|
+
</p>
|
|
480
|
+
<pre class="javascript code"><code><span class="c">// draw a circle at coordinate <span class="d">10</span>,<span class="d">10</span> <b>with</b> radius of <span class="d">10</span></span>
|
|
481
|
+
<b>var</b> c<span class="s"> = </span>paper.circle(<span class="d">10</span>, <span class="d">10</span>, <span class="d">10</span>);
|
|
482
|
+
c.node.onclick<span class="s"> = </span><b>function</b> () {
|
|
483
|
+
c.attr(<i>"fill"</i>, <i>"red"</i>);
|
|
484
|
+
};
|
|
485
|
+
</code></pre>
|
|
486
|
+
</div><div class="Element-onDragOver-section"><h3 id="Element.onDragOver" class="dr-method"><i class="dr-trixie"> </i>Element.onDragOver(f)<a href="#Element.onDragOver" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3164 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L3164">➭</a></h3>
|
|
487
|
+
<div class="extra" id="Element.onDragOver-extra"></div></div><div class="dr-method"><p>Shortcut for assigning event handler for <code>drag.over.<id></code> event, where id is id of the element (see <a href="#Element.id" class="dr-link">Element.id</a>).
|
|
488
|
+
</p>
|
|
489
|
+
<p class="header">Parameters
|
|
490
|
+
</p>
|
|
491
|
+
<dl class="dr-parameters"><dt class="dr-param">f</dt>
|
|
492
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
493
|
+
<dd class="dr-description">handler for event, first argument would be the element you are dragging over</dd>
|
|
494
|
+
</dl>
|
|
495
|
+
</div><div class="Element-paper-section"><h3 id="Element.paper" class="dr-property"><i class="dr-trixie"> </i>Element.paper<a href="#Element.paper" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 648 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.svg.js#L648">➭</a></h3>
|
|
496
|
+
<div class="extra" id="Element.paper-extra"></div></div><div class="dr-property"><em class="dr-type dr-type-object">object</em><p>Internal reference to “paper” where object drawn. Mainly for use in plugins and element extensions.
|
|
497
|
+
</p>
|
|
498
|
+
<p class="header">Usage
|
|
499
|
+
</p>
|
|
500
|
+
<pre class="javascript code"><code>Raphael.el.cross<span class="s"> = </span><b>function</b> () {
|
|
501
|
+
<b>this</b>.attr({fill: <i>"red"</i>});
|
|
502
|
+
<b>this</b>.paper.path(<i>"M10,10L50,50M50,10L10,<span class="d">50</span>"</i>)
|
|
503
|
+
.attr({stroke: <i>"red"</i>});
|
|
504
|
+
}
|
|
505
|
+
</code></pre>
|
|
506
|
+
</div><div class="Element-pause-section"><h3 id="Element.pause" class="dr-method"><i class="dr-trixie"> </i>Element.pause([anim])<a href="#Element.pause" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 4577 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L4577">➭</a></h3>
|
|
507
|
+
<div class="extra" id="Element.pause-extra"></div></div><div class="dr-method"><p>Stops animation of the element with ability to resume it later on.
|
|
508
|
+
</p>
|
|
509
|
+
<p class="header">Parameters
|
|
510
|
+
</p>
|
|
511
|
+
<dl class="dr-parameters"><dt class="dr-param optional">anim</dt>
|
|
512
|
+
<dd class="dr-optional">optional</dd>
|
|
513
|
+
<dd class="dr-type"><em class="dr-type-object">object</em></dd>
|
|
514
|
+
<dd class="dr-description">animation object</dd>
|
|
515
|
+
</dl>
|
|
516
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">original element</span></p>
|
|
517
|
+
</div><div class="Element-prev-section"><h3 id="Element.prev" class="dr-property"><i class="dr-trixie"> </i>Element.prev<a href="#Element.prev" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 666 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.svg.js#L666">➭</a></h3>
|
|
518
|
+
<div class="extra" id="Element.prev-extra"></div></div><div class="dr-property"><em class="dr-type dr-type-object">object</em><p>Reference to the previous element in the hierarchy.
|
|
519
|
+
</p>
|
|
520
|
+
</div><div class="Element-raphael-section"><h3 id="Element.raphael" class="dr-property"><i class="dr-trixie"> </i>Element.raphael<a href="#Element.raphael" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 624 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.svg.js#L624">➭</a></h3>
|
|
521
|
+
<div class="extra" id="Element.raphael-extra"></div></div><div class="dr-property"><em class="dr-type dr-type-object">object</em><p>Internal reference to <a href="#Raphael" class="dr-link">Raphael</a> object. In case it is not available.
|
|
522
|
+
</p>
|
|
523
|
+
<p class="header">Usage
|
|
524
|
+
</p>
|
|
525
|
+
<pre class="javascript code"><code>Raphael.el.red<span class="s"> = </span><b>function</b> () {
|
|
526
|
+
<b>var</b> hsb<span class="s"> = </span><b>this</b>.paper.raphael.rgb2hsb(<b>this</b>.attr(<i>"fill"</i>));
|
|
527
|
+
hsb.h<span class="s"> = </span><span class="d">1</span>;
|
|
528
|
+
<b>this</b>.attr({fill: <b>this</b>.paper.raphael.hsb2rgb(hsb).hex});
|
|
529
|
+
}
|
|
530
|
+
</code></pre>
|
|
531
|
+
</div><div class="Element-remove-section"><h3 id="Element.remove" class="dr-method"><i class="dr-trixie"> </i>Element.remove()<a href="#Element.remove" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 870 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.svg.js#L870">➭</a></h3>
|
|
532
|
+
<div class="extra" id="Element.remove-extra"></div></div><div class="dr-method"><p>Removes element form the paper.
|
|
533
|
+
</p>
|
|
534
|
+
</div><div class="Element-removeData-section"><h3 id="Element.removeData" class="dr-method"><i class="dr-trixie"> </i>Element.removeData([key])<a href="#Element.removeData" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3069 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L3069">➭</a></h3>
|
|
535
|
+
<div class="extra" id="Element.removeData-extra"></div></div><div class="dr-method"><p>Removes value associated with an element by given key.
|
|
536
|
+
If key is not provided, removes all the data of the element.
|
|
537
|
+
</p>
|
|
538
|
+
<p class="header">Parameters
|
|
539
|
+
</p>
|
|
540
|
+
<dl class="dr-parameters"><dt class="dr-param optional">key</dt>
|
|
541
|
+
<dd class="dr-optional">optional</dd>
|
|
542
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
543
|
+
<dd class="dr-description">key</dd>
|
|
544
|
+
</dl>
|
|
545
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
|
|
546
|
+
</div><div class="Element-resume-section"><h3 id="Element.resume" class="dr-method"><i class="dr-trixie"> </i>Element.resume([anim])<a href="#Element.resume" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 4597 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L4597">➭</a></h3>
|
|
547
|
+
<div class="extra" id="Element.resume-extra"></div></div><div class="dr-method"><p>Resumes animation if it was paused with <a href="#Element.pause" class="dr-link">Element.pause</a> method.
|
|
548
|
+
</p>
|
|
549
|
+
<p class="header">Parameters
|
|
550
|
+
</p>
|
|
551
|
+
<dl class="dr-parameters"><dt class="dr-param optional">anim</dt>
|
|
552
|
+
<dd class="dr-optional">optional</dd>
|
|
553
|
+
<dd class="dr-type"><em class="dr-type-object">object</em></dd>
|
|
554
|
+
<dd class="dr-description">animation object</dd>
|
|
555
|
+
</dl>
|
|
556
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">original element</span></p>
|
|
557
|
+
</div><div class="Element-rotate-section"><h3 id="Element.rotate" class="dr-method"><i class="dr-trixie"> </i>Element.rotate(deg, [cx], [cy])<a href="#Element.rotate" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 708 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.svg.js#L708">➭</a></h3>
|
|
558
|
+
<div class="extra" id="Element.rotate-extra"></div></div><div class="dr-method"><p>Deprecated! Use <a href="#Element.transform" class="dr-link">Element.transform</a> instead.
|
|
559
|
+
Adds rotation by given angle around given point to the list of
|
|
560
|
+
transformations of the element.
|
|
561
|
+
</p>
|
|
562
|
+
<p class="header">Parameters
|
|
563
|
+
</p>
|
|
564
|
+
<dl class="dr-parameters"><dt class="dr-param">deg</dt>
|
|
565
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
566
|
+
<dd class="dr-description">angle in degrees</dd>
|
|
567
|
+
<dt class="dr-param optional">cx</dt>
|
|
568
|
+
<dd class="dr-optional">optional</dd>
|
|
569
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
570
|
+
<dd class="dr-description">x coordinate of the centre of rotation</dd>
|
|
571
|
+
<dt class="dr-param optional">cy</dt>
|
|
572
|
+
<dd class="dr-optional">optional</dd>
|
|
573
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
574
|
+
<dd class="dr-description">y coordinate of the centre of rotation</dd>
|
|
575
|
+
</dl>
|
|
576
|
+
<p>If cx <em class="amp">&</em> cy aren’t specified centre of the shape is used as a point of rotation.
|
|
577
|
+
</p>
|
|
578
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
|
|
579
|
+
</div><div class="Element-scale-section"><h3 id="Element.scale" class="dr-method"><i class="dr-trixie"> </i>Element.scale(sx, sy, [cx], [cy])<a href="#Element.scale" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 742 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.svg.js#L742">➭</a></h3>
|
|
580
|
+
<div class="extra" id="Element.scale-extra"></div></div><div class="dr-method"><p>Deprecated! Use <a href="#Element.transform" class="dr-link">Element.transform</a> instead.
|
|
581
|
+
Adds scale by given amount relative to given point to the list of
|
|
582
|
+
transformations of the element.
|
|
583
|
+
</p>
|
|
584
|
+
<p class="header">Parameters
|
|
585
|
+
</p>
|
|
586
|
+
<dl class="dr-parameters"><dt class="dr-param">sx</dt>
|
|
587
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
588
|
+
<dd class="dr-description">horisontal scale amount</dd>
|
|
589
|
+
<dt class="dr-param">sy</dt>
|
|
590
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
591
|
+
<dd class="dr-description">vertical scale amount</dd>
|
|
592
|
+
<dt class="dr-param optional">cx</dt>
|
|
593
|
+
<dd class="dr-optional">optional</dd>
|
|
594
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
595
|
+
<dd class="dr-description">x coordinate of the centre of scale</dd>
|
|
596
|
+
<dt class="dr-param optional">cy</dt>
|
|
597
|
+
<dd class="dr-optional">optional</dd>
|
|
598
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
599
|
+
<dd class="dr-description">y coordinate of the centre of scale</dd>
|
|
600
|
+
</dl>
|
|
601
|
+
<p>If cx <em class="amp">&</em> cy aren’t specified centre of the shape is used instead.
|
|
602
|
+
</p>
|
|
603
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
|
|
604
|
+
</div><div class="Element-setTime-section"><h3 id="Element.setTime" class="dr-method"><i class="dr-trixie"> </i>Element.setTime(anim, value)<a href="#Element.setTime" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 4510 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L4510">➭</a></h3>
|
|
605
|
+
<div class="extra" id="Element.setTime-extra"></div></div><div class="dr-method"><p>Sets the status of animation of the element in milliseconds. Similar to <a href="#Element.status" class="dr-link">Element.status</a> method.
|
|
606
|
+
</p>
|
|
607
|
+
<p class="header">Parameters
|
|
608
|
+
</p>
|
|
609
|
+
<dl class="dr-parameters"><dt class="dr-param">anim</dt>
|
|
610
|
+
<dd class="dr-type"><em class="dr-type-object">object</em></dd>
|
|
611
|
+
<dd class="dr-description">animation object</dd>
|
|
612
|
+
<dt class="dr-param">value</dt>
|
|
613
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
614
|
+
<dd class="dr-description">number of milliseconds from the beginning of the animation</dd>
|
|
615
|
+
</dl>
|
|
616
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">original element if <code>value</code> is specified</span></p>
|
|
617
|
+
<p>Note, that during animation following events are triggered:
|
|
618
|
+
</p>
|
|
619
|
+
<p>On each animation frame event <code>anim.frame.<id></code>, on start <code>anim.start.<id></code> and on end <code>anim.finish.<id></code>.
|
|
620
|
+
</p>
|
|
621
|
+
</div><div class="Element-show-section"><h3 id="Element.show" class="dr-method"><i class="dr-trixie"> </i>Element.show()<a href="#Element.show" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 860 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.svg.js#L860">➭</a></h3>
|
|
622
|
+
<div class="extra" id="Element.show-extra"></div></div><div class="dr-method"><p>Makes element visible. See <a href="#Element.hide" class="dr-link">Element.hide</a>.
|
|
623
|
+
</p>
|
|
624
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
|
|
625
|
+
</div><div class="Element-status-section"><h3 id="Element.status" class="dr-method"><i class="dr-trixie"> </i>Element.status([anim], [value])<a href="#Element.status" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 4537 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L4537">➭</a></h3>
|
|
626
|
+
<div class="extra" id="Element.status-extra"></div></div><div class="dr-method"><p>Gets or sets the status of animation of the element.
|
|
627
|
+
</p>
|
|
628
|
+
<p class="header">Parameters
|
|
629
|
+
</p>
|
|
630
|
+
<dl class="dr-parameters"><dt class="dr-param optional">anim</dt>
|
|
631
|
+
<dd class="dr-optional">optional</dd>
|
|
632
|
+
<dd class="dr-type"><em class="dr-type-object">object</em></dd>
|
|
633
|
+
<dd class="dr-description">animation object</dd>
|
|
634
|
+
<dt class="dr-param optional">value</dt>
|
|
635
|
+
<dd class="dr-optional">optional</dd>
|
|
636
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
637
|
+
<dd class="dr-description">0 – 1. If specified, method works like a setter and sets the status of a given animation to the value. This will cause animation to jump to the given position.</dd>
|
|
638
|
+
</dl>
|
|
639
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">status</span></p>
|
|
640
|
+
<p>or
|
|
641
|
+
</p>
|
|
642
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">status if <code>anim</code> is not specified. Array of objects in format:</span></p>
|
|
643
|
+
<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">anim:</span><span class="dr-type"><em class="dr-type-object">object</em></span><span class="dr-json-description">animation object</span>
|
|
644
|
+
<li><span class="dr-json-key">status:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">status</span>
|
|
645
|
+
</ol></li><li>}</li></ol>
|
|
646
|
+
<p>or
|
|
647
|
+
</p>
|
|
648
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">original element if <code>value</code> is specified</span></p>
|
|
649
|
+
</div><div class="Element-stop-section"><h3 id="Element.stop" class="dr-method"><i class="dr-trixie"> </i>Element.stop([anim])<a href="#Element.stop" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 4619 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L4619">➭</a></h3>
|
|
650
|
+
<div class="extra" id="Element.stop-extra"></div></div><div class="dr-method"><p>Stops animation of the element.
|
|
651
|
+
</p>
|
|
652
|
+
<p class="header">Parameters
|
|
653
|
+
</p>
|
|
654
|
+
<dl class="dr-parameters"><dt class="dr-param optional">anim</dt>
|
|
655
|
+
<dd class="dr-optional">optional</dd>
|
|
656
|
+
<dd class="dr-type"><em class="dr-type-object">object</em></dd>
|
|
657
|
+
<dd class="dr-description">animation object</dd>
|
|
658
|
+
</dl>
|
|
659
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">original element</span></p>
|
|
660
|
+
</div><div class="Element-toBack-section"><h3 id="Element.toBack" class="dr-method"><i class="dr-trixie"> </i>Element.toBack()<a href="#Element.toBack" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1075 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.svg.js#L1075">➭</a></h3>
|
|
661
|
+
<div class="extra" id="Element.toBack-extra"></div></div><div class="dr-method"><p>Moves the element so it is the furthest from the viewer’s eyes, behind other elements.
|
|
662
|
+
</p>
|
|
663
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
|
|
664
|
+
</div><div class="Element-toFront-section"><h3 id="Element.toFront" class="dr-method"><i class="dr-trixie"> </i>Element.toFront()<a href="#Element.toFront" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1055 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.svg.js#L1055">➭</a></h3>
|
|
665
|
+
<div class="extra" id="Element.toFront-extra"></div></div><div class="dr-method"><p>Moves the element so it is the closest to the viewer’s eyes, on top of other elements.
|
|
666
|
+
</p>
|
|
667
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
|
|
668
|
+
</div><div class="Element-touchcancel-section"><h3 id="Element.touchcancel" class="dr-method"><i class="dr-trixie"> </i>Element.touchcancel(handler)<a href="#Element.touchcancel" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2988 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2988">➭</a></h3>
|
|
669
|
+
<div class="extra" id="Element.touchcancel-extra"></div></div><div class="dr-method"><p>Adds event handler for touchcancel for the element.
|
|
670
|
+
</p>
|
|
671
|
+
<p class="header">Parameters
|
|
672
|
+
</p>
|
|
673
|
+
<dl class="dr-parameters"><dt class="dr-param">handler</dt>
|
|
674
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
675
|
+
<dd class="dr-description">handler for the event</dd>
|
|
676
|
+
</dl>
|
|
677
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
|
|
678
|
+
</div><div class="Element-touchend-section"><h3 id="Element.touchend" class="dr-method"><i class="dr-trixie"> </i>Element.touchend(handler)<a href="#Element.touchend" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2969 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2969">➭</a></h3>
|
|
679
|
+
<div class="extra" id="Element.touchend-extra"></div></div><div class="dr-method"><p>Adds event handler for touchend for the element.
|
|
680
|
+
</p>
|
|
681
|
+
<p class="header">Parameters
|
|
682
|
+
</p>
|
|
683
|
+
<dl class="dr-parameters"><dt class="dr-param">handler</dt>
|
|
684
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
685
|
+
<dd class="dr-description">handler for the event</dd>
|
|
686
|
+
</dl>
|
|
687
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
|
|
688
|
+
</div><div class="Element-touchmove-section"><h3 id="Element.touchmove" class="dr-method"><i class="dr-trixie"> </i>Element.touchmove(handler)<a href="#Element.touchmove" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2950 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2950">➭</a></h3>
|
|
689
|
+
<div class="extra" id="Element.touchmove-extra"></div></div><div class="dr-method"><p>Adds event handler for touchmove for the element.
|
|
690
|
+
</p>
|
|
691
|
+
<p class="header">Parameters
|
|
692
|
+
</p>
|
|
693
|
+
<dl class="dr-parameters"><dt class="dr-param">handler</dt>
|
|
694
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
695
|
+
<dd class="dr-description">handler for the event</dd>
|
|
696
|
+
</dl>
|
|
697
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
|
|
698
|
+
</div><div class="Element-touchstart-section"><h3 id="Element.touchstart" class="dr-method"><i class="dr-trixie"> </i>Element.touchstart(handler)<a href="#Element.touchstart" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2931 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2931">➭</a></h3>
|
|
699
|
+
<div class="extra" id="Element.touchstart-extra"></div></div><div class="dr-method"><p>Adds event handler for touchstart for the element.
|
|
700
|
+
</p>
|
|
701
|
+
<p class="header">Parameters
|
|
702
|
+
</p>
|
|
703
|
+
<dl class="dr-parameters"><dt class="dr-param">handler</dt>
|
|
704
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
705
|
+
<dd class="dr-description">handler for the event</dd>
|
|
706
|
+
</dl>
|
|
707
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
|
|
708
|
+
</div><div class="Element-transform-section"><h3 id="Element.transform" class="dr-method"><i class="dr-trixie"> </i>Element.transform([tstr])<a href="#Element.transform" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 824 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.svg.js#L824">➭</a></h3>
|
|
709
|
+
<div class="extra" id="Element.transform-extra"></div></div><div class="dr-method"><p>Adds transformation to the element which is separate to other attributes,
|
|
710
|
+
i.e. translation doesn’t change <code>x</code> or <code>y</code> of the rectange. The format
|
|
711
|
+
of transformation string is similar to the path string syntax:
|
|
712
|
+
</p>
|
|
713
|
+
<pre class="javascript code"><code><i>"t100,100r30,<span class="d">100</span>,100s2,<span class="d">2</span>,<span class="d">100</span>,100r45s1<span class="d">.5</span>"</i>
|
|
714
|
+
</code></pre>
|
|
715
|
+
<p>Each letter is a command. There are four commands: <code>t</code> is for translate, <code>r</code> is for rotate, <code>s</code> is for
|
|
716
|
+
scale and <code>m</code> is for matrix.
|
|
717
|
+
</p>
|
|
718
|
+
<p>There are also alternative “absolute” translation, rotation and scale: <code>T</code>, <code>R</code> and <code>S</code>. They will not take previous transformation into account. For example, <code>...T100,0</code> will always move element 100 px horisontally, while <code>...t100,0</code> could move it vertically if there is <code>r90</code> before. Just compare results of <code>r90t100,0</code> and <code>r90T100,0</code>.
|
|
719
|
+
</p>
|
|
720
|
+
<p>So, the example line above could be read like “translate by 100, 100; rotate 30° around 100, 100; scale twice around 100, 100;
|
|
721
|
+
rotate 45° around centre; scale 1.5 times relative to centre”. As you can see rotate and scale commands have origin
|
|
722
|
+
coordinates as optional parameters, the default is the centre point of the element.
|
|
723
|
+
Matrix accepts six parameters.
|
|
724
|
+
</p>
|
|
725
|
+
<p class="header">Usage
|
|
726
|
+
</p>
|
|
727
|
+
<pre class="javascript code"><code><b>var</b> el<span class="s"> = </span>paper.rect(<span class="d">10</span>, <span class="d">20</span>, <span class="d">300</span>, <span class="d">200</span>);
|
|
728
|
+
<span class="c">// translate <span class="d">100</span>, <span class="d">100</span>, rotate <span class="d">45</span>°, translate -<span class="d">100</span>, <span class="d">0</span></span>
|
|
729
|
+
el.transform(<i>"t100,100r45t-<span class="d">100</span>,<span class="d">0</span>"</i>);
|
|
730
|
+
<span class="c">// <b>if</b> you want you can append or prepend transformations</span>
|
|
731
|
+
el.transform(<i>"...t50,<span class="d">50</span>"</i>);
|
|
732
|
+
el.transform(<i>"s2..."</i>);
|
|
733
|
+
<span class="c">// or even wrap</span>
|
|
734
|
+
el.transform(<i>"t50,<span class="d">50</span>...t-<span class="d">50</span>-<span class="d">50</span>"</i>);
|
|
735
|
+
<span class="c">// to reset transformation call method <b>with</b> empty string</span>
|
|
736
|
+
el.transform(<i>""</i>);
|
|
737
|
+
<span class="c">// to get current value call it without parameters</span>
|
|
738
|
+
console.log(el.transform());
|
|
739
|
+
</code></pre>
|
|
740
|
+
<p class="header">Parameters
|
|
741
|
+
</p>
|
|
742
|
+
<dl class="dr-parameters"><dt class="dr-param optional">tstr</dt>
|
|
743
|
+
<dd class="dr-optional">optional</dd>
|
|
744
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
745
|
+
<dd class="dr-description">transformation string</dd>
|
|
746
|
+
</dl>
|
|
747
|
+
<p>If tstr isn’t specified
|
|
748
|
+
</p>
|
|
749
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">current transformation string</span></p>
|
|
750
|
+
<p>else
|
|
751
|
+
</p>
|
|
752
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
|
|
753
|
+
</div><div class="Element-translate-section"><h3 id="Element.translate" class="dr-method"><i class="dr-trixie"> </i>Element.translate(dx, dy)<a href="#Element.translate" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 774 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.svg.js#L774">➭</a></h3>
|
|
754
|
+
<div class="extra" id="Element.translate-extra"></div></div><div class="dr-method"><p>Deprecated! Use <a href="#Element.transform" class="dr-link">Element.transform</a> instead.
|
|
755
|
+
Adds translation by given amount to the list of transformations of the element.
|
|
756
|
+
</p>
|
|
757
|
+
<p class="header">Parameters
|
|
758
|
+
</p>
|
|
759
|
+
<dl class="dr-parameters"><dt class="dr-param">dx</dt>
|
|
760
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
761
|
+
<dd class="dr-description">horisontal shift</dd>
|
|
762
|
+
<dt class="dr-param">dy</dt>
|
|
763
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
764
|
+
<dd class="dr-description">vertical shift</dd>
|
|
765
|
+
</dl>
|
|
766
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
|
|
767
|
+
</div><div class="Element-unclick-section"><h3 id="Element.unclick" class="dr-method"><i class="dr-trixie"> </i>Element.unclick(handler)<a href="#Element.unclick" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2807 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2807">➭</a></h3>
|
|
768
|
+
<div class="extra" id="Element.unclick-extra"></div></div><div class="dr-method"><p>Removes event handler for click for the element.
|
|
769
|
+
</p>
|
|
770
|
+
<p class="header">Parameters
|
|
771
|
+
</p>
|
|
772
|
+
<dl class="dr-parameters"><dt class="dr-param">handler</dt>
|
|
773
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
774
|
+
<dd class="dr-description">handler for the event</dd>
|
|
775
|
+
</dl>
|
|
776
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
|
|
777
|
+
</div><div class="Element-undblclick-section"><h3 id="Element.undblclick" class="dr-method"><i class="dr-trixie"> </i>Element.undblclick(handler)<a href="#Element.undblclick" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2826 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2826">➭</a></h3>
|
|
778
|
+
<div class="extra" id="Element.undblclick-extra"></div></div><div class="dr-method"><p>Removes event handler for double click for the element.
|
|
779
|
+
</p>
|
|
780
|
+
<p class="header">Parameters
|
|
781
|
+
</p>
|
|
782
|
+
<dl class="dr-parameters"><dt class="dr-param">handler</dt>
|
|
783
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
784
|
+
<dd class="dr-description">handler for the event</dd>
|
|
785
|
+
</dl>
|
|
786
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
|
|
787
|
+
</div><div class="Element-undrag-section"><h3 id="Element.undrag" class="dr-method"><i class="dr-trixie"> </i>Element.undrag()<a href="#Element.undrag" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3173 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L3173">➭</a></h3>
|
|
788
|
+
<div class="extra" id="Element.undrag-extra"></div></div><div class="dr-method"><p>Removes all drag event handlers from given element.
|
|
789
|
+
</p>
|
|
790
|
+
</div><div class="Element-unhover-section"><h3 id="Element.unhover" class="dr-method"><i class="dr-trixie"> </i>Element.unhover(f_in, f_out)<a href="#Element.unhover" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3102 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L3102">➭</a></h3>
|
|
791
|
+
<div class="extra" id="Element.unhover-extra"></div></div><div class="dr-method"><p>Removes event handlers for hover for the element.
|
|
792
|
+
</p>
|
|
793
|
+
<p class="header">Parameters
|
|
794
|
+
</p>
|
|
795
|
+
<dl class="dr-parameters"><dt class="dr-param">f_in</dt>
|
|
796
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
797
|
+
<dd class="dr-description">handler for hover in</dd>
|
|
798
|
+
<dt class="dr-param">f_out</dt>
|
|
799
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
800
|
+
<dd class="dr-description">handler for hover out</dd>
|
|
801
|
+
</dl>
|
|
802
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
|
|
803
|
+
</div><div class="Element-unmousedown-section"><h3 id="Element.unmousedown" class="dr-method"><i class="dr-trixie"> </i>Element.unmousedown(handler)<a href="#Element.unmousedown" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2845 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2845">➭</a></h3>
|
|
804
|
+
<div class="extra" id="Element.unmousedown-extra"></div></div><div class="dr-method"><p>Removes event handler for mousedown for the element.
|
|
805
|
+
</p>
|
|
806
|
+
<p class="header">Parameters
|
|
807
|
+
</p>
|
|
808
|
+
<dl class="dr-parameters"><dt class="dr-param">handler</dt>
|
|
809
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
810
|
+
<dd class="dr-description">handler for the event</dd>
|
|
811
|
+
</dl>
|
|
812
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
|
|
813
|
+
</div><div class="Element-unmousemove-section"><h3 id="Element.unmousemove" class="dr-method"><i class="dr-trixie"> </i>Element.unmousemove(handler)<a href="#Element.unmousemove" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2864 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2864">➭</a></h3>
|
|
814
|
+
<div class="extra" id="Element.unmousemove-extra"></div></div><div class="dr-method"><p>Removes event handler for mousemove for the element.
|
|
815
|
+
</p>
|
|
816
|
+
<p class="header">Parameters
|
|
817
|
+
</p>
|
|
818
|
+
<dl class="dr-parameters"><dt class="dr-param">handler</dt>
|
|
819
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
820
|
+
<dd class="dr-description">handler for the event</dd>
|
|
821
|
+
</dl>
|
|
822
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
|
|
823
|
+
</div><div class="Element-unmouseout-section"><h3 id="Element.unmouseout" class="dr-method"><i class="dr-trixie"> </i>Element.unmouseout(handler)<a href="#Element.unmouseout" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2883 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2883">➭</a></h3>
|
|
824
|
+
<div class="extra" id="Element.unmouseout-extra"></div></div><div class="dr-method"><p>Removes event handler for mouseout for the element.
|
|
825
|
+
</p>
|
|
826
|
+
<p class="header">Parameters
|
|
827
|
+
</p>
|
|
828
|
+
<dl class="dr-parameters"><dt class="dr-param">handler</dt>
|
|
829
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
830
|
+
<dd class="dr-description">handler for the event</dd>
|
|
831
|
+
</dl>
|
|
832
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
|
|
833
|
+
</div><div class="Element-unmouseover-section"><h3 id="Element.unmouseover" class="dr-method"><i class="dr-trixie"> </i>Element.unmouseover(handler)<a href="#Element.unmouseover" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2902 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2902">➭</a></h3>
|
|
834
|
+
<div class="extra" id="Element.unmouseover-extra"></div></div><div class="dr-method"><p>Removes event handler for mouseover for the element.
|
|
835
|
+
</p>
|
|
836
|
+
<p class="header">Parameters
|
|
837
|
+
</p>
|
|
838
|
+
<dl class="dr-parameters"><dt class="dr-param">handler</dt>
|
|
839
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
840
|
+
<dd class="dr-description">handler for the event</dd>
|
|
841
|
+
</dl>
|
|
842
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
|
|
843
|
+
</div><div class="Element-unmouseup-section"><h3 id="Element.unmouseup" class="dr-method"><i class="dr-trixie"> </i>Element.unmouseup(handler)<a href="#Element.unmouseup" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2921 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2921">➭</a></h3>
|
|
844
|
+
<div class="extra" id="Element.unmouseup-extra"></div></div><div class="dr-method"><p>Removes event handler for mouseup for the element.
|
|
845
|
+
</p>
|
|
846
|
+
<p class="header">Parameters
|
|
847
|
+
</p>
|
|
848
|
+
<dl class="dr-parameters"><dt class="dr-param">handler</dt>
|
|
849
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
850
|
+
<dd class="dr-description">handler for the event</dd>
|
|
851
|
+
</dl>
|
|
852
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
|
|
853
|
+
</div><div class="Element-untouchcancel-section"><h3 id="Element.untouchcancel" class="dr-method"><i class="dr-trixie"> </i>Element.untouchcancel(handler)<a href="#Element.untouchcancel" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2997 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2997">➭</a></h3>
|
|
854
|
+
<div class="extra" id="Element.untouchcancel-extra"></div></div><div class="dr-method"><p>Removes event handler for touchcancel for the element.
|
|
855
|
+
</p>
|
|
856
|
+
<p class="header">Parameters
|
|
857
|
+
</p>
|
|
858
|
+
<dl class="dr-parameters"><dt class="dr-param">handler</dt>
|
|
859
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
860
|
+
<dd class="dr-description">handler for the event</dd>
|
|
861
|
+
</dl>
|
|
862
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
|
|
863
|
+
</div><div class="Element-untouchend-section"><h3 id="Element.untouchend" class="dr-method"><i class="dr-trixie"> </i>Element.untouchend(handler)<a href="#Element.untouchend" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2978 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2978">➭</a></h3>
|
|
864
|
+
<div class="extra" id="Element.untouchend-extra"></div></div><div class="dr-method"><p>Removes event handler for touchend for the element.
|
|
865
|
+
</p>
|
|
866
|
+
<p class="header">Parameters
|
|
867
|
+
</p>
|
|
868
|
+
<dl class="dr-parameters"><dt class="dr-param">handler</dt>
|
|
869
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
870
|
+
<dd class="dr-description">handler for the event</dd>
|
|
871
|
+
</dl>
|
|
872
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
|
|
873
|
+
</div><div class="Element-untouchmove-section"><h3 id="Element.untouchmove" class="dr-method"><i class="dr-trixie"> </i>Element.untouchmove(handler)<a href="#Element.untouchmove" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2959 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2959">➭</a></h3>
|
|
874
|
+
<div class="extra" id="Element.untouchmove-extra"></div></div><div class="dr-method"><p>Removes event handler for touchmove for the element.
|
|
875
|
+
</p>
|
|
876
|
+
<p class="header">Parameters
|
|
877
|
+
</p>
|
|
878
|
+
<dl class="dr-parameters"><dt class="dr-param">handler</dt>
|
|
879
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
880
|
+
<dd class="dr-description">handler for the event</dd>
|
|
881
|
+
</dl>
|
|
882
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
|
|
883
|
+
</div><div class="Element-untouchstart-section"><h3 id="Element.untouchstart" class="dr-method"><i class="dr-trixie"> </i>Element.untouchstart(handler)<a href="#Element.untouchstart" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2940 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2940">➭</a></h3>
|
|
884
|
+
<div class="extra" id="Element.untouchstart-extra"></div></div><div class="dr-method"><p>Removes event handler for touchstart for the element.
|
|
885
|
+
</p>
|
|
886
|
+
<p class="header">Parameters
|
|
887
|
+
</p>
|
|
888
|
+
<dl class="dr-parameters"><dt class="dr-param">handler</dt>
|
|
889
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
890
|
+
<dd class="dr-description">handler for the event</dd>
|
|
891
|
+
</dl>
|
|
892
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
|
|
893
|
+
</div><div class="Matrix-section"><h2 id="Matrix" class="undefined"><i class="dr-trixie"> </i>Matrix<a href="#Matrix" title="Link to this section" class="dr-hash">⚓</a></h2>
|
|
894
|
+
<div class="extra" id="Matrix-extra"></div></div><div class="Matrix-add-section"><h3 id="Matrix.add" class="dr-method"><i class="dr-trixie"> </i>Matrix.add(a, b, c, d, e, f, matrix)<a href="#Matrix.add" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2423 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2423">➭</a></h3>
|
|
895
|
+
<div class="extra" id="Matrix.add-extra"></div></div><div class="dr-method"><p>Adds given matrix to existing one.
|
|
896
|
+
</p>
|
|
897
|
+
<p class="header">Parameters
|
|
898
|
+
</p>
|
|
899
|
+
<dl class="dr-parameters"><dt class="dr-param">a</dt>
|
|
900
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
901
|
+
<dd class="dr-description"> </dd>
|
|
902
|
+
<dt class="dr-param">b</dt>
|
|
903
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
904
|
+
<dd class="dr-description"> </dd>
|
|
905
|
+
<dt class="dr-param">c</dt>
|
|
906
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
907
|
+
<dd class="dr-description"> </dd>
|
|
908
|
+
<dt class="dr-param">d</dt>
|
|
909
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
910
|
+
<dd class="dr-description"> </dd>
|
|
911
|
+
<dt class="dr-param">e</dt>
|
|
912
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
913
|
+
<dd class="dr-description"> </dd>
|
|
914
|
+
<dt class="dr-param">f</dt>
|
|
915
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
916
|
+
<dd class="dr-description"> </dd>
|
|
917
|
+
<dt class="dr-param">matrix</dt>
|
|
918
|
+
<dd class="dr-type"><em class="dr-type-object">object</em></dd>
|
|
919
|
+
<dd class="dr-description"><a href="#Matrix" class="dr-link">Matrix</a></dd>
|
|
920
|
+
</dl>
|
|
921
|
+
</div><div class="Matrix-clone-section"><h3 id="Matrix.clone" class="dr-method"><i class="dr-trixie"> </i>Matrix.clone()<a href="#Matrix.clone" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2468 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2468">➭</a></h3>
|
|
922
|
+
<div class="extra" id="Matrix.clone-extra"></div></div><div class="dr-method"><p>Returns copy of the matrix
|
|
923
|
+
</p>
|
|
924
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Matrix" class="dr-link">Matrix</a></span></p>
|
|
925
|
+
</div><div class="Matrix-invert-section"><h3 id="Matrix.invert" class="dr-method"><i class="dr-trixie"> </i>Matrix.invert()<a href="#Matrix.invert" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2456 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2456">➭</a></h3>
|
|
926
|
+
<div class="extra" id="Matrix.invert-extra"></div></div><div class="dr-method"><p>Returns inverted version of the matrix
|
|
927
|
+
</p>
|
|
928
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Matrix" class="dr-link">Matrix</a></span></p>
|
|
929
|
+
</div><div class="Matrix-rotate-section"><h3 id="Matrix.rotate" class="dr-method"><i class="dr-trixie"> </i>Matrix.rotate(a, x, y)<a href="#Matrix.rotate" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2510 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2510">➭</a></h3>
|
|
930
|
+
<div class="extra" id="Matrix.rotate-extra"></div></div><div class="dr-method"><p>Rotates the matrix
|
|
931
|
+
</p>
|
|
932
|
+
<p class="header">Parameters
|
|
933
|
+
</p>
|
|
934
|
+
<dl class="dr-parameters"><dt class="dr-param">a</dt>
|
|
935
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
936
|
+
<dd class="dr-description"> </dd>
|
|
937
|
+
<dt class="dr-param">x</dt>
|
|
938
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
939
|
+
<dd class="dr-description"> </dd>
|
|
940
|
+
<dt class="dr-param">y</dt>
|
|
941
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
942
|
+
<dd class="dr-description"> </dd>
|
|
943
|
+
</dl>
|
|
944
|
+
</div><div class="Matrix-scale-section"><h3 id="Matrix.scale" class="dr-method"><i class="dr-trixie"> </i>Matrix.scale(x, [y], [cx], [cy])<a href="#Matrix.scale" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2494 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2494">➭</a></h3>
|
|
945
|
+
<div class="extra" id="Matrix.scale-extra"></div></div><div class="dr-method"><p>Scales the matrix
|
|
946
|
+
</p>
|
|
947
|
+
<p class="header">Parameters
|
|
948
|
+
</p>
|
|
949
|
+
<dl class="dr-parameters"><dt class="dr-param">x</dt>
|
|
950
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
951
|
+
<dd class="dr-description"> </dd>
|
|
952
|
+
<dt class="dr-param optional">y</dt>
|
|
953
|
+
<dd class="dr-optional">optional</dd>
|
|
954
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
955
|
+
<dd class="dr-description"> </dd>
|
|
956
|
+
<dt class="dr-param optional">cx</dt>
|
|
957
|
+
<dd class="dr-optional">optional</dd>
|
|
958
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
959
|
+
<dd class="dr-description"> </dd>
|
|
960
|
+
<dt class="dr-param optional">cy</dt>
|
|
961
|
+
<dd class="dr-optional">optional</dd>
|
|
962
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
963
|
+
<dd class="dr-description"> </dd>
|
|
964
|
+
</dl>
|
|
965
|
+
</div><div class="Matrix-split-section"><h3 id="Matrix.split" class="dr-method"><i class="dr-trixie"> </i>Matrix.split()<a href="#Matrix.split" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2583 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2583">➭</a></h3>
|
|
966
|
+
<div class="extra" id="Matrix.split-extra"></div></div><div class="dr-method"><p>Splits matrix into primitive transformations
|
|
967
|
+
</p>
|
|
968
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">in format:</span></p>
|
|
969
|
+
<ol class="dr-json"><li><span class="dr-json-key">dx</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">translation by x</span>
|
|
970
|
+
<li><span class="dr-json-key">dy</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">translation by y</span>
|
|
971
|
+
<li><span class="dr-json-key">scalex</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">scale by x</span>
|
|
972
|
+
<li><span class="dr-json-key">scaley</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">scale by y</span>
|
|
973
|
+
<li><span class="dr-json-key">shear</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">shear</span>
|
|
974
|
+
<li><span class="dr-json-key">rotate</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">rotation in deg</span>
|
|
975
|
+
<li><span class="dr-json-key">isSimple</span><span class="dr-type"><em class="dr-type-boolean">boolean</em></span><span class="dr-json-description">could it be represented via simple transformations</span>
|
|
976
|
+
</ol>
|
|
977
|
+
</div><div class="Matrix-toTransformString-section"><h3 id="Matrix.toTransformString" class="dr-method"><i class="dr-trixie"> </i>Matrix.toTransformString()<a href="#Matrix.toTransformString" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2625 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2625">➭</a></h3>
|
|
978
|
+
<div class="extra" id="Matrix.toTransformString-extra"></div></div><div class="dr-method"><p>Return transform string that represents given matrix
|
|
979
|
+
</p>
|
|
980
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">transform string</span></p>
|
|
981
|
+
</div><div class="Matrix-translate-section"><h3 id="Matrix.translate" class="dr-method"><i class="dr-trixie"> </i>Matrix.translate(x, y)<a href="#Matrix.translate" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2480 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2480">➭</a></h3>
|
|
982
|
+
<div class="extra" id="Matrix.translate-extra"></div></div><div class="dr-method"><p>Translate the matrix
|
|
983
|
+
</p>
|
|
984
|
+
<p class="header">Parameters
|
|
985
|
+
</p>
|
|
986
|
+
<dl class="dr-parameters"><dt class="dr-param">x</dt>
|
|
987
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
988
|
+
<dd class="dr-description"> </dd>
|
|
989
|
+
<dt class="dr-param">y</dt>
|
|
990
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
991
|
+
<dd class="dr-description"> </dd>
|
|
992
|
+
</dl>
|
|
993
|
+
</div><div class="Matrix-x-section"><h3 id="Matrix.x" class="dr-method"><i class="dr-trixie"> </i>Matrix.x(x, y)<a href="#Matrix.x" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2529 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2529">➭</a></h3>
|
|
994
|
+
<div class="extra" id="Matrix.x-extra"></div></div><div class="dr-method"><p>Return x coordinate for given point after transformation described by the matrix. See also <a href="#Matrix.y" class="dr-link">Matrix.y</a>
|
|
995
|
+
</p>
|
|
996
|
+
<p class="header">Parameters
|
|
997
|
+
</p>
|
|
998
|
+
<dl class="dr-parameters"><dt class="dr-param">x</dt>
|
|
999
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1000
|
+
<dd class="dr-description"> </dd>
|
|
1001
|
+
<dt class="dr-param">y</dt>
|
|
1002
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1003
|
+
<dd class="dr-description"> </dd>
|
|
1004
|
+
</dl>
|
|
1005
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">x</span></p>
|
|
1006
|
+
</div><div class="Matrix-y-section"><h3 id="Matrix.y" class="dr-method"><i class="dr-trixie"> </i>Matrix.y(x, y)<a href="#Matrix.y" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2542 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2542">➭</a></h3>
|
|
1007
|
+
<div class="extra" id="Matrix.y-extra"></div></div><div class="dr-method"><p>Return y coordinate for given point after transformation described by the matrix. See also <a href="#Matrix.x" class="dr-link">Matrix.x</a>
|
|
1008
|
+
</p>
|
|
1009
|
+
<p class="header">Parameters
|
|
1010
|
+
</p>
|
|
1011
|
+
<dl class="dr-parameters"><dt class="dr-param">x</dt>
|
|
1012
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1013
|
+
<dd class="dr-description"> </dd>
|
|
1014
|
+
<dt class="dr-param">y</dt>
|
|
1015
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1016
|
+
<dd class="dr-description"> </dd>
|
|
1017
|
+
</dl>
|
|
1018
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">y</span></p>
|
|
1019
|
+
</div><div class="Paper-section"><h2 id="Paper" class="undefined"><i class="dr-trixie"> </i>Paper<a href="#Paper" title="Link to this section" class="dr-hash">⚓</a></h2>
|
|
1020
|
+
<div class="extra" id="Paper-extra"></div></div><div class="Paper-add-section"><h3 id="Paper.add" class="dr-method"><i class="dr-trixie"> </i>Paper.add(json)<a href="#Paper.add" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 5044 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L5044">➭</a></h3>
|
|
1021
|
+
<div class="extra" id="Paper.add-extra"></div></div><div class="dr-method"><p>Imports elements in JSON array in format <code>{type: type, <attributes>}</code>
|
|
1022
|
+
</p>
|
|
1023
|
+
<p class="header">Parameters
|
|
1024
|
+
</p>
|
|
1025
|
+
<dl class="dr-parameters"><dt class="dr-param">json</dt>
|
|
1026
|
+
<dd class="dr-type"><em class="dr-type-array">array</em></dd>
|
|
1027
|
+
<dd class="dr-description"> </dd>
|
|
1028
|
+
</dl>
|
|
1029
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">resulting set of imported elements</span></p>
|
|
1030
|
+
<p class="header">Usage
|
|
1031
|
+
</p>
|
|
1032
|
+
<pre class="javascript code"><code>paper.add([
|
|
1033
|
+
{
|
|
1034
|
+
type: <i>"circle"</i>,
|
|
1035
|
+
cx: <span class="d">10</span>,
|
|
1036
|
+
cy: <span class="d">10</span>,
|
|
1037
|
+
r: <span class="d">5</span>
|
|
1038
|
+
},
|
|
1039
|
+
{
|
|
1040
|
+
type: <i>"rect"</i>,
|
|
1041
|
+
x: <span class="d">10</span>,
|
|
1042
|
+
y: <span class="d">10</span>,
|
|
1043
|
+
width: <span class="d">10</span>,
|
|
1044
|
+
height: <span class="d">10</span>,
|
|
1045
|
+
fill: <i>"#fc0"</i>
|
|
1046
|
+
}
|
|
1047
|
+
]);
|
|
1048
|
+
</code></pre>
|
|
1049
|
+
</div><div class="Paper-bottom-section"><h3 id="Paper.bottom" class="dr-property"><i class="dr-trixie"> </i>Paper.bottom<a href="#Paper.bottom" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3430 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L3430">➭</a></h3>
|
|
1050
|
+
<div class="extra" id="Paper.bottom-extra"></div></div><div class="dr-property"><p>Points to the bottom element on the paper
|
|
1051
|
+
</p>
|
|
1052
|
+
</div><div class="Paper-ca-section"><h3 id="Paper.ca" class="dr-property"><i class="dr-trixie"> </i>Paper.ca<a href="#Paper.ca" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 99 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L99">➭</a></h3>
|
|
1053
|
+
<div class="extra" id="Paper.ca-extra"></div></div><div class="dr-property"><em class="dr-type dr-type-object">object</em><p>Shortcut for <a href="#Paper.customAttributes" class="dr-link">Paper.customAttributes</a>
|
|
1054
|
+
</p>
|
|
1055
|
+
</div><div class="Paper-circle-section"><h3 id="Paper.circle" class="dr-method"><i class="dr-trixie"> </i>Paper.circle(x, y, r)<a href="#Paper.circle" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3198 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L3198">➭</a></h3>
|
|
1056
|
+
<div class="extra" id="Paper.circle-extra"></div></div><div class="dr-method"><p>Draws a circle.
|
|
1057
|
+
</p>
|
|
1058
|
+
<p class="header">Parameters
|
|
1059
|
+
</p>
|
|
1060
|
+
<dl class="dr-parameters"><dt class="dr-param">x</dt>
|
|
1061
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1062
|
+
<dd class="dr-description">x coordinate of the centre</dd>
|
|
1063
|
+
<dt class="dr-param">y</dt>
|
|
1064
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1065
|
+
<dd class="dr-description">y coordinate of the centre</dd>
|
|
1066
|
+
<dt class="dr-param">r</dt>
|
|
1067
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1068
|
+
<dd class="dr-description">radius</dd>
|
|
1069
|
+
</dl>
|
|
1070
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Raphaël element object with type “circle”</span></p>
|
|
1071
|
+
<p class="header">Usage
|
|
1072
|
+
</p>
|
|
1073
|
+
<pre class="javascript code"><code><b>var</b> c<span class="s"> = </span>paper.circle(<span class="d">50</span>, <span class="d">50</span>, <span class="d">40</span>);
|
|
1074
|
+
</code></pre>
|
|
1075
|
+
</div><div class="Paper-clear-section"><h3 id="Paper.clear" class="dr-method"><i class="dr-trixie"> </i>Paper.clear()<a href="#Paper.clear" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1325 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.svg.js#L1325">➭</a></h3>
|
|
1076
|
+
<div class="extra" id="Paper.clear-extra"></div></div><div class="dr-method"><p>Clears the paper, i.e. removes all the elements.
|
|
1077
|
+
</p>
|
|
1078
|
+
</div><div class="Paper-customAttributes-section"><h3 id="Paper.customAttributes" class="dr-property"><i class="dr-trixie"> </i>Paper.customAttributes<a href="#Paper.customAttributes" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 125 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L125">➭</a></h3>
|
|
1079
|
+
<div class="extra" id="Paper.customAttributes-extra"></div></div><div class="dr-property"><em class="dr-type dr-type-object">object</em><p>If you have a set of attributes that you would like to represent
|
|
1080
|
+
as a function of some number you can do it easily with custom attributes:
|
|
1081
|
+
</p>
|
|
1082
|
+
<p class="header">Usage
|
|
1083
|
+
</p>
|
|
1084
|
+
<pre class="javascript code"><code>paper.customAttributes.hue<span class="s"> = </span><b>function</b> (num) {
|
|
1085
|
+
num<span class="s"> = </span>num<span class="s"> % </span><span class="d">1</span>;
|
|
1086
|
+
<b>return</b> {fill: <i>"hsb("</i><span class="s"> + </span>num<span class="s"> + </span><i>", <span class="d">0.75</span>, <span class="d">1</span>)"</i>};
|
|
1087
|
+
};
|
|
1088
|
+
<span class="c">// Custom attribute “hue” will change fill</span>
|
|
1089
|
+
<span class="c">// to be given hue <b>with</b> fixed saturation and brightness.</span>
|
|
1090
|
+
<span class="c">// Now you can use it like <b>this</b>:</span>
|
|
1091
|
+
<b>var</b> c<span class="s"> = </span>paper.circle(<span class="d">10</span>, <span class="d">10</span>, <span class="d">10</span>).attr({hue: <span class="d">.45</span>});
|
|
1092
|
+
<span class="c">// or even like <b>this</b>:</span>
|
|
1093
|
+
c.animate({hue: <span class="d">1</span>}, <span class="d">1e3</span>);
|
|
1094
|
+
|
|
1095
|
+
<span class="c">// You could also create custom attribute</span>
|
|
1096
|
+
<span class="c">// <b>with</b> multiple parameters:</span>
|
|
1097
|
+
paper.customAttributes.hsb<span class="s"> = </span><b>function</b> (h, s, b) {
|
|
1098
|
+
<b>return</b> {fill: <i>"hsb("</i><span class="s"> + </span>[h, s, b].join(<i>","</i>)<span class="s"> + </span><i>")"</i>};
|
|
1099
|
+
};
|
|
1100
|
+
c.attr({hsb: <i>"<span class="d">0.5</span> <span class="d">.8</span> <span class="d">1</span>"</i>});
|
|
1101
|
+
c.animate({hsb: [<span class="d">1</span>, <span class="d">0</span>, <span class="d">0.5</span>]}, <span class="d">1e3</span>);
|
|
1102
|
+
</code></pre>
|
|
1103
|
+
</div><div class="Paper-ellipse-section"><h3 id="Paper.ellipse" class="dr-method"><i class="dr-trixie"> </i>Paper.ellipse(x, y, rx, ry)<a href="#Paper.ellipse" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3246 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L3246">➭</a></h3>
|
|
1104
|
+
<div class="extra" id="Paper.ellipse-extra"></div></div><div class="dr-method"><p>Draws an ellipse.
|
|
1105
|
+
</p>
|
|
1106
|
+
<p class="header">Parameters
|
|
1107
|
+
</p>
|
|
1108
|
+
<dl class="dr-parameters"><dt class="dr-param">x</dt>
|
|
1109
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1110
|
+
<dd class="dr-description">x coordinate of the centre</dd>
|
|
1111
|
+
<dt class="dr-param">y</dt>
|
|
1112
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1113
|
+
<dd class="dr-description">y coordinate of the centre</dd>
|
|
1114
|
+
<dt class="dr-param">rx</dt>
|
|
1115
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1116
|
+
<dd class="dr-description">horizontal radius</dd>
|
|
1117
|
+
<dt class="dr-param">ry</dt>
|
|
1118
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1119
|
+
<dd class="dr-description">vertical radius</dd>
|
|
1120
|
+
</dl>
|
|
1121
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Raphaël element object with type “ellipse”</span></p>
|
|
1122
|
+
<p class="header">Usage
|
|
1123
|
+
</p>
|
|
1124
|
+
<pre class="javascript code"><code><b>var</b> c<span class="s"> = </span>paper.ellipse(<span class="d">50</span>, <span class="d">50</span>, <span class="d">40</span>, <span class="d">20</span>);
|
|
1125
|
+
</code></pre>
|
|
1126
|
+
</div><div class="Paper-forEach-section"><h3 id="Paper.forEach" class="dr-method"><i class="dr-trixie"> </i>Paper.forEach(callback, thisArg)<a href="#Paper.forEach" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3529 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L3529">➭</a></h3>
|
|
1127
|
+
<div class="extra" id="Paper.forEach-extra"></div></div><div class="dr-method"><p>Executes given function for each element on the paper
|
|
1128
|
+
</p>
|
|
1129
|
+
<p>If callback function returns <code>false</code> it will stop loop running.
|
|
1130
|
+
</p>
|
|
1131
|
+
<p class="header">Parameters
|
|
1132
|
+
</p>
|
|
1133
|
+
<dl class="dr-parameters"><dt class="dr-param">callback</dt>
|
|
1134
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
1135
|
+
<dd class="dr-description">function to run</dd>
|
|
1136
|
+
<dt class="dr-param">thisArg</dt>
|
|
1137
|
+
<dd class="dr-type"><em class="dr-type-object">object</em></dd>
|
|
1138
|
+
<dd class="dr-description">context object for the callback</dd>
|
|
1139
|
+
</dl>
|
|
1140
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Paper object</span></p>
|
|
1141
|
+
<p class="header">Usage
|
|
1142
|
+
</p>
|
|
1143
|
+
<pre class="javascript code"><code>paper.forEach(<b>function</b> (el) {
|
|
1144
|
+
el.attr({ stroke: <i>"blue"</i> });
|
|
1145
|
+
});
|
|
1146
|
+
</code></pre>
|
|
1147
|
+
</div><div class="Paper-getById-section"><h3 id="Paper.getById" class="dr-method"><i class="dr-trixie"> </i>Paper.getById(id)<a href="#Paper.getById" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3501 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L3501">➭</a></h3>
|
|
1148
|
+
<div class="extra" id="Paper.getById-extra"></div></div><div class="dr-method"><p>Returns you element by its internal ID.
|
|
1149
|
+
</p>
|
|
1150
|
+
<p class="header">Parameters
|
|
1151
|
+
</p>
|
|
1152
|
+
<dl class="dr-parameters"><dt class="dr-param">id</dt>
|
|
1153
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1154
|
+
<dd class="dr-description">id</dd>
|
|
1155
|
+
</dl>
|
|
1156
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Raphaël element object</span></p>
|
|
1157
|
+
</div><div class="Paper-getElementByPoint-section"><h3 id="Paper.getElementByPoint" class="dr-method"><i class="dr-trixie"> </i>Paper.getElementByPoint(x, y)<a href="#Paper.getElementByPoint" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3465 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L3465">➭</a></h3>
|
|
1158
|
+
<div class="extra" id="Paper.getElementByPoint-extra"></div></div><div class="dr-method"><p>Returns you topmost element under given point.
|
|
1159
|
+
</p>
|
|
1160
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Raphaël element object</span></p>
|
|
1161
|
+
<p class="header">Parameters
|
|
1162
|
+
</p>
|
|
1163
|
+
<dl class="dr-parameters"><dt class="dr-param">x</dt>
|
|
1164
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1165
|
+
<dd class="dr-description">x coordinate from the top left corner of the window</dd>
|
|
1166
|
+
<dt class="dr-param">y</dt>
|
|
1167
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1168
|
+
<dd class="dr-description">y coordinate from the top left corner of the window</dd>
|
|
1169
|
+
</dl>
|
|
1170
|
+
<p class="header">Usage
|
|
1171
|
+
</p>
|
|
1172
|
+
<pre class="javascript code"><code>paper.getElementByPoint(mouseX, mouseY).attr({stroke: <i>"#f00"</i>});
|
|
1173
|
+
</code></pre>
|
|
1174
|
+
</div><div class="Paper-getElementsByPoint-section"><h3 id="Paper.getElementsByPoint" class="dr-method"><i class="dr-trixie"> </i>Paper.getElementsByPoint(x, y)<a href="#Paper.getElementsByPoint" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3551 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L3551">➭</a></h3>
|
|
1175
|
+
<div class="extra" id="Paper.getElementsByPoint-extra"></div></div><div class="dr-method"><p>Returns set of elements that have common point inside
|
|
1176
|
+
</p>
|
|
1177
|
+
<p class="header">Parameters
|
|
1178
|
+
</p>
|
|
1179
|
+
<dl class="dr-parameters"><dt class="dr-param">x</dt>
|
|
1180
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1181
|
+
<dd class="dr-description">x coordinate of the point</dd>
|
|
1182
|
+
<dt class="dr-param">y</dt>
|
|
1183
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1184
|
+
<dd class="dr-description">y coordinate of the point</dd>
|
|
1185
|
+
</dl>
|
|
1186
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Set" class="dr-link">Set</a></span></p>
|
|
1187
|
+
</div><div class="Paper-getFont-section"><h3 id="Paper.getFont" class="dr-method"><i class="dr-trixie"> </i>Paper.getFont(family, [weight], [style], [stretch])<a href="#Paper.getFont" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 4929 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L4929">➭</a></h3>
|
|
1188
|
+
<div class="extra" id="Paper.getFont-extra"></div></div><div class="dr-method"><p>Finds font object in the registered fonts by given parameters. You could specify only one word from the font name, like “Myriad” for “Myriad Pro”.
|
|
1189
|
+
</p>
|
|
1190
|
+
<p class="header">Parameters
|
|
1191
|
+
</p>
|
|
1192
|
+
<dl class="dr-parameters"><dt class="dr-param">family</dt>
|
|
1193
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
1194
|
+
<dd class="dr-description">font family name or any word from it</dd>
|
|
1195
|
+
<dt class="dr-param optional">weight</dt>
|
|
1196
|
+
<dd class="dr-optional">optional</dd>
|
|
1197
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
1198
|
+
<dd class="dr-description">font weight</dd>
|
|
1199
|
+
<dt class="dr-param optional">style</dt>
|
|
1200
|
+
<dd class="dr-optional">optional</dd>
|
|
1201
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
1202
|
+
<dd class="dr-description">font style</dd>
|
|
1203
|
+
<dt class="dr-param optional">stretch</dt>
|
|
1204
|
+
<dd class="dr-optional">optional</dd>
|
|
1205
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
1206
|
+
<dd class="dr-description">font stretch</dd>
|
|
1207
|
+
</dl>
|
|
1208
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">the font object</span></p>
|
|
1209
|
+
<p class="header">Usage
|
|
1210
|
+
</p>
|
|
1211
|
+
<pre class="javascript code"><code>paper.print(<span class="d">100</span>, <span class="d">100</span>, <i>"Test string"</i>, paper.getFont(<i>"Times"</i>, <span class="d">800</span>), <span class="d">30</span>);
|
|
1212
|
+
</code></pre>
|
|
1213
|
+
</div><div class="Paper-image-section"><h3 id="Paper.image" class="dr-method"><i class="dr-trixie"> </i>Paper.image(src, x, y, width, height)<a href="#Paper.image" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3307 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L3307">➭</a></h3>
|
|
1214
|
+
<div class="extra" id="Paper.image-extra"></div></div><div class="dr-method"><p>Embeds an image into the surface.
|
|
1215
|
+
</p>
|
|
1216
|
+
<p class="header">Parameters
|
|
1217
|
+
</p>
|
|
1218
|
+
<dl class="dr-parameters"><dt class="dr-param">src</dt>
|
|
1219
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
1220
|
+
<dd class="dr-description">URI of the source image</dd>
|
|
1221
|
+
<dt class="dr-param">x</dt>
|
|
1222
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1223
|
+
<dd class="dr-description">x coordinate position</dd>
|
|
1224
|
+
<dt class="dr-param">y</dt>
|
|
1225
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1226
|
+
<dd class="dr-description">y coordinate position</dd>
|
|
1227
|
+
<dt class="dr-param">width</dt>
|
|
1228
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1229
|
+
<dd class="dr-description">width of the image</dd>
|
|
1230
|
+
<dt class="dr-param">height</dt>
|
|
1231
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1232
|
+
<dd class="dr-description">height of the image</dd>
|
|
1233
|
+
</dl>
|
|
1234
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Raphaël element object with type “image”</span></p>
|
|
1235
|
+
<p class="header">Usage
|
|
1236
|
+
</p>
|
|
1237
|
+
<pre class="javascript code"><code><b>var</b> c<span class="s"> = </span>paper.image(<i>"apple.png"</i>, <span class="d">10</span>, <span class="d">10</span>, <span class="d">80</span>, <span class="d">80</span>);
|
|
1238
|
+
</code></pre>
|
|
1239
|
+
</div><div class="Paper-path-section"><h3 id="Paper.path" class="dr-method"><i class="dr-trixie"> </i>Paper.path([pathString])<a href="#Paper.path" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3283 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L3283">➭</a></h3>
|
|
1240
|
+
<div class="extra" id="Paper.path-extra"></div></div><div class="dr-method"><p>Creates a path element by given path data string.
|
|
1241
|
+
</p>
|
|
1242
|
+
<p class="header">Parameters
|
|
1243
|
+
</p>
|
|
1244
|
+
<dl class="dr-parameters"><dt class="dr-param optional">pathString</dt>
|
|
1245
|
+
<dd class="dr-optional">optional</dd>
|
|
1246
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
1247
|
+
<dd class="dr-description">path string in SVG format.</dd>
|
|
1248
|
+
</dl>
|
|
1249
|
+
<p>Path string consists of one-letter commands, followed by comma seprarated arguments in numercal form. Example:
|
|
1250
|
+
</p>
|
|
1251
|
+
<pre class="javascript code"><code><i>"M10,20L30,<span class="d">40</span>"</i>
|
|
1252
|
+
</code></pre>
|
|
1253
|
+
<p>Here we can see two commands: “M”, with arguments <code>(10, 20)</code> and “L” with arguments <code>(30, 40)</code>. Upper case letter mean command is absolute, lower case—relative.
|
|
1254
|
+
</p>
|
|
1255
|
+
<p></p>
|
|
1256
|
+
<p>Here is short list of commands available, for more details see <a href="http://www.w3.org/TR/SVG/paths.html#PathData" title="Details of a path's data attribute's format are described in the SVG specification.">SVG path string format</a>.</p>
|
|
1257
|
+
<table><thead><tr><th>Command</th><th>Name</th><th>Parameters</th></tr></thead><tbody>
|
|
1258
|
+
<tr><td>M</td><td>moveto</td><td>(x y)+</td></tr>
|
|
1259
|
+
<tr><td>Z</td><td>closepath</td><td>(none)</td></tr>
|
|
1260
|
+
<tr><td>L</td><td>lineto</td><td>(x y)+</td></tr>
|
|
1261
|
+
<tr><td>H</td><td>horizontal lineto</td><td>x+</td></tr>
|
|
1262
|
+
<tr><td>V</td><td>vertical lineto</td><td>y+</td></tr>
|
|
1263
|
+
<tr><td>C</td><td>curveto</td><td>(x1 y1 x2 y2 x y)+</td></tr>
|
|
1264
|
+
<tr><td>S</td><td>smooth curveto</td><td>(x2 y2 x y)+</td></tr>
|
|
1265
|
+
<tr><td>Q</td><td>quadratic Bézier curveto</td><td>(x1 y1 x y)+</td></tr>
|
|
1266
|
+
<tr><td>T</td><td>smooth quadratic Bézier curveto</td><td>(x y)+</td></tr>
|
|
1267
|
+
<tr><td>A</td><td>elliptical arc</td><td>(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+</td></tr>
|
|
1268
|
+
<tr><td>R</td><td><a href="http://en.wikipedia.org/wiki/Catmull–Rom_spline#Catmull.E2.80.93Rom_spline">Catmull-Rom curveto</a>*</td><td>x1 y1 (x y)+</td></tr></tbody></table>
|
|
1269
|
+
<p>* “Catmull-Rom curveto” is a not standard SVG command and added in 2.0 to make life easier.
|
|
1270
|
+
Note: there is a special case when path consist of just three commands: “M10,10R…z”. In this case path will smoothly connects to its beginning.
|
|
1271
|
+
</p>
|
|
1272
|
+
<p class="header">Usage
|
|
1273
|
+
</p>
|
|
1274
|
+
<pre class="javascript code"><code><b>var</b> c<span class="s"> = </span>paper.path(<i>"M10 10L90 <span class="d">90</span>"</i>);
|
|
1275
|
+
<span class="c">// draw a diagonal line:</span>
|
|
1276
|
+
<span class="c">// move to <span class="d">10</span>,<span class="d">10</span>, line to <span class="d">90</span>,<span class="d">90</span></span>
|
|
1277
|
+
</code></pre>
|
|
1278
|
+
<p>For example of path strings, check out these icons: <a href="http://raphaeljs.com/icons/" rel="external">http://raphaeljs.com/icons/</a>
|
|
1279
|
+
</p>
|
|
1280
|
+
</div><div class="Paper-print-section"><h3 id="Paper.print" class="dr-method"><i class="dr-trixie"> </i>Paper.print(x, y, string, font, [size], [origin], [letter_spacing])<a href="#Paper.print" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 4977 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L4977">➭</a></h3>
|
|
1281
|
+
<div class="extra" id="Paper.print-extra"></div></div><div class="dr-method"><p>Creates path that represent given text written using given font at given position with given size.
|
|
1282
|
+
Result of the method is path element that contains whole text as a separate path.
|
|
1283
|
+
</p>
|
|
1284
|
+
<p class="header">Parameters
|
|
1285
|
+
</p>
|
|
1286
|
+
<dl class="dr-parameters"><dt class="dr-param">x</dt>
|
|
1287
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1288
|
+
<dd class="dr-description">x position of the text</dd>
|
|
1289
|
+
<dt class="dr-param">y</dt>
|
|
1290
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1291
|
+
<dd class="dr-description">y position of the text</dd>
|
|
1292
|
+
<dt class="dr-param">string</dt>
|
|
1293
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
1294
|
+
<dd class="dr-description">text to print</dd>
|
|
1295
|
+
<dt class="dr-param">font</dt>
|
|
1296
|
+
<dd class="dr-type"><em class="dr-type-object">object</em></dd>
|
|
1297
|
+
<dd class="dr-description">font object, see <a href="#Paper.getFont" class="dr-link">Paper.getFont</a></dd>
|
|
1298
|
+
<dt class="dr-param optional">size</dt>
|
|
1299
|
+
<dd class="dr-optional">optional</dd>
|
|
1300
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1301
|
+
<dd class="dr-description">size of the font, default is <code>16</code></dd>
|
|
1302
|
+
<dt class="dr-param optional">origin</dt>
|
|
1303
|
+
<dd class="dr-optional">optional</dd>
|
|
1304
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
1305
|
+
<dd class="dr-description">could be <code>"baseline"</code> or <code>"middle"</code>, default is <code>"middle"</code></dd>
|
|
1306
|
+
<dt class="dr-param optional">letter_spacing</dt>
|
|
1307
|
+
<dd class="dr-optional">optional</dd>
|
|
1308
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1309
|
+
<dd class="dr-description">number in range <code>-1..1</code>, default is <code>0</code></dd>
|
|
1310
|
+
</dl>
|
|
1311
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">resulting path element, which consist of all letters</span></p>
|
|
1312
|
+
<p class="header">Usage
|
|
1313
|
+
</p>
|
|
1314
|
+
<pre class="javascript code"><code><b>var</b> txt<span class="s"> = </span>r.print(<span class="d">10</span>, <span class="d">50</span>, <i>"print"</i>, r.getFont(<i>"Museo"</i>), <span class="d">30</span>).attr({fill: <i>"#fff"</i>});
|
|
1315
|
+
</code></pre>
|
|
1316
|
+
</div><div class="Paper-raphael-section"><h3 id="Paper.raphael" class="dr-property"><i class="dr-trixie"> </i>Paper.raphael<a href="#Paper.raphael" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3437 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L3437">➭</a></h3>
|
|
1317
|
+
<div class="extra" id="Paper.raphael-extra"></div></div><div class="dr-property"><p>Points to the <a href="#Raphael" class="dr-link">Raphael</a> object/function
|
|
1318
|
+
</p>
|
|
1319
|
+
</div><div class="Paper-rect-section"><h3 id="Paper.rect" class="dr-method"><i class="dr-trixie"> </i>Paper.rect(x, y, width, height, [r])<a href="#Paper.rect" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3224 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L3224">➭</a></h3>
|
|
1320
|
+
<div class="extra" id="Paper.rect-extra"></div></div><div class="dr-method"><p></p>
|
|
1321
|
+
<p>Draws a rectangle.
|
|
1322
|
+
</p>
|
|
1323
|
+
<p class="header">Parameters
|
|
1324
|
+
</p>
|
|
1325
|
+
<dl class="dr-parameters"><dt class="dr-param">x</dt>
|
|
1326
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1327
|
+
<dd class="dr-description">x coordinate of the top left corner</dd>
|
|
1328
|
+
<dt class="dr-param">y</dt>
|
|
1329
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1330
|
+
<dd class="dr-description">y coordinate of the top left corner</dd>
|
|
1331
|
+
<dt class="dr-param">width</dt>
|
|
1332
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1333
|
+
<dd class="dr-description">width</dd>
|
|
1334
|
+
<dt class="dr-param">height</dt>
|
|
1335
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1336
|
+
<dd class="dr-description">height</dd>
|
|
1337
|
+
<dt class="dr-param optional">r</dt>
|
|
1338
|
+
<dd class="dr-optional">optional</dd>
|
|
1339
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1340
|
+
<dd class="dr-description">radius for rounded corners, default is 0</dd>
|
|
1341
|
+
</dl>
|
|
1342
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Raphaël element object with type “rect”</span></p>
|
|
1343
|
+
<p class="header">Usage
|
|
1344
|
+
</p>
|
|
1345
|
+
<pre class="javascript code"><code><span class="c">// regular rectangle</span>
|
|
1346
|
+
<b>var</b> c<span class="s"> = </span>paper.rect(<span class="d">10</span>, <span class="d">10</span>, <span class="d">50</span>, <span class="d">50</span>);
|
|
1347
|
+
<span class="c">// rectangle <b>with</b> rounded corners</span>
|
|
1348
|
+
<b>var</b> c<span class="s"> = </span>paper.rect(<span class="d">40</span>, <span class="d">40</span>, <span class="d">50</span>, <span class="d">50</span>, <span class="d">10</span>);
|
|
1349
|
+
</code></pre>
|
|
1350
|
+
</div><div class="Paper-remove-section"><h3 id="Paper.remove" class="dr-method"><i class="dr-trixie"> </i>Paper.remove()<a href="#Paper.remove" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1342 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.svg.js#L1342">➭</a></h3>
|
|
1351
|
+
<div class="extra" id="Paper.remove-extra"></div></div><div class="dr-method"><p>Removes the paper from the DOM.
|
|
1352
|
+
</p>
|
|
1353
|
+
</div><div class="Paper-renderfix-section"><h3 id="Paper.renderfix" class="dr-method"><i class="dr-trixie"> </i>Paper.renderfix()<a href="#Paper.renderfix" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1297 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.svg.js#L1297">➭</a></h3>
|
|
1354
|
+
<div class="extra" id="Paper.renderfix-extra"></div></div><div class="dr-method"><p>Fixes the issue of Firefox and IE9 regarding subpixel rendering. If paper is dependant
|
|
1355
|
+
on other elements after reflow it could shift half pixel which cause for lines to lost their crispness.
|
|
1356
|
+
This method fixes the issue.
|
|
1357
|
+
</p>
|
|
1358
|
+
</div><div class="Paper-safari-section"><h3 id="Paper.safari" class="dr-method"><i class="dr-trixie"> </i>Paper.safari()<a href="#Paper.safari" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2652 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2652">➭</a></h3>
|
|
1359
|
+
<div class="extra" id="Paper.safari-extra"></div></div><div class="dr-method"><p>There is an inconvenient rendering bug in Safari (WebKit):
|
|
1360
|
+
sometimes the rendering should be forced.
|
|
1361
|
+
This method should help with dealing with this bug.
|
|
1362
|
+
</p>
|
|
1363
|
+
</div><div class="Paper-set-section"><h3 id="Paper.set" class="dr-method"><i class="dr-trixie"> </i>Paper.set()<a href="#Paper.set" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3350 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L3350">➭</a></h3>
|
|
1364
|
+
<div class="extra" id="Paper.set-extra"></div></div><div class="dr-method"><p>Creates array-like object to keep and operate several elements at once.
|
|
1365
|
+
Warning: it doesn’t create any elements for itself in the page, it just groups existing elements.
|
|
1366
|
+
Sets act as pseudo elements — all methods available to an element can be used on a set.
|
|
1367
|
+
</p>
|
|
1368
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">array-like object that represents set of elements</span></p>
|
|
1369
|
+
<p class="header">Usage
|
|
1370
|
+
</p>
|
|
1371
|
+
<pre class="javascript code"><code><b>var</b> st<span class="s"> = </span>paper.set();
|
|
1372
|
+
st.push(
|
|
1373
|
+
paper.circle(<span class="d">10</span>, <span class="d">10</span>, <span class="d">5</span>),
|
|
1374
|
+
paper.circle(<span class="d">30</span>, <span class="d">10</span>, <span class="d">5</span>)
|
|
1375
|
+
);
|
|
1376
|
+
st.attr({fill: <i>"red"</i>}); <span class="c">// changes the fill of both circles</span>
|
|
1377
|
+
</code></pre>
|
|
1378
|
+
</div><div class="Paper-setFinish-section"><h3 id="Paper.setFinish" class="dr-method"><i class="dr-trixie"> </i>Paper.setFinish()<a href="#Paper.setFinish" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3381 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L3381">➭</a></h3>
|
|
1379
|
+
<div class="extra" id="Paper.setFinish-extra"></div></div><div class="dr-method"><p>See <a href="#Paper.setStart" class="dr-link">Paper.setStart</a>. This method finishes catching and returns resulting set.
|
|
1380
|
+
</p>
|
|
1381
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">set</span></p>
|
|
1382
|
+
</div><div class="Paper-setSize-section"><h3 id="Paper.setSize" class="dr-method"><i class="dr-trixie"> </i>Paper.setSize(width, height)<a href="#Paper.setSize" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3397 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L3397">➭</a></h3>
|
|
1383
|
+
<div class="extra" id="Paper.setSize-extra"></div></div><div class="dr-method"><p>If you need to change dimensions of the canvas call this method
|
|
1384
|
+
</p>
|
|
1385
|
+
<p class="header">Parameters
|
|
1386
|
+
</p>
|
|
1387
|
+
<dl class="dr-parameters"><dt class="dr-param">width</dt>
|
|
1388
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1389
|
+
<dd class="dr-description">new width of the canvas</dd>
|
|
1390
|
+
<dt class="dr-param">height</dt>
|
|
1391
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1392
|
+
<dd class="dr-description">new height of the canvas</dd>
|
|
1393
|
+
</dl>
|
|
1394
|
+
</div><div class="Paper-setStart-section"><h3 id="Paper.setStart" class="dr-method"><i class="dr-trixie"> </i>Paper.setStart()<a href="#Paper.setStart" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3370 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L3370">➭</a></h3>
|
|
1395
|
+
<div class="extra" id="Paper.setStart-extra"></div></div><div class="dr-method"><p>Creates <a href="#Paper.set" class="dr-link">Paper.set</a>. All elements that will be created after calling this method and before calling
|
|
1396
|
+
<a href="#Paper.setFinish" class="dr-link">Paper.setFinish</a> will be added to the set.
|
|
1397
|
+
</p>
|
|
1398
|
+
<p class="header">Usage
|
|
1399
|
+
</p>
|
|
1400
|
+
<pre class="javascript code"><code>paper.setStart();
|
|
1401
|
+
paper.circle(<span class="d">10</span>, <span class="d">10</span>, <span class="d">5</span>),
|
|
1402
|
+
paper.circle(<span class="d">30</span>, <span class="d">10</span>, <span class="d">5</span>)
|
|
1403
|
+
<b>var</b> st<span class="s"> = </span>paper.setFinish();
|
|
1404
|
+
st.attr({fill: <i>"red"</i>}); <span class="c">// changes the fill of both circles</span>
|
|
1405
|
+
</code></pre>
|
|
1406
|
+
</div><div class="Paper-setViewBox-section"><h3 id="Paper.setViewBox" class="dr-method"><i class="dr-trixie"> </i>Paper.setViewBox(x, y, w, h, fit)<a href="#Paper.setViewBox" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3415 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L3415">➭</a></h3>
|
|
1407
|
+
<div class="extra" id="Paper.setViewBox-extra"></div></div><div class="dr-method"><p>Sets the view box of the paper. Practically it gives you ability to zoom and pan whole paper surface by
|
|
1408
|
+
specifying new boundaries.
|
|
1409
|
+
</p>
|
|
1410
|
+
<p class="header">Parameters
|
|
1411
|
+
</p>
|
|
1412
|
+
<dl class="dr-parameters"><dt class="dr-param">x</dt>
|
|
1413
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1414
|
+
<dd class="dr-description">new x position, default is <code>0</code></dd>
|
|
1415
|
+
<dt class="dr-param">y</dt>
|
|
1416
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1417
|
+
<dd class="dr-description">new y position, default is <code>0</code></dd>
|
|
1418
|
+
<dt class="dr-param">w</dt>
|
|
1419
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1420
|
+
<dd class="dr-description">new width of the canvas</dd>
|
|
1421
|
+
<dt class="dr-param">h</dt>
|
|
1422
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1423
|
+
<dd class="dr-description">new height of the canvas</dd>
|
|
1424
|
+
<dt class="dr-param">fit</dt>
|
|
1425
|
+
<dd class="dr-type"><em class="dr-type-boolean">boolean</em></dd>
|
|
1426
|
+
<dd class="dr-description"><code>true</code> if you want graphics to fit into new boundary box</dd>
|
|
1427
|
+
</dl>
|
|
1428
|
+
</div><div class="Paper-text-section"><h3 id="Paper.text" class="dr-method"><i class="dr-trixie"> </i>Paper.text(x, y, text)<a href="#Paper.text" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3328 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L3328">➭</a></h3>
|
|
1429
|
+
<div class="extra" id="Paper.text-extra"></div></div><div class="dr-method"><p>Draws a text string. If you need line breaks, put “\n” in the string.
|
|
1430
|
+
</p>
|
|
1431
|
+
<p class="header">Parameters
|
|
1432
|
+
</p>
|
|
1433
|
+
<dl class="dr-parameters"><dt class="dr-param">x</dt>
|
|
1434
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1435
|
+
<dd class="dr-description">x coordinate position</dd>
|
|
1436
|
+
<dt class="dr-param">y</dt>
|
|
1437
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1438
|
+
<dd class="dr-description">y coordinate position</dd>
|
|
1439
|
+
<dt class="dr-param">text</dt>
|
|
1440
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
1441
|
+
<dd class="dr-description">The text string to draw</dd>
|
|
1442
|
+
</dl>
|
|
1443
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Raphaël element object with type “text”</span></p>
|
|
1444
|
+
<p class="header">Usage
|
|
1445
|
+
</p>
|
|
1446
|
+
<pre class="javascript code"><code><b>var</b> t<span class="s"> = </span>paper.text(<span class="d">50</span>, <span class="d">50</span>, <i>"Raphaël\nkicks\nbutt!"</i>);
|
|
1447
|
+
</code></pre>
|
|
1448
|
+
</div><div class="Paper-top-section"><h3 id="Paper.top" class="dr-property"><i class="dr-trixie"> </i>Paper.top<a href="#Paper.top" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3424 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L3424">➭</a></h3>
|
|
1449
|
+
<div class="extra" id="Paper.top-extra"></div></div><div class="dr-property"><p>Points to the topmost element on the paper
|
|
1450
|
+
</p>
|
|
1451
|
+
</div><div class="Raphael-section"><h2 id="Raphael" class="dr-method"><i class="dr-trixie"> </i>Raphael(…)<a href="#Raphael" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 59 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L59">➭</a></h2>
|
|
1452
|
+
<div class="extra" id="Raphael-extra"></div></div><div class="dr-method"><p>Creates a canvas object on which to draw.
|
|
1453
|
+
You must do this first, as all future calls to drawing methods
|
|
1454
|
+
from this instance will be bound to this canvas.
|
|
1455
|
+
</p>
|
|
1456
|
+
<p class="header">Parameters
|
|
1457
|
+
</p>
|
|
1458
|
+
<dl class="dr-parameters"><dt class="dr-param">container</dt>
|
|
1459
|
+
<dd class="dr-type"><em class="dr-type-HTMLElement">HTMLElement</em> <em class="dr-type-string">string</em></dd>
|
|
1460
|
+
<dd class="dr-description">DOM element or its ID which is going to be a parent for drawing surface</dd>
|
|
1461
|
+
<dt class="dr-param">width</dt>
|
|
1462
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1463
|
+
<dd class="dr-description"> </dd>
|
|
1464
|
+
<dt class="dr-param">height</dt>
|
|
1465
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1466
|
+
<dd class="dr-description"> </dd>
|
|
1467
|
+
<dt class="dr-param optional">callback</dt>
|
|
1468
|
+
<dd class="dr-optional">optional</dd>
|
|
1469
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
1470
|
+
<dd class="dr-description">callback function which is going to be executed in the context of newly created paper</dd>
|
|
1471
|
+
</dl>
|
|
1472
|
+
<p>or
|
|
1473
|
+
</p>
|
|
1474
|
+
<dl class="dr-parameters"><dt class="dr-param">x</dt>
|
|
1475
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1476
|
+
<dd class="dr-description"> </dd>
|
|
1477
|
+
<dt class="dr-param">y</dt>
|
|
1478
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1479
|
+
<dd class="dr-description"> </dd>
|
|
1480
|
+
<dt class="dr-param">width</dt>
|
|
1481
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1482
|
+
<dd class="dr-description"> </dd>
|
|
1483
|
+
<dt class="dr-param">height</dt>
|
|
1484
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1485
|
+
<dd class="dr-description"> </dd>
|
|
1486
|
+
<dt class="dr-param optional">callback</dt>
|
|
1487
|
+
<dd class="dr-optional">optional</dd>
|
|
1488
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
1489
|
+
<dd class="dr-description">callback function which is going to be executed in the context of newly created paper</dd>
|
|
1490
|
+
</dl>
|
|
1491
|
+
<p>or
|
|
1492
|
+
</p>
|
|
1493
|
+
<dl class="dr-parameters"><dt class="dr-param">all</dt>
|
|
1494
|
+
<dd class="dr-type"><em class="dr-type-array">array</em></dd>
|
|
1495
|
+
<dd class="dr-description">(first 3 or 4 elements in the array are equal to [containerID, width, height] or [x, y, width, height]. The rest are element descriptions in format {type: type, <attributes>}). See <a href="#Paper.add" class="dr-link">Paper.add</a>.</dd>
|
|
1496
|
+
<dt class="dr-param optional">callback</dt>
|
|
1497
|
+
<dd class="dr-optional">optional</dd>
|
|
1498
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
1499
|
+
<dd class="dr-description">callback function which is going to be executed in the context of newly created paper</dd>
|
|
1500
|
+
</dl>
|
|
1501
|
+
<p>or
|
|
1502
|
+
</p>
|
|
1503
|
+
<dl class="dr-parameters"><dt class="dr-param">onReadyCallback</dt>
|
|
1504
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
1505
|
+
<dd class="dr-description">function that is going to be called on DOM ready event. You can also subscribe to this event via Eve’s “DOMLoad” event. In this case method returns <code>undefined</code>.</dd>
|
|
1506
|
+
</dl>
|
|
1507
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Paper" class="dr-link">Paper</a></span></p>
|
|
1508
|
+
<p class="header">Usage
|
|
1509
|
+
</p>
|
|
1510
|
+
<pre class="javascript code"><code><span class="c">// Each of the following examples create a canvas</span>
|
|
1511
|
+
<span class="c">// that is 320px wide by 200px high.</span>
|
|
1512
|
+
<span class="c">// Canvas is created at the viewport’s <span class="d">10</span>,<span class="d">50</span> coordinate.</span>
|
|
1513
|
+
<b>var</b> paper<span class="s"> = </span>Raphael(<span class="d">10</span>, <span class="d">50</span>, <span class="d">320</span>, <span class="d">200</span>);
|
|
1514
|
+
<span class="c">// Canvas is created at the top left corner of the #notepad element</span>
|
|
1515
|
+
<span class="c">// (or its top right corner <b>in</b> dir=<i>"rtl"</i> elements)</span>
|
|
1516
|
+
<b>var</b> paper<span class="s"> = </span>Raphael(document.getElementById(<i>"notepad"</i>), <span class="d">320</span>, <span class="d">200</span>);
|
|
1517
|
+
<span class="c">// Same as above</span>
|
|
1518
|
+
<b>var</b> paper<span class="s"> = </span>Raphael(<i>"notepad"</i>, <span class="d">320</span>, <span class="d">200</span>);
|
|
1519
|
+
<span class="c">// Image dump</span>
|
|
1520
|
+
<b>var</b> set<span class="s"> = </span>Raphael([<i>"notepad"</i>, <span class="d">320</span>, <span class="d">200</span>, {
|
|
1521
|
+
type: <i>"rect"</i>,
|
|
1522
|
+
x: <span class="d">10</span>,
|
|
1523
|
+
y: <span class="d">10</span>,
|
|
1524
|
+
width: <span class="d">25</span>,
|
|
1525
|
+
height: <span class="d">25</span>,
|
|
1526
|
+
stroke: <i>"#f00"</i>
|
|
1527
|
+
}, {
|
|
1528
|
+
type: <i>"text"</i>,
|
|
1529
|
+
x: <span class="d">30</span>,
|
|
1530
|
+
y: <span class="d">40</span>,
|
|
1531
|
+
text: <i>"Dump"</i>
|
|
1532
|
+
}]);
|
|
1533
|
+
</code></pre>
|
|
1534
|
+
</div><div class="Raphael-angle-section"><h3 id="Raphael.angle" class="dr-method"><i class="dr-trixie"> </i>Raphael.angle(x1, y1, x2, y2, [x3], [y3])<a href="#Raphael.angle" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 424 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L424">➭</a></h3>
|
|
1535
|
+
<div class="extra" id="Raphael.angle-extra"></div></div><div class="dr-method"><p>Returns angle between two or three points
|
|
1536
|
+
</p>
|
|
1537
|
+
<p class="header">Parameters
|
|
1538
|
+
</p>
|
|
1539
|
+
<dl class="dr-parameters"><dt class="dr-param">x1</dt>
|
|
1540
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1541
|
+
<dd class="dr-description">x coord of first point</dd>
|
|
1542
|
+
<dt class="dr-param">y1</dt>
|
|
1543
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1544
|
+
<dd class="dr-description">y coord of first point</dd>
|
|
1545
|
+
<dt class="dr-param">x2</dt>
|
|
1546
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1547
|
+
<dd class="dr-description">x coord of second point</dd>
|
|
1548
|
+
<dt class="dr-param">y2</dt>
|
|
1549
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1550
|
+
<dd class="dr-description">y coord of second point</dd>
|
|
1551
|
+
<dt class="dr-param optional">x3</dt>
|
|
1552
|
+
<dd class="dr-optional">optional</dd>
|
|
1553
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1554
|
+
<dd class="dr-description">x coord of third point</dd>
|
|
1555
|
+
<dt class="dr-param optional">y3</dt>
|
|
1556
|
+
<dd class="dr-optional">optional</dd>
|
|
1557
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1558
|
+
<dd class="dr-description">y coord of third point</dd>
|
|
1559
|
+
</dl>
|
|
1560
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">angle in degrees.</span></p>
|
|
1561
|
+
</div><div class="Raphael-animation-section"><h3 id="Raphael.animation" class="dr-method"><i class="dr-trixie"> </i>Raphael.animation(params, ms, [easing], [callback])<a href="#Raphael.animation" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 4442 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L4442">➭</a></h3>
|
|
1562
|
+
<div class="extra" id="Raphael.animation-extra"></div></div><div class="dr-method"><p>Creates an animation object that can be passed to the <a href="#Element.animate" class="dr-link">Element.animate</a> or <a href="#Element.animateWith" class="dr-link">Element.animateWith</a> methods.
|
|
1563
|
+
See also <a href="#Animation.delay" class="dr-link">Animation.delay</a> and <a href="#Animation.repeat" class="dr-link">Animation.repeat</a> methods.
|
|
1564
|
+
</p>
|
|
1565
|
+
<p class="header">Parameters
|
|
1566
|
+
</p>
|
|
1567
|
+
<dl class="dr-parameters"><dt class="dr-param">params</dt>
|
|
1568
|
+
<dd class="dr-type"><em class="dr-type-object">object</em></dd>
|
|
1569
|
+
<dd class="dr-description">final attributes for the element, see also <a href="#Element.attr" class="dr-link">Element.attr</a></dd>
|
|
1570
|
+
<dt class="dr-param">ms</dt>
|
|
1571
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1572
|
+
<dd class="dr-description">number of milliseconds for animation to run</dd>
|
|
1573
|
+
<dt class="dr-param optional">easing</dt>
|
|
1574
|
+
<dd class="dr-optional">optional</dd>
|
|
1575
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
1576
|
+
<dd class="dr-description">easing type. Accept one of <a href="#Raphael.easing_formulas" class="dr-link">Raphael.easing_formulas</a> or CSS format: <code>cubic‐bezier(XX, XX, XX, XX)</code></dd>
|
|
1577
|
+
<dt class="dr-param optional">callback</dt>
|
|
1578
|
+
<dd class="dr-optional">optional</dd>
|
|
1579
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
1580
|
+
<dd class="dr-description">callback function. Will be called at the end of animation.</dd>
|
|
1581
|
+
</dl>
|
|
1582
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Animation" class="dr-link">Animation</a></span></p>
|
|
1583
|
+
</div><div class="Raphael-bezierBBox-section"><h3 id="Raphael.bezierBBox" class="dr-method"><i class="dr-trixie"> </i>Raphael.bezierBBox(…)<a href="#Raphael.bezierBBox" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1258 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L1258">➭</a></h3>
|
|
1584
|
+
<div class="extra" id="Raphael.bezierBBox-extra"></div></div><div class="dr-method"><p>Utility method
|
|
1585
|
+
Return bounding box of a given cubic bezier curve
|
|
1586
|
+
</p>
|
|
1587
|
+
<p class="header">Parameters
|
|
1588
|
+
</p>
|
|
1589
|
+
<dl class="dr-parameters"><dt class="dr-param">p1x</dt>
|
|
1590
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1591
|
+
<dd class="dr-description">x of the first point of the curve</dd>
|
|
1592
|
+
<dt class="dr-param">p1y</dt>
|
|
1593
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1594
|
+
<dd class="dr-description">y of the first point of the curve</dd>
|
|
1595
|
+
<dt class="dr-param">c1x</dt>
|
|
1596
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1597
|
+
<dd class="dr-description">x of the first anchor of the curve</dd>
|
|
1598
|
+
<dt class="dr-param">c1y</dt>
|
|
1599
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1600
|
+
<dd class="dr-description">y of the first anchor of the curve</dd>
|
|
1601
|
+
<dt class="dr-param">c2x</dt>
|
|
1602
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1603
|
+
<dd class="dr-description">x of the second anchor of the curve</dd>
|
|
1604
|
+
<dt class="dr-param">c2y</dt>
|
|
1605
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1606
|
+
<dd class="dr-description">y of the second anchor of the curve</dd>
|
|
1607
|
+
<dt class="dr-param">p2x</dt>
|
|
1608
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1609
|
+
<dd class="dr-description">x of the second point of the curve</dd>
|
|
1610
|
+
<dt class="dr-param">p2y</dt>
|
|
1611
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1612
|
+
<dd class="dr-description">y of the second point of the curve</dd>
|
|
1613
|
+
</dl>
|
|
1614
|
+
<p>or
|
|
1615
|
+
</p>
|
|
1616
|
+
<dl class="dr-parameters"><dt class="dr-param">bez</dt>
|
|
1617
|
+
<dd class="dr-type"><em class="dr-type-array">array</em></dd>
|
|
1618
|
+
<dd class="dr-description">array of six points for bezier curve</dd>
|
|
1619
|
+
</dl>
|
|
1620
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">point information in format:</span></p>
|
|
1621
|
+
<ol class="dr-json"><li>{<ol class="dr-json"><li> min: {<ol class="dr-json"><li><span class="dr-json-key">x:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x coordinate of the left point</span>
|
|
1622
|
+
<li><span class="dr-json-key">y:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y coordinate of the top point</span>
|
|
1623
|
+
</ol></li><li> }</li><li> max: {<ol class="dr-json"><li><span class="dr-json-key">x:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x coordinate of the right point</span>
|
|
1624
|
+
<li><span class="dr-json-key">y:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y coordinate of the bottom point</span>
|
|
1625
|
+
</ol></li><li> }</li></ol></li><li>}</li></ol>
|
|
1626
|
+
</div><div class="Raphael-color-section"><h3 id="Raphael.color" class="dr-method"><i class="dr-trixie"> </i>Raphael.color(clr)<a href="#Raphael.color" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 623 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L623">➭</a></h3>
|
|
1627
|
+
<div class="extra" id="Raphael.color-extra"></div></div><div class="dr-method"><p>Parses the color string and returns object with all values for the given color.
|
|
1628
|
+
</p>
|
|
1629
|
+
<p class="header">Parameters
|
|
1630
|
+
</p>
|
|
1631
|
+
<dl class="dr-parameters"><dt class="dr-param">clr</dt>
|
|
1632
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
1633
|
+
<dd class="dr-description">color string in one of the supported formats (see <a href="#Raphael.getRGB" class="dr-link">Raphael.getRGB</a>)</dd>
|
|
1634
|
+
</dl>
|
|
1635
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Combined RGB <em class="amp">&</em> HSB object in format:</span></p>
|
|
1636
|
+
<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">r</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">red,</span>
|
|
1637
|
+
<li><span class="dr-json-key">g</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">green,</span>
|
|
1638
|
+
<li><span class="dr-json-key">b</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">blue,</span>
|
|
1639
|
+
<li><span class="dr-json-key">hex</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">color in HTML/CSS format: #••••••,</span>
|
|
1640
|
+
<li><span class="dr-json-key">error</span><span class="dr-type"><em class="dr-type-boolean">boolean</em></span><span class="dr-json-description"><code>true</code> if string can’t be parsed,</span>
|
|
1641
|
+
<li><span class="dr-json-key">h</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">hue,</span>
|
|
1642
|
+
<li><span class="dr-json-key">s</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">saturation,</span>
|
|
1643
|
+
<li><span class="dr-json-key">v</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">value (brightness),</span>
|
|
1644
|
+
<li><span class="dr-json-key">l</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">lightness</span>
|
|
1645
|
+
</ol></li><li>}</li></ol>
|
|
1646
|
+
</div><div class="Raphael-createUUID-section"><h3 id="Raphael.createUUID" class="dr-method"><i class="dr-trixie"> </i>Raphael.createUUID()<a href="#Raphael.createUUID" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 497 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L497">➭</a></h3>
|
|
1647
|
+
<div class="extra" id="Raphael.createUUID-extra"></div></div><div class="dr-method"><p>Returns RFC4122, version 4 ID
|
|
1648
|
+
</p>
|
|
1649
|
+
</div><div class="Raphael-deg-section"><h3 id="Raphael.deg" class="dr-method"><i class="dr-trixie"> </i>Raphael.deg(deg)<a href="#Raphael.deg" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 457 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L457">➭</a></h3>
|
|
1650
|
+
<div class="extra" id="Raphael.deg-extra"></div></div><div class="dr-method"><p>Transform angle to degrees
|
|
1651
|
+
</p>
|
|
1652
|
+
<p class="header">Parameters
|
|
1653
|
+
</p>
|
|
1654
|
+
<dl class="dr-parameters"><dt class="dr-param">deg</dt>
|
|
1655
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1656
|
+
<dd class="dr-description">angle in radians</dd>
|
|
1657
|
+
</dl>
|
|
1658
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">angle in degrees.</span></p>
|
|
1659
|
+
</div><div class="Raphael-easing_formulas-section"><h3 id="Raphael.easing_formulas" class="dr-property"><i class="dr-trixie"> </i>Raphael.easing_formulas<a href="#Raphael.easing_formulas" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3866 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L3866">➭</a></h3>
|
|
1660
|
+
<div class="extra" id="Raphael.easing_formulas-extra"></div></div><div class="dr-property"><p>Object that contains easing formulas for animation. You could extend it with your own. By default it has following list of easing:
|
|
1661
|
+
</p>
|
|
1662
|
+
<ul>
|
|
1663
|
+
<li>“linear”</li>
|
|
1664
|
+
<li>“<” or “easeIn” or “ease-in”</li>
|
|
1665
|
+
<li>“>” or “easeOut” or “ease-out”</li>
|
|
1666
|
+
<li>“<>” or “easeInOut” or “ease-in-out”</li>
|
|
1667
|
+
<li>“backIn” or “back-in”</li>
|
|
1668
|
+
<li>“backOut” or “back-out”</li>
|
|
1669
|
+
<li>“elastic”</li>
|
|
1670
|
+
<li>“bounce”</li>
|
|
1671
|
+
</ul>
|
|
1672
|
+
<p>See also <a href="http://raphaeljs.com/easing.html">Easing demo</a>.</p>
|
|
1673
|
+
</div><div class="Raphael-el-section"><h3 id="Raphael.el" class="dr-property"><i class="dr-trixie"> </i>Raphael.el<a href="#Raphael.el" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2788 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2788">➭</a></h3>
|
|
1674
|
+
<div class="extra" id="Raphael.el-extra"></div></div><div class="dr-property"><em class="dr-type dr-type-object">object</em><p>You can add your own method to elements. This is usefull when you want to hack default functionality or
|
|
1675
|
+
want to wrap some common transformation or attributes in one method. In difference to canvas methods,
|
|
1676
|
+
you can redefine element method at any time. Expending element methods wouldn’t affect set.
|
|
1677
|
+
</p>
|
|
1678
|
+
<p class="header">Usage
|
|
1679
|
+
</p>
|
|
1680
|
+
<pre class="javascript code"><code>Raphael.el.red<span class="s"> = </span><b>function</b> () {
|
|
1681
|
+
<b>this</b>.attr({fill: <i>"#f00"</i>});
|
|
1682
|
+
};
|
|
1683
|
+
<span class="c">// then use it</span>
|
|
1684
|
+
paper.circle(<span class="d">100</span>, <span class="d">100</span>, <span class="d">20</span>).red();
|
|
1685
|
+
</code></pre>
|
|
1686
|
+
</div><div class="Raphael-findDotsAtSegment-section"><h3 id="Raphael.findDotsAtSegment" class="dr-method"><i class="dr-trixie"> </i>Raphael.findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t)<a href="#Raphael.findDotsAtSegment" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1200 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L1200">➭</a></h3>
|
|
1687
|
+
<div class="extra" id="Raphael.findDotsAtSegment-extra"></div></div><div class="dr-method"><p>Utility method
|
|
1688
|
+
Find dot coordinates on the given cubic bezier curve at the given t.
|
|
1689
|
+
</p>
|
|
1690
|
+
<p class="header">Parameters
|
|
1691
|
+
</p>
|
|
1692
|
+
<dl class="dr-parameters"><dt class="dr-param">p1x</dt>
|
|
1693
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1694
|
+
<dd class="dr-description">x of the first point of the curve</dd>
|
|
1695
|
+
<dt class="dr-param">p1y</dt>
|
|
1696
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1697
|
+
<dd class="dr-description">y of the first point of the curve</dd>
|
|
1698
|
+
<dt class="dr-param">c1x</dt>
|
|
1699
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1700
|
+
<dd class="dr-description">x of the first anchor of the curve</dd>
|
|
1701
|
+
<dt class="dr-param">c1y</dt>
|
|
1702
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1703
|
+
<dd class="dr-description">y of the first anchor of the curve</dd>
|
|
1704
|
+
<dt class="dr-param">c2x</dt>
|
|
1705
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1706
|
+
<dd class="dr-description">x of the second anchor of the curve</dd>
|
|
1707
|
+
<dt class="dr-param">c2y</dt>
|
|
1708
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1709
|
+
<dd class="dr-description">y of the second anchor of the curve</dd>
|
|
1710
|
+
<dt class="dr-param">p2x</dt>
|
|
1711
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1712
|
+
<dd class="dr-description">x of the second point of the curve</dd>
|
|
1713
|
+
<dt class="dr-param">p2y</dt>
|
|
1714
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1715
|
+
<dd class="dr-description">y of the second point of the curve</dd>
|
|
1716
|
+
<dt class="dr-param">t</dt>
|
|
1717
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1718
|
+
<dd class="dr-description">position on the curve (0..1)</dd>
|
|
1719
|
+
</dl>
|
|
1720
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">point information in format:</span></p>
|
|
1721
|
+
<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">x:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x coordinate of the point</span>
|
|
1722
|
+
<li><span class="dr-json-key">y:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y coordinate of the point</span>
|
|
1723
|
+
<li> m: {<ol class="dr-json"><li><span class="dr-json-key">x:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x coordinate of the left anchor</span>
|
|
1724
|
+
<li><span class="dr-json-key">y:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y coordinate of the left anchor</span>
|
|
1725
|
+
</ol></li><li> }</li><li> n: {<ol class="dr-json"><li><span class="dr-json-key">x:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x coordinate of the right anchor</span>
|
|
1726
|
+
<li><span class="dr-json-key">y:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y coordinate of the right anchor</span>
|
|
1727
|
+
</ol></li><li> }</li><li> start: {<ol class="dr-json"><li><span class="dr-json-key">x:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x coordinate of the start of the curve</span>
|
|
1728
|
+
<li><span class="dr-json-key">y:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y coordinate of the start of the curve</span>
|
|
1729
|
+
</ol></li><li> }</li><li> end: {<ol class="dr-json"><li><span class="dr-json-key">x:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x coordinate of the end of the curve</span>
|
|
1730
|
+
<li><span class="dr-json-key">y:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y coordinate of the end of the curve</span>
|
|
1731
|
+
</ol></li><li> }</li><li><span class="dr-json-key">alpha:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">angle of the curve derivative at the point</span>
|
|
1732
|
+
</ol></li><li>}</li></ol>
|
|
1733
|
+
</div><div class="Raphael-fn-section"><h3 id="Raphael.fn" class="dr-property"><i class="dr-trixie"> </i>Raphael.fn<a href="#Raphael.fn" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 371 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L371">➭</a></h3>
|
|
1734
|
+
<div class="extra" id="Raphael.fn-extra"></div></div><div class="dr-property"><em class="dr-type dr-type-object">object</em><p>You can add your own method to the canvas. For example if you want to draw a pie chart,
|
|
1735
|
+
you can create your own pie chart function and ship it as a Raphaël plugin. To do this
|
|
1736
|
+
you need to extend the <code>Raphael.fn</code> object. You should modify the <code>fn</code> object before a
|
|
1737
|
+
Raphaël instance is created, otherwise it will take no effect. Please note that the
|
|
1738
|
+
ability for namespaced plugins was removed in Raphael 2.0. It is up to the plugin to
|
|
1739
|
+
ensure any namespacing ensures proper context.
|
|
1740
|
+
</p>
|
|
1741
|
+
<p class="header">Usage
|
|
1742
|
+
</p>
|
|
1743
|
+
<pre class="javascript code"><code>Raphael.fn.arrow<span class="s"> = </span><b>function</b> (x1, y1, x2, y2, size) {
|
|
1744
|
+
<b>return</b> <b>this</b>.path( ... );
|
|
1745
|
+
};
|
|
1746
|
+
<span class="c">// or create namespace</span>
|
|
1747
|
+
Raphael.fn.mystuff<span class="s"> = </span>{
|
|
1748
|
+
arrow: <b>function</b> () {…},
|
|
1749
|
+
star: <b>function</b> () {…},
|
|
1750
|
+
<span class="c">// etc…</span>
|
|
1751
|
+
};
|
|
1752
|
+
<b>var</b> paper<span class="s"> = </span>Raphael(<span class="d">10</span>, <span class="d">10</span>, <span class="d">630</span>, <span class="d">480</span>);
|
|
1753
|
+
<span class="c">// then use it</span>
|
|
1754
|
+
paper.arrow(<span class="d">10</span>, <span class="d">10</span>, <span class="d">30</span>, <span class="d">30</span>, <span class="d">5</span>).attr({fill: <i>"#f00"</i>});
|
|
1755
|
+
paper.mystuff.arrow();
|
|
1756
|
+
paper.mystuff.star();
|
|
1757
|
+
</code></pre>
|
|
1758
|
+
</div><div class="Raphael-format-section"><h3 id="Raphael.format" class="dr-method"><i class="dr-trixie"> </i>Raphael.format(token, …)<a href="#Raphael.format" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 5077 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L5077">➭</a></h3>
|
|
1759
|
+
<div class="extra" id="Raphael.format-extra"></div></div><div class="dr-method"><p>Simple format function. Replaces construction of type “<code>{<number>}</code>” to the corresponding argument.
|
|
1760
|
+
</p>
|
|
1761
|
+
<p class="header">Parameters
|
|
1762
|
+
</p>
|
|
1763
|
+
<dl class="dr-parameters"><dt class="dr-param">token</dt>
|
|
1764
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
1765
|
+
<dd class="dr-description">string to format</dd>
|
|
1766
|
+
<dt class="dr-param">…</dt>
|
|
1767
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
1768
|
+
<dd class="dr-description">rest of arguments will be treated as parameters for replacement</dd>
|
|
1769
|
+
</dl>
|
|
1770
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">formated string</span></p>
|
|
1771
|
+
<p class="header">Usage
|
|
1772
|
+
</p>
|
|
1773
|
+
<pre class="javascript code"><code><b>var</b> x<span class="s"> = </span><span class="d">10</span>,
|
|
1774
|
+
y<span class="s"> = </span><span class="d">20</span>,
|
|
1775
|
+
width<span class="s"> = </span><span class="d">40</span>,
|
|
1776
|
+
height<span class="s"> = </span><span class="d">50</span>;
|
|
1777
|
+
<span class="c">// <b>this</b> will draw a rectangular shape equivalent to <i>"M10,20h40v50h-40z"</i></span>
|
|
1778
|
+
paper.path(Raphael.format(<i>"M{<span class="d">0</span>},{<span class="d">1</span>}h{<span class="d">2</span>}v{<span class="d">3</span>}h{<span class="d">4</span>}z"</i>, x, y, width, height, -width));
|
|
1779
|
+
</code></pre>
|
|
1780
|
+
</div><div class="Raphael-fullfill-section"><h3 id="Raphael.fullfill" class="dr-method"><i class="dr-trixie"> </i>Raphael.fullfill(token, json)<a href="#Raphael.fullfill" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 5107 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L5107">➭</a></h3>
|
|
1781
|
+
<div class="extra" id="Raphael.fullfill-extra"></div></div><div class="dr-method"><p>A little bit more advanced format function than <a href="#Raphael.format" class="dr-link">Raphael.format</a>. Replaces construction of type “<code>{<name>}</code>” to the corresponding argument.
|
|
1782
|
+
</p>
|
|
1783
|
+
<p class="header">Parameters
|
|
1784
|
+
</p>
|
|
1785
|
+
<dl class="dr-parameters"><dt class="dr-param">token</dt>
|
|
1786
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
1787
|
+
<dd class="dr-description">string to format</dd>
|
|
1788
|
+
<dt class="dr-param">json</dt>
|
|
1789
|
+
<dd class="dr-type"><em class="dr-type-object">object</em></dd>
|
|
1790
|
+
<dd class="dr-description">object which properties will be used as a replacement</dd>
|
|
1791
|
+
</dl>
|
|
1792
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">formated string</span></p>
|
|
1793
|
+
<p class="header">Usage
|
|
1794
|
+
</p>
|
|
1795
|
+
<pre class="javascript code"><code><span class="c">// <b>this</b> will draw a rectangular shape equivalent to <i>"M10,20h40v50h-40z"</i></span>
|
|
1796
|
+
paper.path(Raphael.fullfill(<i>"M{x},{y}h{dim.width}v{dim.height}h{dim['negative width']}z"</i>, {
|
|
1797
|
+
x: <span class="d">10</span>,
|
|
1798
|
+
y: <span class="d">20</span>,
|
|
1799
|
+
dim: {
|
|
1800
|
+
width: <span class="d">40</span>,
|
|
1801
|
+
height: <span class="d">50</span>,
|
|
1802
|
+
<i>"negative width"</i>: -<span class="d">40</span>
|
|
1803
|
+
}
|
|
1804
|
+
}));
|
|
1805
|
+
</code></pre>
|
|
1806
|
+
</div><div class="Raphael-getColor-section"><h3 id="Raphael.getColor" class="dr-method"><i class="dr-trixie"> </i>Raphael.getColor([value])<a href="#Raphael.getColor" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 999 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L999">➭</a></h3>
|
|
1807
|
+
<div class="extra" id="Raphael.getColor-extra"></div></div><div class="dr-method"><p>On each call returns next colour in the spectrum. To reset it back to red call <a href="#Raphael.getColor.reset" class="dr-link">Raphael.getColor.reset</a>
|
|
1808
|
+
</p>
|
|
1809
|
+
<p class="header">Parameters
|
|
1810
|
+
</p>
|
|
1811
|
+
<dl class="dr-parameters"><dt class="dr-param optional">value</dt>
|
|
1812
|
+
<dd class="dr-optional">optional</dd>
|
|
1813
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1814
|
+
<dd class="dr-description">brightness, default is <code>0.75</code></dd>
|
|
1815
|
+
</dl>
|
|
1816
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">hex representation of the colour.</span></p>
|
|
1817
|
+
</div><div class="Raphael-getColor-reset-section"><h4 id="Raphael.getColor.reset" class="dr-method"><i class="dr-trixie"> </i>Raphael.getColor.reset()<a href="#Raphael.getColor.reset" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1016 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L1016">➭</a></h4>
|
|
1818
|
+
<div class="extra" id="Raphael.getColor.reset-extra"></div></div><div class="dr-method"><p>Resets spectrum position for <a href="#Raphael.getColor" class="dr-link">Raphael.getColor</a> back to red.
|
|
1819
|
+
</p>
|
|
1820
|
+
</div><div class="Raphael-getPointAtLength-section"><h3 id="Raphael.getPointAtLength" class="dr-method"><i class="dr-trixie"> </i>Raphael.getPointAtLength(path, length)<a href="#Raphael.getPointAtLength" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3775 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L3775">➭</a></h3>
|
|
1821
|
+
<div class="extra" id="Raphael.getPointAtLength-extra"></div></div><div class="dr-method"><p>Return coordinates of the point located at the given length on the given path.
|
|
1822
|
+
</p>
|
|
1823
|
+
<p class="header">Parameters
|
|
1824
|
+
</p>
|
|
1825
|
+
<dl class="dr-parameters"><dt class="dr-param">path</dt>
|
|
1826
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
1827
|
+
<dd class="dr-description">SVG path string</dd>
|
|
1828
|
+
<dt class="dr-param">length</dt>
|
|
1829
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1830
|
+
<dd class="dr-description"> </dd>
|
|
1831
|
+
</dl>
|
|
1832
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">representation of the point:</span></p>
|
|
1833
|
+
<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">x:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x coordinate</span>
|
|
1834
|
+
<li><span class="dr-json-key">y:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y coordinate</span>
|
|
1835
|
+
<li><span class="dr-json-key">alpha:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">angle of derivative</span>
|
|
1836
|
+
</ol></li><li>}</li></ol>
|
|
1837
|
+
</div><div class="Raphael-getRGB-section"><h3 id="Raphael.getRGB" class="dr-method"><i class="dr-trixie"> </i>Raphael.getRGB(colour)<a href="#Raphael.getRGB" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 877 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L877">➭</a></h3>
|
|
1838
|
+
<div class="extra" id="Raphael.getRGB-extra"></div></div><div class="dr-method"><p>Parses colour string as RGB object
|
|
1839
|
+
</p>
|
|
1840
|
+
<p class="header">Parameters
|
|
1841
|
+
</p>
|
|
1842
|
+
<dl class="dr-parameters"><dt class="dr-param">colour</dt>
|
|
1843
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
1844
|
+
<dd class="dr-description">colour string in one of formats:</dd>
|
|
1845
|
+
</dl>
|
|
1846
|
+
<ul>
|
|
1847
|
+
<li>Colour name (“<code>red</code>”, “<code>green</code>”, “<code>cornflowerblue</code>”, etc)</li>
|
|
1848
|
+
<li>#••• — shortened HTML colour: (“<code>#000</code>”, “<code>#fc0</code>”, etc)</li>
|
|
1849
|
+
<li>#•••••• — full length HTML colour: (“<code>#000000</code>”, “<code>#bd2300</code>”)</li>
|
|
1850
|
+
<li>rgb(•••, •••, •••) — red, green and blue channels’ values: (“<code>rgb(200, 100, 0)</code>”)</li>
|
|
1851
|
+
<li>rgb(•••%, •••%, •••%) — same as above, but in %: (“<code>rgb(100%, 175%, 0%)</code>”)</li>
|
|
1852
|
+
<li>hsb(•••, •••, •••) — hue, saturation and brightness values: (“<code>hsb(0.5, 0.25, 1)</code>”)</li>
|
|
1853
|
+
<li>hsb(•••%, •••%, •••%) — same as above, but in %</li>
|
|
1854
|
+
<li>hsl(•••, •••, •••) — same as hsb</li>
|
|
1855
|
+
<li>hsl(•••%, •••%, •••%) — same as hsb</li>
|
|
1856
|
+
</ul>
|
|
1857
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">RGB object in format:</span></p>
|
|
1858
|
+
<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">r</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">red,</span>
|
|
1859
|
+
<li><span class="dr-json-key">g</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">green,</span>
|
|
1860
|
+
<li><span class="dr-json-key">b</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">blue</span>
|
|
1861
|
+
<li><span class="dr-json-key">hex</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">color in HTML/CSS format: #••••••,</span>
|
|
1862
|
+
<li><span class="dr-json-key">error</span><span class="dr-type"><em class="dr-type-boolean">boolean</em></span><span class="dr-json-description">true if string can’t be parsed</span>
|
|
1863
|
+
</ol></li><li>}</li></ol>
|
|
1864
|
+
</div><div class="Raphael-getSubpath-section"><h3 id="Raphael.getSubpath" class="dr-method"><i class="dr-trixie"> </i>Raphael.getSubpath(path, from, to)<a href="#Raphael.getSubpath" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3790 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L3790">➭</a></h3>
|
|
1865
|
+
<div class="extra" id="Raphael.getSubpath-extra"></div></div><div class="dr-method"><p>Return subpath of a given path from given length to given length.
|
|
1866
|
+
</p>
|
|
1867
|
+
<p class="header">Parameters
|
|
1868
|
+
</p>
|
|
1869
|
+
<dl class="dr-parameters"><dt class="dr-param">path</dt>
|
|
1870
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
1871
|
+
<dd class="dr-description">SVG path string</dd>
|
|
1872
|
+
<dt class="dr-param">from</dt>
|
|
1873
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1874
|
+
<dd class="dr-description">position of the start of the segment</dd>
|
|
1875
|
+
<dt class="dr-param">to</dt>
|
|
1876
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1877
|
+
<dd class="dr-description">position of the end of the segment</dd>
|
|
1878
|
+
</dl>
|
|
1879
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">pathstring for the segment</span></p>
|
|
1880
|
+
</div><div class="Raphael-getTotalLength-section"><h3 id="Raphael.getTotalLength" class="dr-method"><i class="dr-trixie"> </i>Raphael.getTotalLength(path)<a href="#Raphael.getTotalLength" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3756 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L3756">➭</a></h3>
|
|
1881
|
+
<div class="extra" id="Raphael.getTotalLength-extra"></div></div><div class="dr-method"><p>Returns length of the given path in pixels.
|
|
1882
|
+
</p>
|
|
1883
|
+
<p class="header">Parameters
|
|
1884
|
+
</p>
|
|
1885
|
+
<dl class="dr-parameters"><dt class="dr-param">path</dt>
|
|
1886
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
1887
|
+
<dd class="dr-description">SVG path string.</dd>
|
|
1888
|
+
</dl>
|
|
1889
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">length.</span></p>
|
|
1890
|
+
</div><div class="Raphael-hsb-section"><h3 id="Raphael.hsb" class="dr-method"><i class="dr-trixie"> </i>Raphael.hsb(h, s, b)<a href="#Raphael.hsb" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 959 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L959">➭</a></h3>
|
|
1891
|
+
<div class="extra" id="Raphael.hsb-extra"></div></div><div class="dr-method"><p>Converts HSB values to hex representation of the colour.
|
|
1892
|
+
</p>
|
|
1893
|
+
<p class="header">Parameters
|
|
1894
|
+
</p>
|
|
1895
|
+
<dl class="dr-parameters"><dt class="dr-param">h</dt>
|
|
1896
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1897
|
+
<dd class="dr-description">hue</dd>
|
|
1898
|
+
<dt class="dr-param">s</dt>
|
|
1899
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1900
|
+
<dd class="dr-description">saturation</dd>
|
|
1901
|
+
<dt class="dr-param">b</dt>
|
|
1902
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1903
|
+
<dd class="dr-description">value or brightness</dd>
|
|
1904
|
+
</dl>
|
|
1905
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">hex representation of the colour.</span></p>
|
|
1906
|
+
</div><div class="Raphael-hsb2rgb-section"><h3 id="Raphael.hsb2rgb" class="dr-method"><i class="dr-trixie"> </i>Raphael.hsb2rgb(h, s, v)<a href="#Raphael.hsb2rgb" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 673 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L673">➭</a></h3>
|
|
1907
|
+
<div class="extra" id="Raphael.hsb2rgb-extra"></div></div><div class="dr-method"><p>Converts HSB values to RGB object.
|
|
1908
|
+
</p>
|
|
1909
|
+
<p class="header">Parameters
|
|
1910
|
+
</p>
|
|
1911
|
+
<dl class="dr-parameters"><dt class="dr-param">h</dt>
|
|
1912
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1913
|
+
<dd class="dr-description">hue</dd>
|
|
1914
|
+
<dt class="dr-param">s</dt>
|
|
1915
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1916
|
+
<dd class="dr-description">saturation</dd>
|
|
1917
|
+
<dt class="dr-param">v</dt>
|
|
1918
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1919
|
+
<dd class="dr-description">value or brightness</dd>
|
|
1920
|
+
</dl>
|
|
1921
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">RGB object in format:</span></p>
|
|
1922
|
+
<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">r</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">red,</span>
|
|
1923
|
+
<li><span class="dr-json-key">g</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">green,</span>
|
|
1924
|
+
<li><span class="dr-json-key">b</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">blue,</span>
|
|
1925
|
+
<li><span class="dr-json-key">hex</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">color in HTML/CSS format: #••••••</span>
|
|
1926
|
+
</ol></li><li>}</li></ol>
|
|
1927
|
+
</div><div class="Raphael-hsl-section"><h3 id="Raphael.hsl" class="dr-method"><i class="dr-trixie"> </i>Raphael.hsl(h, s, l)<a href="#Raphael.hsl" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 973 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L973">➭</a></h3>
|
|
1928
|
+
<div class="extra" id="Raphael.hsl-extra"></div></div><div class="dr-method"><p>Converts HSL values to hex representation of the colour.
|
|
1929
|
+
</p>
|
|
1930
|
+
<p class="header">Parameters
|
|
1931
|
+
</p>
|
|
1932
|
+
<dl class="dr-parameters"><dt class="dr-param">h</dt>
|
|
1933
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1934
|
+
<dd class="dr-description">hue</dd>
|
|
1935
|
+
<dt class="dr-param">s</dt>
|
|
1936
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1937
|
+
<dd class="dr-description">saturation</dd>
|
|
1938
|
+
<dt class="dr-param">l</dt>
|
|
1939
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1940
|
+
<dd class="dr-description">luminosity</dd>
|
|
1941
|
+
</dl>
|
|
1942
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">hex representation of the colour.</span></p>
|
|
1943
|
+
</div><div class="Raphael-hsl2rgb-section"><h3 id="Raphael.hsl2rgb" class="dr-method"><i class="dr-trixie"> </i>Raphael.hsl2rgb(h, s, l)<a href="#Raphael.hsl2rgb" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 710 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L710">➭</a></h3>
|
|
1944
|
+
<div class="extra" id="Raphael.hsl2rgb-extra"></div></div><div class="dr-method"><p>Converts HSL values to RGB object.
|
|
1945
|
+
</p>
|
|
1946
|
+
<p class="header">Parameters
|
|
1947
|
+
</p>
|
|
1948
|
+
<dl class="dr-parameters"><dt class="dr-param">h</dt>
|
|
1949
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1950
|
+
<dd class="dr-description">hue</dd>
|
|
1951
|
+
<dt class="dr-param">s</dt>
|
|
1952
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1953
|
+
<dd class="dr-description">saturation</dd>
|
|
1954
|
+
<dt class="dr-param">l</dt>
|
|
1955
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
1956
|
+
<dd class="dr-description">luminosity</dd>
|
|
1957
|
+
</dl>
|
|
1958
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">RGB object in format:</span></p>
|
|
1959
|
+
<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">r</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">red,</span>
|
|
1960
|
+
<li><span class="dr-json-key">g</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">green,</span>
|
|
1961
|
+
<li><span class="dr-json-key">b</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">blue,</span>
|
|
1962
|
+
<li><span class="dr-json-key">hex</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">color in HTML/CSS format: #••••••</span>
|
|
1963
|
+
</ol></li><li>}</li></ol>
|
|
1964
|
+
</div><div class="Raphael-is-section"><h3 id="Raphael.is" class="dr-method"><i class="dr-trixie"> </i>Raphael.is(o, type)<a href="#Raphael.is" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 384 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L384">➭</a></h3>
|
|
1965
|
+
<div class="extra" id="Raphael.is-extra"></div></div><div class="dr-method"><p>Handfull replacement for <code>typeof</code> operator.
|
|
1966
|
+
</p>
|
|
1967
|
+
<p class="header">Parameters
|
|
1968
|
+
</p>
|
|
1969
|
+
<dl class="dr-parameters"><dt class="dr-param">o</dt>
|
|
1970
|
+
<dd class="dr-type"><em class="dr-type-…">…</em></dd>
|
|
1971
|
+
<dd class="dr-description">any object or primitive</dd>
|
|
1972
|
+
<dt class="dr-param">type</dt>
|
|
1973
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
1974
|
+
<dd class="dr-description">name of the type, i.e. “string”, “function”, “number”, etc.</dd>
|
|
1975
|
+
</dl>
|
|
1976
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-boolean">boolean</em> <span class="dr-description">is given value is of given type</span></p>
|
|
1977
|
+
</div><div class="Raphael-isBBoxIntersect-section"><h3 id="Raphael.isBBoxIntersect" class="dr-method"><i class="dr-trixie"> </i>Raphael.isBBoxIntersect(bbox1, bbox2)<a href="#Raphael.isBBoxIntersect" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1300 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L1300">➭</a></h3>
|
|
1978
|
+
<div class="extra" id="Raphael.isBBoxIntersect-extra"></div></div><div class="dr-method"><p>Utility method
|
|
1979
|
+
Returns <code>true</code> if two bounding boxes intersect
|
|
1980
|
+
</p>
|
|
1981
|
+
<p class="header">Parameters
|
|
1982
|
+
</p>
|
|
1983
|
+
<dl class="dr-parameters"><dt class="dr-param">bbox1</dt>
|
|
1984
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
1985
|
+
<dd class="dr-description">first bounding box</dd>
|
|
1986
|
+
<dt class="dr-param">bbox2</dt>
|
|
1987
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
1988
|
+
<dd class="dr-description">second bounding box</dd>
|
|
1989
|
+
</dl>
|
|
1990
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-boolean">boolean</em> <span class="dr-description"><code>true</code> if they intersect</span></p>
|
|
1991
|
+
</div><div class="Raphael-isPointInsideBBox-section"><h3 id="Raphael.isPointInsideBBox" class="dr-method"><i class="dr-trixie"> </i>Raphael.isPointInsideBBox(bbox, x, y)<a href="#Raphael.isPointInsideBBox" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1285 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L1285">➭</a></h3>
|
|
1992
|
+
<div class="extra" id="Raphael.isPointInsideBBox-extra"></div></div><div class="dr-method"><p>Utility method
|
|
1993
|
+
Returns <code>true</code> if given point is inside bounding boxes.
|
|
1994
|
+
</p>
|
|
1995
|
+
<p class="header">Parameters
|
|
1996
|
+
</p>
|
|
1997
|
+
<dl class="dr-parameters"><dt class="dr-param">bbox</dt>
|
|
1998
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
1999
|
+
<dd class="dr-description">bounding box</dd>
|
|
2000
|
+
<dt class="dr-param">x</dt>
|
|
2001
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
2002
|
+
<dd class="dr-description">x coordinate of the point</dd>
|
|
2003
|
+
<dt class="dr-param">y</dt>
|
|
2004
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
2005
|
+
<dd class="dr-description">y coordinate of the point</dd>
|
|
2006
|
+
</dl>
|
|
2007
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-boolean">boolean</em> <span class="dr-description"><code>true</code> if point inside</span></p>
|
|
2008
|
+
</div><div class="Raphael-isPointInsidePath-section"><h3 id="Raphael.isPointInsidePath" class="dr-method"><i class="dr-trixie"> </i>Raphael.isPointInsidePath(path, x, y)<a href="#Raphael.isPointInsidePath" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1545 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L1545">➭</a></h3>
|
|
2009
|
+
<div class="extra" id="Raphael.isPointInsidePath-extra"></div></div><div class="dr-method"><p>Utility method
|
|
2010
|
+
Returns <code>true</code> if given point is inside a given closed path.
|
|
2011
|
+
</p>
|
|
2012
|
+
<p class="header">Parameters
|
|
2013
|
+
</p>
|
|
2014
|
+
<dl class="dr-parameters"><dt class="dr-param">path</dt>
|
|
2015
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
2016
|
+
<dd class="dr-description">path string</dd>
|
|
2017
|
+
<dt class="dr-param">x</dt>
|
|
2018
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
2019
|
+
<dd class="dr-description">x of the point</dd>
|
|
2020
|
+
<dt class="dr-param">y</dt>
|
|
2021
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
2022
|
+
<dd class="dr-description">y of the point</dd>
|
|
2023
|
+
</dl>
|
|
2024
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-boolean">boolean</em> <span class="dr-description">true, if point is inside the path</span></p>
|
|
2025
|
+
</div><div class="Raphael-mapPath-section"><h3 id="Raphael.mapPath" class="dr-method"><i class="dr-trixie"> </i>Raphael.mapPath(path, matrix)<a href="#Raphael.mapPath" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 294 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L294">➭</a></h3>
|
|
2026
|
+
<div class="extra" id="Raphael.mapPath-extra"></div></div><div class="dr-method"><p>Transform the path string with given matrix.
|
|
2027
|
+
</p>
|
|
2028
|
+
<p class="header">Parameters
|
|
2029
|
+
</p>
|
|
2030
|
+
<dl class="dr-parameters"><dt class="dr-param">path</dt>
|
|
2031
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
2032
|
+
<dd class="dr-description">path string</dd>
|
|
2033
|
+
<dt class="dr-param">matrix</dt>
|
|
2034
|
+
<dd class="dr-type"><em class="dr-type-object">object</em></dd>
|
|
2035
|
+
<dd class="dr-description">see <a href="#Matrix" class="dr-link">Matrix</a></dd>
|
|
2036
|
+
</dl>
|
|
2037
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">transformed path string</span></p>
|
|
2038
|
+
</div><div class="Raphael-matrix-section"><h3 id="Raphael.matrix" class="dr-method"><i class="dr-trixie"> </i>Raphael.matrix(a, b, c, d, e, f)<a href="#Raphael.matrix" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2387 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2387">➭</a></h3>
|
|
2039
|
+
<div class="extra" id="Raphael.matrix-extra"></div></div><div class="dr-method"><p>Utility method
|
|
2040
|
+
Returns matrix based on given parameters.
|
|
2041
|
+
</p>
|
|
2042
|
+
<p class="header">Parameters
|
|
2043
|
+
</p>
|
|
2044
|
+
<dl class="dr-parameters"><dt class="dr-param">a</dt>
|
|
2045
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
2046
|
+
<dd class="dr-description"> </dd>
|
|
2047
|
+
<dt class="dr-param">b</dt>
|
|
2048
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
2049
|
+
<dd class="dr-description"> </dd>
|
|
2050
|
+
<dt class="dr-param">c</dt>
|
|
2051
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
2052
|
+
<dd class="dr-description"> </dd>
|
|
2053
|
+
<dt class="dr-param">d</dt>
|
|
2054
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
2055
|
+
<dd class="dr-description"> </dd>
|
|
2056
|
+
<dt class="dr-param">e</dt>
|
|
2057
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
2058
|
+
<dd class="dr-description"> </dd>
|
|
2059
|
+
<dt class="dr-param">f</dt>
|
|
2060
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
2061
|
+
<dd class="dr-description"> </dd>
|
|
2062
|
+
</dl>
|
|
2063
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Matrix" class="dr-link">Matrix</a></span></p>
|
|
2064
|
+
</div><div class="Raphael-ninja-section"><h3 id="Raphael.ninja" class="dr-method"><i class="dr-trixie"> </i>Raphael.ninja()<a href="#Raphael.ninja" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 5144 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L5144">➭</a></h3>
|
|
2065
|
+
<div class="extra" id="Raphael.ninja-extra"></div></div><div class="dr-method"><p>If you want to leave no trace of Raphaël (Well, Raphaël creates only one global variable <code>Raphael</code>, but anyway.) You can use <code>ninja</code> method.
|
|
2066
|
+
Beware, that in this case plugins could stop working, because they are depending on global variable existance.
|
|
2067
|
+
</p>
|
|
2068
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Raphael object</span></p>
|
|
2069
|
+
<p class="header">Usage
|
|
2070
|
+
</p>
|
|
2071
|
+
<pre class="javascript code"><code>(<b>function</b> (local_raphael) {
|
|
2072
|
+
<b>var</b> paper<span class="s"> = </span>local_raphael(<span class="d">10</span>, <span class="d">10</span>, <span class="d">320</span>, <span class="d">200</span>);
|
|
2073
|
+
…
|
|
2074
|
+
})(Raphael.ninja());
|
|
2075
|
+
</code></pre>
|
|
2076
|
+
</div><div class="Raphael-parsePathString-section"><h3 id="Raphael.parsePathString" class="dr-method"><i class="dr-trixie"> </i>Raphael.parsePathString(pathString)<a href="#Raphael.parsePathString" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1069 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L1069">➭</a></h3>
|
|
2077
|
+
<div class="extra" id="Raphael.parsePathString-extra"></div></div><div class="dr-method"><p>Utility method
|
|
2078
|
+
Parses given path string into an array of arrays of path segments.
|
|
2079
|
+
</p>
|
|
2080
|
+
<p class="header">Parameters
|
|
2081
|
+
</p>
|
|
2082
|
+
<dl class="dr-parameters"><dt class="dr-param">pathString</dt>
|
|
2083
|
+
<dd class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-array">array</em></dd>
|
|
2084
|
+
<dd class="dr-description">path string or array of segments (in the last case it will be returned straight away)</dd>
|
|
2085
|
+
</dl>
|
|
2086
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">array of segments.</span></p>
|
|
2087
|
+
</div><div class="Raphael-parseTransformString-section"><h3 id="Raphael.parseTransformString" class="dr-method"><i class="dr-trixie"> </i>Raphael.parseTransformString(TString)<a href="#Raphael.parseTransformString" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1120 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L1120">➭</a></h3>
|
|
2088
|
+
<div class="extra" id="Raphael.parseTransformString-extra"></div></div><div class="dr-method"><p>Utility method
|
|
2089
|
+
Parses given path string into an array of transformations.
|
|
2090
|
+
</p>
|
|
2091
|
+
<p class="header">Parameters
|
|
2092
|
+
</p>
|
|
2093
|
+
<dl class="dr-parameters"><dt class="dr-param">TString</dt>
|
|
2094
|
+
<dd class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-array">array</em></dd>
|
|
2095
|
+
<dd class="dr-description">transform string or array of transformations (in the last case it will be returned straight away)</dd>
|
|
2096
|
+
</dl>
|
|
2097
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">array of transformations.</span></p>
|
|
2098
|
+
</div><div class="Raphael-path2curve-section"><h3 id="Raphael.path2curve" class="dr-method"><i class="dr-trixie"> </i>Raphael.path2curve(pathString)<a href="#Raphael.path2curve" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2370 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2370">➭</a></h3>
|
|
2099
|
+
<div class="extra" id="Raphael.path2curve-extra"></div></div><div class="dr-method"><p>Utility method
|
|
2100
|
+
Converts path to a new path where all segments are cubic bezier curves.
|
|
2101
|
+
</p>
|
|
2102
|
+
<p class="header">Parameters
|
|
2103
|
+
</p>
|
|
2104
|
+
<dl class="dr-parameters"><dt class="dr-param">pathString</dt>
|
|
2105
|
+
<dd class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-array">array</em></dd>
|
|
2106
|
+
<dd class="dr-description">path string or array of segments</dd>
|
|
2107
|
+
</dl>
|
|
2108
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">array of segments.</span></p>
|
|
2109
|
+
</div><div class="Raphael-pathBBox-section"><h3 id="Raphael.pathBBox" class="dr-method"><i class="dr-trixie"> </i>Raphael.pathBBox(path)<a href="#Raphael.pathBBox" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1574 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L1574">➭</a></h3>
|
|
2110
|
+
<div class="extra" id="Raphael.pathBBox-extra"></div></div><div class="dr-method"><p>Utility method
|
|
2111
|
+
Return bounding box of a given path
|
|
2112
|
+
</p>
|
|
2113
|
+
<p class="header">Parameters
|
|
2114
|
+
</p>
|
|
2115
|
+
<dl class="dr-parameters"><dt class="dr-param">path</dt>
|
|
2116
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
2117
|
+
<dd class="dr-description">path string</dd>
|
|
2118
|
+
</dl>
|
|
2119
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">bounding box</span></p>
|
|
2120
|
+
<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">x:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x coordinate of the left top point of the box</span>
|
|
2121
|
+
<li><span class="dr-json-key">y:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y coordinate of the left top point of the box</span>
|
|
2122
|
+
<li><span class="dr-json-key">x2:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x coordinate of the right bottom point of the box</span>
|
|
2123
|
+
<li><span class="dr-json-key">y2:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y coordinate of the right bottom point of the box</span>
|
|
2124
|
+
<li><span class="dr-json-key">width:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">width of the box</span>
|
|
2125
|
+
<li><span class="dr-json-key">height:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">height of the box</span>
|
|
2126
|
+
</ol></li><li>}</li></ol>
|
|
2127
|
+
</div><div class="Raphael-pathIntersection-section"><h3 id="Raphael.pathIntersection" class="dr-method"><i class="dr-trixie"> </i>Raphael.pathIntersection(path1, path2)<a href="#Raphael.pathIntersection" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1473 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L1473">➭</a></h3>
|
|
2128
|
+
<div class="extra" id="Raphael.pathIntersection-extra"></div></div><div class="dr-method"><p>Utility method
|
|
2129
|
+
Finds intersections of two paths
|
|
2130
|
+
</p>
|
|
2131
|
+
<p class="header">Parameters
|
|
2132
|
+
</p>
|
|
2133
|
+
<dl class="dr-parameters"><dt class="dr-param">path1</dt>
|
|
2134
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
2135
|
+
<dd class="dr-description">path string</dd>
|
|
2136
|
+
<dt class="dr-param">path2</dt>
|
|
2137
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
2138
|
+
<dd class="dr-description">path string</dd>
|
|
2139
|
+
</dl>
|
|
2140
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">dots of intersection</span></p>
|
|
2141
|
+
<ol class="dr-json"><li>[<li> {<ol class="dr-json"><li><span class="dr-json-key">x:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x coordinate of the point</span>
|
|
2142
|
+
<li><span class="dr-json-key">y:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y coordinate of the point</span>
|
|
2143
|
+
<li><span class="dr-json-key">t1:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">t value for segment of path1</span>
|
|
2144
|
+
<li><span class="dr-json-key">t2:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">t value for segment of path2</span>
|
|
2145
|
+
<li><span class="dr-json-key">segment1:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">order number for segment of path1</span>
|
|
2146
|
+
<li><span class="dr-json-key">segment2:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">order number for segment of path2</span>
|
|
2147
|
+
<li><span class="dr-json-key">bez1:</span><span class="dr-type"><em class="dr-type-array">array</em></span><span class="dr-json-description">eight coordinates representing beziér curve for the segment of path1</span>
|
|
2148
|
+
<li><span class="dr-json-key">bez2:</span><span class="dr-type"><em class="dr-type-array">array</em></span><span class="dr-json-description">eight coordinates representing beziér curve for the segment of path2</span>
|
|
2149
|
+
</ol></li><li> }</li><li>]</ol>
|
|
2150
|
+
</div><div class="Raphael-pathToRelative-section"><h3 id="Raphael.pathToRelative" class="dr-method"><i class="dr-trixie"> </i>Raphael.pathToRelative(pathString)<a href="#Raphael.pathToRelative" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2357 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2357">➭</a></h3>
|
|
2151
|
+
<div class="extra" id="Raphael.pathToRelative-extra"></div></div><div class="dr-method"><p>Utility method
|
|
2152
|
+
Converts path to relative form
|
|
2153
|
+
</p>
|
|
2154
|
+
<p class="header">Parameters
|
|
2155
|
+
</p>
|
|
2156
|
+
<dl class="dr-parameters"><dt class="dr-param">pathString</dt>
|
|
2157
|
+
<dd class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-array">array</em></dd>
|
|
2158
|
+
<dd class="dr-description">path string or array of segments</dd>
|
|
2159
|
+
</dl>
|
|
2160
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">array of segments.</span></p>
|
|
2161
|
+
</div><div class="Raphael-rad-section"><h3 id="Raphael.rad" class="dr-method"><i class="dr-trixie"> </i>Raphael.rad(deg)<a href="#Raphael.rad" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 445 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L445">➭</a></h3>
|
|
2162
|
+
<div class="extra" id="Raphael.rad-extra"></div></div><div class="dr-method"><p>Transform angle to radians
|
|
2163
|
+
</p>
|
|
2164
|
+
<p class="header">Parameters
|
|
2165
|
+
</p>
|
|
2166
|
+
<dl class="dr-parameters"><dt class="dr-param">deg</dt>
|
|
2167
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
2168
|
+
<dd class="dr-description">angle in degrees</dd>
|
|
2169
|
+
</dl>
|
|
2170
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">angle in radians.</span></p>
|
|
2171
|
+
</div><div class="Raphael-registerFont-section"><h3 id="Raphael.registerFont" class="dr-method"><i class="dr-trixie"> </i>Raphael.registerFont(font)<a href="#Raphael.registerFont" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 4874 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L4874">➭</a></h3>
|
|
2172
|
+
<div class="extra" id="Raphael.registerFont-extra"></div></div><div class="dr-method"><p>Adds given font to the registered set of fonts for Raphaël. Should be used as an internal call from within Cufón’s font file.
|
|
2173
|
+
Returns original parameter, so it could be used with chaining.
|
|
2174
|
+
</p>
|
|
2175
|
+
<a href="http://wiki.github.com/sorccu/cufon/about">More about Cufón and how to convert your font form TTF, OTF, etc to JavaScript file.</a>
|
|
2176
|
+
<p class="header">Parameters
|
|
2177
|
+
</p>
|
|
2178
|
+
<dl class="dr-parameters"><dt class="dr-param">font</dt>
|
|
2179
|
+
<dd class="dr-type"><em class="dr-type-object">object</em></dd>
|
|
2180
|
+
<dd class="dr-description">the font to register</dd>
|
|
2181
|
+
</dl>
|
|
2182
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">the font you passed in</span></p>
|
|
2183
|
+
<p class="header">Usage
|
|
2184
|
+
</p>
|
|
2185
|
+
<pre class="javascript code"><code>Cufon.registerFont(Raphael.registerFont({…}));
|
|
2186
|
+
</code></pre>
|
|
2187
|
+
</div><div class="Raphael-rgb-section"><h3 id="Raphael.rgb" class="dr-method"><i class="dr-trixie"> </i>Raphael.rgb(r, g, b)<a href="#Raphael.rgb" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 987 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L987">➭</a></h3>
|
|
2188
|
+
<div class="extra" id="Raphael.rgb-extra"></div></div><div class="dr-method"><p>Converts RGB values to hex representation of the colour.
|
|
2189
|
+
</p>
|
|
2190
|
+
<p class="header">Parameters
|
|
2191
|
+
</p>
|
|
2192
|
+
<dl class="dr-parameters"><dt class="dr-param">r</dt>
|
|
2193
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
2194
|
+
<dd class="dr-description">red</dd>
|
|
2195
|
+
<dt class="dr-param">g</dt>
|
|
2196
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
2197
|
+
<dd class="dr-description">green</dd>
|
|
2198
|
+
<dt class="dr-param">b</dt>
|
|
2199
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
2200
|
+
<dd class="dr-description">blue</dd>
|
|
2201
|
+
</dl>
|
|
2202
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">hex representation of the colour.</span></p>
|
|
2203
|
+
</div><div class="Raphael-rgb2hsb-section"><h3 id="Raphael.rgb2hsb" class="dr-method"><i class="dr-trixie"> </i>Raphael.rgb2hsb(r, g, b)<a href="#Raphael.rgb2hsb" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 750 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L750">➭</a></h3>
|
|
2204
|
+
<div class="extra" id="Raphael.rgb2hsb-extra"></div></div><div class="dr-method"><p>Converts RGB values to HSB object.
|
|
2205
|
+
</p>
|
|
2206
|
+
<p class="header">Parameters
|
|
2207
|
+
</p>
|
|
2208
|
+
<dl class="dr-parameters"><dt class="dr-param">r</dt>
|
|
2209
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
2210
|
+
<dd class="dr-description">red</dd>
|
|
2211
|
+
<dt class="dr-param">g</dt>
|
|
2212
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
2213
|
+
<dd class="dr-description">green</dd>
|
|
2214
|
+
<dt class="dr-param">b</dt>
|
|
2215
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
2216
|
+
<dd class="dr-description">blue</dd>
|
|
2217
|
+
</dl>
|
|
2218
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">HSB object in format:</span></p>
|
|
2219
|
+
<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">h</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">hue</span>
|
|
2220
|
+
<li><span class="dr-json-key">s</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">saturation</span>
|
|
2221
|
+
<li><span class="dr-json-key">b</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">brightness</span>
|
|
2222
|
+
</ol></li><li>}</li></ol>
|
|
2223
|
+
</div><div class="Raphael-rgb2hsl-section"><h3 id="Raphael.rgb2hsl" class="dr-method"><i class="dr-trixie"> </i>Raphael.rgb2hsl(r, g, b)<a href="#Raphael.rgb2hsl" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 784 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L784">➭</a></h3>
|
|
2224
|
+
<div class="extra" id="Raphael.rgb2hsl-extra"></div></div><div class="dr-method"><p>Converts RGB values to HSL object.
|
|
2225
|
+
</p>
|
|
2226
|
+
<p class="header">Parameters
|
|
2227
|
+
</p>
|
|
2228
|
+
<dl class="dr-parameters"><dt class="dr-param">r</dt>
|
|
2229
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
2230
|
+
<dd class="dr-description">red</dd>
|
|
2231
|
+
<dt class="dr-param">g</dt>
|
|
2232
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
2233
|
+
<dd class="dr-description">green</dd>
|
|
2234
|
+
<dt class="dr-param">b</dt>
|
|
2235
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
2236
|
+
<dd class="dr-description">blue</dd>
|
|
2237
|
+
</dl>
|
|
2238
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">HSL object in format:</span></p>
|
|
2239
|
+
<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">h</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">hue</span>
|
|
2240
|
+
<li><span class="dr-json-key">s</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">saturation</span>
|
|
2241
|
+
<li><span class="dr-json-key">l</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">luminosity</span>
|
|
2242
|
+
</ol></li><li>}</li></ol>
|
|
2243
|
+
</div><div class="Raphael-setWindow-section"><h3 id="Raphael.setWindow" class="dr-method"><i class="dr-trixie"> </i>Raphael.setWindow(newwin)<a href="#Raphael.setWindow" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 515 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L515">➭</a></h3>
|
|
2244
|
+
<div class="extra" id="Raphael.setWindow-extra"></div></div><div class="dr-method"><p>Used when you need to draw in <code><iframe></code>. Switched window to the iframe one.
|
|
2245
|
+
</p>
|
|
2246
|
+
<p class="header">Parameters
|
|
2247
|
+
</p>
|
|
2248
|
+
<dl class="dr-parameters"><dt class="dr-param">newwin</dt>
|
|
2249
|
+
<dd class="dr-type"><em class="dr-type-window">window</em></dd>
|
|
2250
|
+
<dd class="dr-description">new window object</dd>
|
|
2251
|
+
</dl>
|
|
2252
|
+
</div><div class="Raphael-snapTo-section"><h3 id="Raphael.snapTo" class="dr-method"><i class="dr-trixie"> </i>Raphael.snapTo(values, value, [tolerance])<a href="#Raphael.snapTo" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 471 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L471">➭</a></h3>
|
|
2253
|
+
<div class="extra" id="Raphael.snapTo-extra"></div></div><div class="dr-method"><p>Snaps given value to given grid.
|
|
2254
|
+
</p>
|
|
2255
|
+
<p class="header">Parameters
|
|
2256
|
+
</p>
|
|
2257
|
+
<dl class="dr-parameters"><dt class="dr-param">values</dt>
|
|
2258
|
+
<dd class="dr-type"><em class="dr-type-array">array</em> <em class="dr-type-number">number</em></dd>
|
|
2259
|
+
<dd class="dr-description">given array of values or step of the grid</dd>
|
|
2260
|
+
<dt class="dr-param">value</dt>
|
|
2261
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
2262
|
+
<dd class="dr-description">value to adjust</dd>
|
|
2263
|
+
<dt class="dr-param optional">tolerance</dt>
|
|
2264
|
+
<dd class="dr-optional">optional</dd>
|
|
2265
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
2266
|
+
<dd class="dr-description">tolerance for snapping. Default is <code>10</code>.</dd>
|
|
2267
|
+
</dl>
|
|
2268
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">adjusted value.</span></p>
|
|
2269
|
+
</div><div class="Raphael-st-section"><h3 id="Raphael.st" class="dr-property"><i class="dr-trixie"> </i>Raphael.st<a href="#Raphael.st" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 5168 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L5168">➭</a></h3>
|
|
2270
|
+
<div class="extra" id="Raphael.st-extra"></div></div><div class="dr-property"><em class="dr-type dr-type-object">object</em><p>You can add your own method to elements and sets. It is wise to add a set method for each element method
|
|
2271
|
+
you added, so you will be able to call the same method on sets too.
|
|
2272
|
+
See also <a href="#Raphael.el" class="dr-link">Raphael.el</a>.
|
|
2273
|
+
</p>
|
|
2274
|
+
<p class="header">Usage
|
|
2275
|
+
</p>
|
|
2276
|
+
<pre class="javascript code"><code>Raphael.el.red<span class="s"> = </span><b>function</b> () {
|
|
2277
|
+
<b>this</b>.attr({fill: <i>"#f00"</i>});
|
|
2278
|
+
};
|
|
2279
|
+
Raphael.st.red<span class="s"> = </span><b>function</b> () {
|
|
2280
|
+
<b>this</b>.forEach(<b>function</b> (el) {
|
|
2281
|
+
el.red();
|
|
2282
|
+
});
|
|
2283
|
+
};
|
|
2284
|
+
<span class="c">// then use it</span>
|
|
2285
|
+
paper.set(paper.circle(<span class="d">100</span>, <span class="d">100</span>, <span class="d">20</span>), paper.circle(<span class="d">110</span>, <span class="d">100</span>, <span class="d">20</span>)).red();
|
|
2286
|
+
</code></pre>
|
|
2287
|
+
</div><div class="Raphael-svg-section"><h3 id="Raphael.svg" class="dr-property"><i class="dr-trixie"> </i>Raphael.svg<a href="#Raphael.svg" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 337 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L337">➭</a></h3>
|
|
2288
|
+
<div class="extra" id="Raphael.svg-extra"></div></div><div class="dr-property"><em class="dr-type dr-type-boolean">boolean</em><p><code>true</code> if browser supports SVG.
|
|
2289
|
+
</p>
|
|
2290
|
+
</div><div class="Raphael-toMatrix-section"><h3 id="Raphael.toMatrix" class="dr-method"><i class="dr-trixie"> </i>Raphael.toMatrix(path, transform)<a href="#Raphael.toMatrix" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2143 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2143">➭</a></h3>
|
|
2291
|
+
<div class="extra" id="Raphael.toMatrix-extra"></div></div><div class="dr-method"><p>Utility method
|
|
2292
|
+
Returns matrix of transformations applied to a given path
|
|
2293
|
+
</p>
|
|
2294
|
+
<p class="header">Parameters
|
|
2295
|
+
</p>
|
|
2296
|
+
<dl class="dr-parameters"><dt class="dr-param">path</dt>
|
|
2297
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
2298
|
+
<dd class="dr-description">path string</dd>
|
|
2299
|
+
<dt class="dr-param">transform</dt>
|
|
2300
|
+
<dd class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-array">array</em></dd>
|
|
2301
|
+
<dd class="dr-description">transformation string</dd>
|
|
2302
|
+
</dl>
|
|
2303
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Matrix" class="dr-link">Matrix</a></span></p>
|
|
2304
|
+
</div><div class="Raphael-transformPath-section"><h3 id="Raphael.transformPath" class="dr-method"><i class="dr-trixie"> </i>Raphael.transformPath(path, transform)<a href="#Raphael.transformPath" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2168 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L2168">➭</a></h3>
|
|
2305
|
+
<div class="extra" id="Raphael.transformPath-extra"></div></div><div class="dr-method"><p>Utility method
|
|
2306
|
+
Returns path transformed by a given transformation
|
|
2307
|
+
</p>
|
|
2308
|
+
<p class="header">Parameters
|
|
2309
|
+
</p>
|
|
2310
|
+
<dl class="dr-parameters"><dt class="dr-param">path</dt>
|
|
2311
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
2312
|
+
<dd class="dr-description">path string</dd>
|
|
2313
|
+
<dt class="dr-param">transform</dt>
|
|
2314
|
+
<dd class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-array">array</em></dd>
|
|
2315
|
+
<dd class="dr-description">transformation string</dd>
|
|
2316
|
+
</dl>
|
|
2317
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">path</span></p>
|
|
2318
|
+
</div><div class="Raphael-type-section"><h3 id="Raphael.type" class="dr-property"><i class="dr-trixie"> </i>Raphael.type<a href="#Raphael.type" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 319 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L319">➭</a></h3>
|
|
2319
|
+
<div class="extra" id="Raphael.type-extra"></div></div><div class="dr-property"><em class="dr-type dr-type-string">string</em><p>Can be “SVG”, “VML” or empty, depending on browser support.
|
|
2320
|
+
</p>
|
|
2321
|
+
</div><div class="Raphael-vml-section"><h3 id="Raphael.vml" class="dr-property"><i class="dr-trixie"> </i>Raphael.vml<a href="#Raphael.vml" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 343 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L343">➭</a></h3>
|
|
2322
|
+
<div class="extra" id="Raphael.vml-extra"></div></div><div class="dr-property"><em class="dr-type dr-type-boolean">boolean</em><p><code>true</code> if browser supports VML.
|
|
2323
|
+
</p>
|
|
2324
|
+
</div><div class="Set-section"><h2 id="Set" class="undefined"><i class="dr-trixie"> </i>Set<a href="#Set" title="Link to this section" class="dr-hash">⚓</a></h2>
|
|
2325
|
+
<div class="extra" id="Set-extra"></div></div><div class="Set-clear-section"><h3 id="Set.clear" class="dr-method"><i class="dr-trixie"> </i>Set.clear()<a href="#Set.clear" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 4734 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L4734">➭</a></h3>
|
|
2326
|
+
<div class="extra" id="Set.clear-extra"></div></div><div class="dr-method"><p>Removeds all elements from the set
|
|
2327
|
+
</p>
|
|
2328
|
+
</div><div class="Set-exclude-section"><h3 id="Set.exclude" class="dr-method"><i class="dr-trixie"> </i>Set.exclude(element)<a href="#Set.exclude" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 4789 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L4789">➭</a></h3>
|
|
2329
|
+
<div class="extra" id="Set.exclude-extra"></div></div><div class="dr-method"><p>Removes given element from the set
|
|
2330
|
+
</p>
|
|
2331
|
+
<p class="header">Parameters
|
|
2332
|
+
</p>
|
|
2333
|
+
<dl class="dr-parameters"><dt class="dr-param">element</dt>
|
|
2334
|
+
<dd class="dr-type"><em class="dr-type-object">object</em></dd>
|
|
2335
|
+
<dd class="dr-description">element to remove</dd>
|
|
2336
|
+
</dl>
|
|
2337
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-boolean">boolean</em> <span class="dr-description"><code>true</code> if object was found <em class="amp">&</em> removed from the set</span></p>
|
|
2338
|
+
</div><div class="Set-forEach-section"><h3 id="Set.forEach" class="dr-method"><i class="dr-trixie"> </i>Set.forEach(callback, thisArg)<a href="#Set.forEach" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 4698 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L4698">➭</a></h3>
|
|
2339
|
+
<div class="extra" id="Set.forEach-extra"></div></div><div class="dr-method"><p>Executes given function for each element in the set.
|
|
2340
|
+
</p>
|
|
2341
|
+
<p>If function returns <code>false</code> it will stop loop running.
|
|
2342
|
+
</p>
|
|
2343
|
+
<p class="header">Parameters
|
|
2344
|
+
</p>
|
|
2345
|
+
<dl class="dr-parameters"><dt class="dr-param">callback</dt>
|
|
2346
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
2347
|
+
<dd class="dr-description">function to run</dd>
|
|
2348
|
+
<dt class="dr-param">thisArg</dt>
|
|
2349
|
+
<dd class="dr-type"><em class="dr-type-object">object</em></dd>
|
|
2350
|
+
<dd class="dr-description">context object for the callback</dd>
|
|
2351
|
+
</dl>
|
|
2352
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Set object</span></p>
|
|
2353
|
+
</div><div class="Set-pop-section"><h3 id="Set.pop" class="dr-method"><i class="dr-trixie"> </i>Set.pop()<a href="#Set.pop" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 4680 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L4680">➭</a></h3>
|
|
2354
|
+
<div class="extra" id="Set.pop-extra"></div></div><div class="dr-method"><p>Removes last element and returns it.
|
|
2355
|
+
</p>
|
|
2356
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">element</span></p>
|
|
2357
|
+
</div><div class="Set-push-section"><h3 id="Set.push" class="dr-method"><i class="dr-trixie"> </i>Set.push()<a href="#Set.push" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 4660 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L4660">➭</a></h3>
|
|
2358
|
+
<div class="extra" id="Set.push-extra"></div></div><div class="dr-method"><p>Adds each argument to the current set.
|
|
2359
|
+
</p>
|
|
2360
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">original element</span></p>
|
|
2361
|
+
</div><div class="Set-splice-section"><h3 id="Set.splice" class="dr-method"><i class="dr-trixie"> </i>Set.splice(index, count, [insertion…])<a href="#Set.splice" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 4752 in the source" href="https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L4752">➭</a></h3>
|
|
2362
|
+
<div class="extra" id="Set.splice-extra"></div></div><div class="dr-method"><p>Removes given element from the set
|
|
2363
|
+
</p>
|
|
2364
|
+
<p class="header">Parameters
|
|
2365
|
+
</p>
|
|
2366
|
+
<dl class="dr-parameters"><dt class="dr-param">index</dt>
|
|
2367
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
2368
|
+
<dd class="dr-description">position of the deletion</dd>
|
|
2369
|
+
<dt class="dr-param">count</dt>
|
|
2370
|
+
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
|
|
2371
|
+
<dd class="dr-description">number of element to remove</dd>
|
|
2372
|
+
<dt class="dr-param optional">insertion…</dt>
|
|
2373
|
+
<dd class="dr-optional">optional</dd>
|
|
2374
|
+
<dd class="dr-type"><em class="dr-type-object">object</em></dd>
|
|
2375
|
+
<dd class="dr-description">elements to insert</dd>
|
|
2376
|
+
</dl>
|
|
2377
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">set elements that were deleted</span></p>
|
|
2378
|
+
</div><div class="eve-section"><h2 id="eve" class="dr-method"><i class="dr-trixie"> </i>eve(name, scope, varargs)<a href="#eve" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 34 in the source" href="https://github.com/DmitryBaranovskiy/eve/blob/master/eve.js#L34">➭</a></h2>
|
|
2379
|
+
<div class="extra" id="eve-extra"></div></div><div class="dr-method"><p>Fires event with given <code>name</code>, given scope and other parameters.
|
|
2380
|
+
</p>
|
|
2381
|
+
<p class="header">Arguments
|
|
2382
|
+
</p>
|
|
2383
|
+
<dl class="dr-parameters"><dt class="dr-param">name</dt>
|
|
2384
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
2385
|
+
<dd class="dr-description">name of the event, dot (<code>.</code>) or slash (<code>/</code>) separated</dd>
|
|
2386
|
+
<dt class="dr-param">scope</dt>
|
|
2387
|
+
<dd class="dr-type"><em class="dr-type-object">object</em></dd>
|
|
2388
|
+
<dd class="dr-description">context for the event handlers</dd>
|
|
2389
|
+
<dt class="dr-param">varargs</dt>
|
|
2390
|
+
<dd class="dr-type"><em class="dr-type-...">...</em></dd>
|
|
2391
|
+
<dd class="dr-description">the rest of arguments will be sent to event handlers</dd>
|
|
2392
|
+
</dl>
|
|
2393
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">array of returned values from the listeners</span></p>
|
|
2394
|
+
</div><div class="eve-listeners-section"><h3 id="eve.listeners" class="dr-method"><i class="dr-trixie"> </i>eve.listeners(name)<a href="#eve.listeners" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 106 in the source" href="https://github.com/DmitryBaranovskiy/eve/blob/master/eve.js#L106">➭</a></h3>
|
|
2395
|
+
<div class="extra" id="eve.listeners-extra"></div></div><div class="dr-method"><p>Internal method which gives you array of all event handlers that will be triggered by the given <code>name</code>.
|
|
2396
|
+
</p>
|
|
2397
|
+
<p class="header">Arguments
|
|
2398
|
+
</p>
|
|
2399
|
+
<dl class="dr-parameters"><dt class="dr-param">name</dt>
|
|
2400
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
2401
|
+
<dd class="dr-description">name of the event, dot (<code>.</code>) or slash (<code>/</code>) separated</dd>
|
|
2402
|
+
</dl>
|
|
2403
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">array of event handlers</span></p>
|
|
2404
|
+
</div><div class="eve-nt-section"><h3 id="eve.nt" class="dr-method"><i class="dr-trixie"> </i>eve.nt([subname])<a href="#eve.nt" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 203 in the source" href="https://github.com/DmitryBaranovskiy/eve/blob/master/eve.js#L203">➭</a></h3>
|
|
2405
|
+
<div class="extra" id="eve.nt-extra"></div></div><div class="dr-method"><p>Could be used inside event handler to figure out actual name of the event.
|
|
2406
|
+
</p>
|
|
2407
|
+
<p class="header">Arguments
|
|
2408
|
+
</p>
|
|
2409
|
+
<dl class="dr-parameters"><dt class="dr-param optional">subname</dt>
|
|
2410
|
+
<dd class="dr-optional">optional</dd>
|
|
2411
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
2412
|
+
<dd class="dr-description">subname of the event</dd>
|
|
2413
|
+
</dl>
|
|
2414
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">name of the event, if <code>subname</code> is not specified</span></p>
|
|
2415
|
+
<p>or
|
|
2416
|
+
</p>
|
|
2417
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-boolean">boolean</em> <span class="dr-description"><code>true</code>, if current event’s name contains <code>subname</code></span></p>
|
|
2418
|
+
</div><div class="eve-off-section"><h3 id="eve.off" class="dr-method"><i class="dr-trixie"> </i>eve.off(name, f)<a href="#eve.off" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 220 in the source" href="https://github.com/DmitryBaranovskiy/eve/blob/master/eve.js#L220">➭</a></h3>
|
|
2419
|
+
<div class="extra" id="eve.off-extra"></div></div><div class="dr-method"><p>Removes given function from the list of event listeners assigned to given name.
|
|
2420
|
+
</p>
|
|
2421
|
+
<p class="header">Arguments
|
|
2422
|
+
</p>
|
|
2423
|
+
<dl class="dr-parameters"><dt class="dr-param">name</dt>
|
|
2424
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
2425
|
+
<dd class="dr-description">name of the event, dot (<code>.</code>) or slash (<code>/</code>) separated, with optional wildcards</dd>
|
|
2426
|
+
<dt class="dr-param">f</dt>
|
|
2427
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
2428
|
+
<dd class="dr-description">event handler function</dd>
|
|
2429
|
+
</dl>
|
|
2430
|
+
</div><div class="eve-on-section"><h3 id="eve.on" class="dr-method"><i class="dr-trixie"> </i>eve.on(name, f)<a href="#eve.on" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 161 in the source" href="https://github.com/DmitryBaranovskiy/eve/blob/master/eve.js#L161">➭</a></h3>
|
|
2431
|
+
<div class="extra" id="eve.on-extra"></div></div><div class="dr-method"><p>Binds given event handler with a given name. You can use wildcards “<code>*</code>” for the names:
|
|
2432
|
+
</p>
|
|
2433
|
+
<pre class="javascript code"><code>eve.on(<i>"*.under.*"</i>, f);
|
|
2434
|
+
eve(<i>"mouse.under.floor"</i>); <span class="c">// triggers f</span>
|
|
2435
|
+
</code></pre>
|
|
2436
|
+
<p>Use <a href="#eve" class="dr-link">eve</a> to trigger the listener.
|
|
2437
|
+
</p>
|
|
2438
|
+
<p class="header">Arguments
|
|
2439
|
+
</p>
|
|
2440
|
+
<dl class="dr-parameters"><dt class="dr-param">name</dt>
|
|
2441
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
2442
|
+
<dd class="dr-description">name of the event, dot (<code>.</code>) or slash (<code>/</code>) separated, with optional wildcards</dd>
|
|
2443
|
+
<dt class="dr-param">f</dt>
|
|
2444
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
2445
|
+
<dd class="dr-description">event handler function</dd>
|
|
2446
|
+
</dl>
|
|
2447
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-function">function</em> <span class="dr-description">returned function accepts a single numeric parameter that represents z-index of the handler. It is an optional feature and only used when you need to ensure that some subset of handlers will be invoked in a given order, despite of the order of assignment. </span></p>
|
|
2448
|
+
<p class="header">Example:
|
|
2449
|
+
</p>
|
|
2450
|
+
<pre class="javascript code"><code>eve.on(<i>"mouse"</i>, eat)(<span class="d">2</span>);
|
|
2451
|
+
eve.on(<i>"mouse"</i>, scream);
|
|
2452
|
+
eve.on(<i>"mouse"</i>, <b>catch</b>)(<span class="d">1</span>);
|
|
2453
|
+
</code></pre>
|
|
2454
|
+
<p>This will ensure that <code>catch</code> function will be called before <code>eat</code>.
|
|
2455
|
+
If you want to put your handler before non-indexed handlers, specify a negative value.
|
|
2456
|
+
Note: I assume most of the time you don’t need to worry about z-index, but it’s nice to have this feature “just in case”.
|
|
2457
|
+
</p>
|
|
2458
|
+
</div><div class="eve-once-section"><h3 id="eve.once" class="dr-method"><i class="dr-trixie"> </i>eve.once(name, f)<a href="#eve.once" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 295 in the source" href="https://github.com/DmitryBaranovskiy/eve/blob/master/eve.js#L295">➭</a></h3>
|
|
2459
|
+
<div class="extra" id="eve.once-extra"></div></div><div class="dr-method"><p>Binds given event handler with a given name to only run once then unbind itself.
|
|
2460
|
+
</p>
|
|
2461
|
+
<pre class="javascript code"><code>eve.once(<i>"login"</i>, f);
|
|
2462
|
+
eve(<i>"login"</i>); <span class="c">// triggers f</span>
|
|
2463
|
+
eve(<i>"login"</i>); <span class="c">// no listeners</span>
|
|
2464
|
+
</code></pre>
|
|
2465
|
+
<p>Use <a href="#eve" class="dr-link">eve</a> to trigger the listener.
|
|
2466
|
+
</p>
|
|
2467
|
+
<p class="header">Arguments
|
|
2468
|
+
</p>
|
|
2469
|
+
<dl class="dr-parameters"><dt class="dr-param">name</dt>
|
|
2470
|
+
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
|
|
2471
|
+
<dd class="dr-description">name of the event, dot (<code>.</code>) or slash (<code>/</code>) separated, with optional wildcards</dd>
|
|
2472
|
+
<dt class="dr-param">f</dt>
|
|
2473
|
+
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
|
|
2474
|
+
<dd class="dr-description">event handler function</dd>
|
|
2475
|
+
</dl>
|
|
2476
|
+
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-function">function</em> <span class="dr-description">same return function as <a href="#eve.on" class="dr-link">eve.on</a></span></p>
|
|
2477
|
+
</div><div class="eve-stop-section"><h3 id="eve.stop" class="dr-method"><i class="dr-trixie"> </i>eve.stop()<a href="#eve.stop" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 186 in the source" href="https://github.com/DmitryBaranovskiy/eve/blob/master/eve.js#L186">➭</a></h3>
|
|
2478
|
+
<div class="extra" id="eve.stop-extra"></div></div><div class="dr-method"><p>Is used inside an event handler to stop the event, preventing any subsequent listeners from firing.
|
|
2479
|
+
</p>
|
|
2480
|
+
</div><div class="eve-unbind-section"><h3 id="eve.unbind" class="dr-method"><i class="dr-trixie"> </i>eve.unbind()<a href="#eve.unbind" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 226 in the source" href="https://github.com/DmitryBaranovskiy/eve/blob/master/eve.js#L226">➭</a></h3>
|
|
2481
|
+
<div class="extra" id="eve.unbind-extra"></div></div><div class="dr-method"><p>See <a href="#eve.off" class="dr-link">eve.off</a>
|
|
2482
|
+
</p>
|
|
2483
|
+
</div><div class="eve-version-section"><h3 id="eve.version" class="dr-property"><i class="dr-trixie"> </i>eve.version<a href="#eve.version" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 309 in the source" href="https://github.com/DmitryBaranovskiy/eve/blob/master/eve.js#L309">➭</a></h3>
|
|
2484
|
+
<div class="extra" id="eve.version-extra"></div></div><div class="dr-property"><em class="dr-type dr-type-string">string</em><p>Current version of the library.
|
|
2485
|
+
</p>
|
|
2486
|
+
</div></div></div>
|
|
2487
|
+
<script src="raphael.js"></script>
|
|
2488
|
+
<script src="reference.js"></script>
|
|
2489
|
+
</body></html>
|