@@ -1,5 +1,5 @@ /* - * 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. @@ -14,15 +14,15 @@ var Raphael = (function () { 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; @@ -833,12 +833,12 @@ var Raphael = (function () { 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); @@ -898,7 +898,7 @@ var Raphael = (function () { 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); @@ -1539,11 +1539,11 @@ var Raphael = (function () { 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) { @@ -1562,7 +1562,7 @@ var Raphael = (function () { 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; @@ -1592,7 +1592,7 @@ var Raphael = (function () { 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"); @@ -2165,7 +2165,6 @@ var Raphael = (function () { }; } })(); - var events = ["click", "dblclick", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup"]; for (var i = events.length; i--;) { (function (eventName) { Element.prototype[eventName] = function (fn) { @@ -2173,7 +2172,7 @@ var Raphael = (function () { 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; }; @@ -2276,6 +2275,8 @@ var Raphael = (function () { 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)), @@ -2411,7 +2412,7 @@ var Raphael = (function () { 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; raphael.js @@ -105,6 +105,12 @@ c.show();</code></pre> <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 @@ -172,7 +178,7 @@ c.scale(.5, .75); // makes the circle half as wide, and 75% as high</code></pre <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> @@ -181,6 +187,7 @@ c.scale(.5, .75); // makes the circle half as wide, and 75% as high</code></pre <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> @@ -348,11 +355,22 @@ c.attr({fill: "#000", stroke: "#f00", opacity: 0.5}); // using params object</co </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> @@ -509,6 +527,27 @@ var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(50, 50);</code></pre> </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> @@ -537,89 +576,101 @@ var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(50, 50);</code></pre> </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> <li> reference.html 7bf58408f29c3a2968a255c3d0980ca52080228b Dmitry Baranovskiy dbaranovskiy@Fresh-Air.sydney.atlassian.com http://github.com/DmitryBaranovskiy/raphael/commit/0c935da0ec7e7c6f888001de1423b6f241043459 0c935da0ec7e7c6f888001de1423b6f241043459 2009-03-18T16:42:06-07:00 2009-03-18T16:42:06-07:00 Add some checks for right values and some small bug fixes. 0.7.1 b2e57eac3f823a1c88e18dd763928514e35c15c1 Dmitry Baranovskiy dbaranovskiy@Fresh-Air.sydney.atlassian.com