/*
- * Raphael 0.7 - JavaScript Vector Library
+ * Raphael 0.7.1 - JavaScript Vector Library
*
* Copyright (c) 2008 – 2009 Dmitry Baranovskiy (http://raphaeljs.com)
* Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
R = function () {
return create.apply(R, arguments);
};
- R.version = "0.7";
+ R.version = "0.7.1";
R.type = (win.SVGAngle ? "SVG" : "VML");
R.svg = !(R.vml = R.type == "VML");
R.idGenerator = 0;
var paper = {};
R.fn = {};
var availableAttrs = {cx: 0, cy: 0, fill: "#fff", "fill-opacity": 1, font: '10px "Arial"', "font-family": '"Arial"', "font-size": "10", gradient: 0, height: 0, opacity: 1, path: "M0,0", r: 0, rotation: 0, rx: 0, ry: 0, scale: "1 1", src: "", stroke: "#000", "stroke-dasharray": "", "stroke-linecap": "butt", "stroke-linejoin": "butt", "stroke-miterlimit": 0, "stroke-opacity": 1, "stroke-width": 1, translation: "0 0", width: 0, x: 0, y: 0},
- availableAnimAttrs = {cx: "number", cy: "number", fill: "colour", "fill-opacity": "number", "font-size": "number", height: "number", opacity: "number", path: "path", r: "number", rotation: "csv", rx: "number", ry: "number", scale: "csv", stroke: "colour", "stroke-opacity": "number", "stroke-width": "number", translation: "csv", width: "number", x: "number", y: "number"};
-
+ availableAnimAttrs = {cx: "number", cy: "number", fill: "colour", "fill-opacity": "number", "font-size": "number", height: "number", opacity: "number", path: "path", r: "number", rotation: "csv", rx: "number", ry: "number", scale: "csv", stroke: "colour", "stroke-opacity": "number", "stroke-width": "number", translation: "csv", width: "number", x: "number", y: "number"},
+ events = ["click", "dblclick", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup"];
R.toString = function () {
return "Your browser " + (this.vml ? "doesn't ": "") + "support" + (this.svg ? "s": "") +
" SVG.\nYou are running " + unescape("Rapha%EBl%20") + this.version;
o.rotate(value, true);
break;
case "translation":
- var xy = value.split(separator);
- o.translate(xy[0], xy[1]);
+ var xy = (value + "").split(separator);
+ o.translate((+xy[0] + 1 || 2) - 1, (+xy[1] + 1 || 2) - 1);
break;
case "scale":
- var xy = value.split(separator);
- o.scale(xy[0], xy[1]);
+ var xy = (value + "").split(separator);
+ o.scale(+xy[0] || 1, +xy[1] || +xy[0] || 1);
break;
case "fill":
var isURL = value.match(/^url\(([^\)]+)\)$/i);
case "opacity":
case "fill-opacity":
if (o.attrs.gradient) {
- var gradient = document.getElementById(o.node.getAttribute("fill").replace(/^url\(#|\)$/g, ""));
+ var gradient = doc.getElementById(o.node.getAttribute("fill").replace(/^url\(#|\)$/g, ""));
if (gradient) {
var stops = gradient.getElementsByTagName("stop");
stops[stops.length - 1].setAttribute("stop-opacity", value);
o.rotate(params.rotation, true);
}
if (params.translation) {
- var xy = params.translation.split(separator);
+ var xy = (params.translation + "").split(separator);
o.translate(xy[0], xy[1]);
}
if (params.scale) {
- var xy = params.scale.split(separator);
+ var xy = (params.scale + "").split(separator);
o.scale(xy[0], xy[1]);
}
if (o.type == "image" && params.src) {
o = o.shape || o.node;
var fill = (o.getElementsByTagName("fill") && o.getElementsByTagName("fill")[0]) || doc.createElement("rvml:fill");
if ("fill-opacity" in params || "opacity" in params) {
- fill.opacity = ((params["fill-opacity"] + 1 || 2) - 1) * ((params.opacity + 1 || 2) - 1);
+ fill.opacity = ((+params["fill-opacity"] + 1 || 2) - 1) * ((+params.opacity + 1 || 2) - 1);
}
if (params.fill) {
fill.on = true;
if (stroke.on && params.stroke) {
stroke.color = getRGB(params.stroke).hex;
}
- stroke.opacity = ((params["stroke-opacity"] + 1 || 2) - 1) * ((params.opacity + 1 || 2) - 1);
+ stroke.opacity = ((+params["stroke-opacity"] + 1 || 2) - 1) * ((+params.opacity + 1 || 2) - 1);
params["stroke-linejoin"] && (stroke.joinstyle = params["stroke-linejoin"] || "miter");
stroke.miterlimit = params["stroke-miterlimit"] || 8;
params["stroke-linecap"] && (stroke.endcap = {butt: "flat", square: "square", round: "round"}[params["stroke-linecap"]] || "miter");
};
}
})();
- var events = ["click", "dblclick", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup"];
for (var i = events.length; i--;) {
(function (eventName) {
Element.prototype[eventName] = function (fn) {
this.events = this.events || {};
this.events[eventName] = this.events[eventName] || {};
this.events[eventName][fn] = this.events[eventName][fn] || [];
- this.events[eventName][fn].push(addEvent(this.node, eventName, fn, this));
+ this.events[eventName][fn].push(addEvent(this.shape || this.node, eventName, fn, this));
}
return this;
};
return {x: this._.sx, y: this._.sy};
}
y = y || x;
+ // following line is for IE, apparently NaN is not always falsy
+ isNaN(y) && (y = x);
var dx, dy, cx, cy;
if (x != 0) {
var dirx = Math.round(x / Math.abs(x)),
from[attr] = (from2[1] == values[1] && from2[2] == values[2]) ? from2 : [0, values[1], values[2]];
diff[attr] = [(values[0] - from[attr][0]) / ms, 0, 0];
} else {
- from[attr] = from[attr].split(separator);
+ from[attr] = (from[attr] + "").split(separator);
diff[attr] = [(values[0] - from[attr][0]) / ms, (values[1] - from[attr][0]) / ms];
}
to[attr] = values;
<li>degree <em>number</em> Degree of rotation (0 – 360°)</li>
<li>isAbsolute <em>boolean</em> [optional] Specifies is degree is relative to previous position (<code>false</code>) or is it absolute angle (<code>true</code>)</li>
</ol>
+ <p>or</p>
+ <ol>
+ <li>degree <em>number</em> Degree of rotation (0 – 360°)</li>
+ <li>cx <em>number</em> [optional] X coordinate of the origin of rotation</li>
+ <li>cY <em>number</em> [optional] Y coordinate of the origin of rotation</li>
+ </ol>
<h4>Usage</h4>
<pre class="javascript code"><code>var c = paper.circle(10, 10, 10);
c.rotate(45); // rotation is relative
<li>font-family <em>string</em></li>
<li>font-size <em>number</em></li>
<li>font-weight <em>string</em></li>
- <li>gradient <em>object</em></li>
+ <li>gradient <em>object|string</em> "‹angle›-‹colour›[-‹colour›[:‹offset›]]*-‹colour›"</li>
<li>height <em>number</em></li>
<li>opacity <em>number</em></li>
<li>path <em>pathString</em></li>
<li>rx <em>number</em></li>
<li>ry <em>number</em></li>
<li>scale <em>CSV</em></li>
+ <li>src <em>string</em> (URL)</li>
<li>stroke <em>colour</em></li>
<li>stroke-dasharray <em>string</em> [“-”, “.”, “-.”, “-..”, “. ”, “- ”, “--”, “- .”, “--.”, “--..”]</li>
<li>stroke-linecap <em>string</em> [“butt”, “square”, “round”, “miter”]</li>
</ol>
<h4>Usage</h4>
<pre class="javascript code"><code>var c = paper.image("apple.png", 10, 10, 100, 100);</code></pre>
+ <h3 id="set">
+ set
+ </h3>
+ <p>
+ Creates array-like object to keep and operate couple of elements at once. Warning: it doesn’t create any elements for itself in the page.
+ </p>
+ <h4>Usage</h4>
+ <pre class="javascript code"><code>var st = paper.set();</code>
+<code>st.push(paper.circle(10, 10, 5));</code>
+<code>st.push(paper.circle(30, 10, 5));</code>
+<code>st.attr({fill: "red"});</code></pre>
<h3 id="text">
text
</h3>
<p>
- Draws a text string.
+ Draws a text string. If you need line breaks, put “\n” in the string.
</p>
<h4>Parameters</h4>
<ol>
</p>
<h4>Usage</h4>
<pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).moveTo(10, 10).andClose();</code></pre>
+ <h3 id="setSize">
+ setSize
+ </h3>
+ <p>
+ If you need to change dimensions of the canvas call this method
+ </p>
+ <h4>Parameters</h4>
+ <ol>
+ <li>width <em>number</em> new width of the canvas</li>
+ <li>height <em>number</em> new height of the canvas</li>
+ </ol>
+ <h3 id="setWindow">
+ setWindow
+ </h3>
+ <p>
+ Should be called before main Raphael method. Sets which window should be used for drawing. Default is the current one. You need to use it if you want to draw inside <code>iframe</code>
+ </p>
+ <h4>Parameters</h4>
+ <ol>
+ <li>window <em>object</em></li>
+ </ol>
<h3 id="getColor">
getColor
</h3>
</h2>
<ul id="contents">
<li>
- <a href="reference.html#Raphael"><code>Raphael</code></a>
+ <a href="#Raphael"><code>Raphael</code></a>
+ </li>
+ <li>
+ <a href="#node"><code>node</code></a>
+ </li>
+ <li>
+ <a href="#remove"><code>remove</code></a>
</li>
<li>
- <a href="reference.html#node"><code>node</code></a>
+ <a href="#hide"><code>hide</code></a>
</li>
<li>
- <a href="reference.html#remove"><code>remove</code></a>
+ <a href="#show"><code>show</code></a>
</li>
<li>
- <a href="reference.html#hide"><code>hide</code></a>
+ <a href="#rotate"><code>rotate</code></a>
</li>
<li>
- <a href="reference.html#show"><code>show</code></a>
+ <a href="#translate"><code>translate</code></a>
</li>
<li>
- <a href="reference.html#rotate"><code>rotate</code></a>
+ <a href="#scale"><code>scale</code></a>
</li>
<li>
- <a href="reference.html#translate"><code>translate</code></a>
+ <a href="#attr"><code>attr</code></a>
</li>
<li>
- <a href="reference.html#scale"><code>scale</code></a>
+ <a href="#animate"><code>animate</code></a>
</li>
<li>
- <a href="reference.html#attr"><code>attr</code></a>
+ <a href="#getBBox"><code>getBBox</code></a>
</li>
<li>
- <a href="reference.html#animate"><code>animate</code></a>
+ <a href="#toFront"><code>toFront</code></a>
</li>
<li>
- <a href="reference.html#getBBox"><code>getBBox</code></a>
+ <a href="#toBack"><code>toBack</code></a>
</li>
<li>
- <a href="reference.html#toFront"><code>toFront</code></a>
+ <a href="#circle"><code>circle</code></a>
</li>
<li>
- <a href="reference.html#toBack"><code>toBack</code></a>
+ <a href="#rect"><code>rect</code></a>
</li>
<li>
- <a href="reference.html#circle"><code>circle</code></a>
+ <a href="#ellipse"><code>ellipse</code></a>
</li>
<li>
- <a href="reference.html#rect"><code>rect</code></a>
+ <a href="#image"><code>image</code></a>
</li>
<li>
- <a href="reference.html#ellipse"><code>ellipse</code></a>
+ <a href="#set"><code>set</code></a>
</li>
<li>
- <a href="reference.html#image"><code>image</code></a>
+ <a href="#text"><code>text</code></a>
</li>
<li>
- <a href="reference.html#path"><code>path</code></a>
+ <a href="#path"><code>path</code></a>
<ul>
<li>
- <a href="reference.html#absolutely"><code>absolutely</code></a>
+ <a href="#absolutely"><code>absolutely</code></a>
</li>
<li>
- <a href="reference.html#relatively"><code>relatively</code></a>
+ <a href="#relatively"><code>relatively</code></a>
</li>
<li>
- <a href="reference.html#moveTo"><code>moveTo</code></a>
+ <a href="#moveTo"><code>moveTo</code></a>
</li>
<li>
- <a href="reference.html#lineTo"><code>lineTo</code></a>
+ <a href="#lineTo"><code>lineTo</code></a>
</li>
<li>
- <a href="reference.html#cplineTo"><code>cplineTo</code></a>
+ <a href="#cplineTo"><code>cplineTo</code></a>
</li>
<li>
- <a href="reference.html#curveTo"><code>curveTo</code></a>
+ <a href="#curveTo"><code>curveTo</code></a>
</li>
<li>
- <a href="reference.html#qcurveTo"><code>qcurveTo</code></a>
+ <a href="#qcurveTo"><code>qcurveTo</code></a>
</li>
<li>
- <a href="reference.html#addRoundedCorner"><code>addRoundedCorner</code></a>
+ <a href="#addRoundedCorner"><code>addRoundedCorner</code></a>
</li>
<li>
- <a href="reference.html#andClose"><code>andClose</code></a>
+ <a href="#andClose"><code>andClose</code></a>
</li>
</ul>
</li>
+ <li>
+ <a href="#setSize"><code>setSize</code></a>
+ </li>
+ <li>
+ <a href="#setWindow"><code>setWindow</code></a>
+ </li>
<li>
<a href="#getColor"><code>getColor</code></a>
</li>
projects / raphael / commitdiff