Skip to content

R
raphael
Commit a6f898c7 authored by Dmitry Baranovskiy's avatar Dmitry Baranovskiy
Browse files
Options

1.0 RC1.2 Added clip-rect attribute. You could apply clipping to your elements... 

1.0 RC1.2 Added clip-rect attribute. You could apply clipping to your elements in format "x y width height".
parent 23a57b66
Show whitespace changes
Inline Side-by-side
Showing with 109 additions and 116 deletions
raphael-min.js
View file @ a6f898c7
This source diff could not be displayed because it is too large. You can view the blob instead.
raphael.js
View file @ a6f898c7
/* /*
* Raphael 1.0 RC1.1 - JavaScript Vector Library * Raphael 1.0 RC1.2 - JavaScript Vector Library
* *
* Copyright (c) 2008 - 2009 Dmitry Baranovskiy (http://raphaeljs.com) * Copyright (c) 2008 - 2009 Dmitry Baranovskiy (http://raphaeljs.com)
* Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license. * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
...@@ -18,10 +18,10 @@ window.Raphael = (function () { ...@@ -18,10 +18,10 @@ window.Raphael = (function () {
return create.apply(R, arguments); return create.apply(R, arguments);
}, },
paper = {}, paper = {},
availableAttrs = {cx: 0, cy: 0, fill: "#fff", "fill-opacity": 1, font: '10px "Arial"', "font-family": '"Arial"', "font-size": "10", "font-style": "normal", "font-weight": 400, gradient: 0, height: 0, href: "http://raphaeljs.com/", 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, target: "_blank", "text-anchor": "middle", title: "Raphael", translation: "0 0", width: 0, x: 0, y: 0}, availableAttrs = {"clip-rect": "0 0 0 0", cx: 0, cy: 0, fill: "#fff", "fill-opacity": 1, font: '10px "Arial"', "font-family": '"Arial"', "font-size": "10", "font-style": "normal", "font-weight": 400, gradient: 0, height: 0, href: "http://raphaeljs.com/", 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, target: "_blank", "text-anchor": "middle", title: "Raphael", 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"]; events = ["click", "dblclick", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup"];
R.version = "1.0 RC1.1"; R.version = "1.0 RC1.2";
R.type = (window.SVGAngle || document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1") ? "SVG" : "VML"); R.type = (window.SVGAngle || document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1") ? "SVG" : "VML");
R.svg = !(R.vml = R.type == "VML"); R.svg = !(R.vml = R.type == "VML");
R.idGenerator = 0; R.idGenerator = 0;
...@@ -805,6 +805,11 @@ window.Raphael = (function () { ...@@ -805,6 +805,11 @@ window.Raphael = (function () {
} }
return path; return path;
}; };
var $ = function (el, attr) {
for (var key in attr) if (attr.hasOwnProperty(key)) {
el.setAttribute(key, attr[key]);
}
};
R.toString = function () { R.toString = function () {
return "Your browser supports SVG.\nYou are running Rapha\u00ebl " + this.version; return "Your browser supports SVG.\nYou are running Rapha\u00ebl " + this.version;
}; };
...@@ -821,10 +826,12 @@ window.Raphael = (function () { ...@@ -821,10 +826,12 @@ window.Raphael = (function () {
var el = doc.createElementNS(SVG.svgns, (gradient.type || "linear") + "Gradient"); var el = doc.createElementNS(SVG.svgns, (gradient.type || "linear") + "Gradient");
el.id = "r" + (R.idGenerator++).toString(36); el.id = "r" + (R.idGenerator++).toString(36);
if (gradient.vector && gradient.vector.length) { if (gradient.vector && gradient.vector.length) {
el.setAttribute("x1", gradient.vector[0]); $(el, {
el.setAttribute("y1", gradient.vector[1]); x1: gradient.vector[0],
el.setAttribute("x2", gradient.vector[2]); y1: gradient.vector[1],
el.setAttribute("y2", gradient.vector[3]); x2: gradient.vector[2],
y2: gradient.vector[3]
});
} }
SVG.defs.appendChild(el); SVG.defs.appendChild(el);
var isopacity = true; var isopacity = true;
...@@ -833,24 +840,28 @@ window.Raphael = (function () { ...@@ -833,24 +840,28 @@ window.Raphael = (function () {
if (gradient.dots[i].offset) { if (gradient.dots[i].offset) {
isopacity = false; isopacity = false;
} }
stop.setAttribute("offset", gradient.dots[i].offset ? gradient.dots[i].offset : (i == 0) ? "0%" : "100%"); $(stop, {
stop.setAttribute("stop-color", R.getRGB(gradient.dots[i].color).hex || "#fff"); offset: gradient.dots[i].offset ? gradient.dots[i].offset : (i == 0) ? "0%" : "100%",
"stop-color": R.getRGB(gradient.dots[i].color).hex || "#fff"
});
// ignoring opacity for internal points, because VML doesn't support it // ignoring opacity for internal points, because VML doesn't support it
el.appendChild(stop); el.appendChild(stop);
}; };
if (isopacity && typeof gradient.dots[ii - 1].opacity != "undefined") { if (isopacity && typeof gradient.dots[ii - 1].opacity != "undefined") {
stop.setAttribute("stop-opacity", gradient.dots[ii - 1].opacity); $(stop, {"stop-opacity": gradient.dots[ii - 1].opacity});
} }
o.setAttribute("fill", "url(#" + el.id + ")"); $(o, {
fill: "url(#" + el.id + ")",
opacity: 1,
"fill-opacity": 1
});
o.style.fill = ""; o.style.fill = "";
o.style.opacity = 1; o.style.opacity = 1;
o.style.fillOpacity = 1; o.style.fillOpacity = 1;
o.setAttribute("opacity", 1);
o.setAttribute("fill-opacity", 1);
}; };
var updatePosition = function (o) { var updatePosition = function (o) {
var bbox = o.getBBox(); var bbox = o.getBBox();
o.pattern.setAttribute("patternTransform", "translate(".concat(bbox.x, ",", bbox.y, ")")); $(o.pattern, {patternTransform: R.format("translate({0},{1})", bbox.x, bbox.y)});
}; };
var setFillAndStroke = function (o, params) { var setFillAndStroke = function (o, params) {
var dasharray = { var dasharray = {
...@@ -904,10 +915,35 @@ window.Raphael = (function () { ...@@ -904,10 +915,35 @@ window.Raphael = (function () {
} }
pn.setAttributeNS(o.paper.xlink, att, value); pn.setAttributeNS(o.paper.xlink, att, value);
break; break;
case "clip-rect":
var rect = value.split(separator);
if (rect.length == 4) {
o.clip && o.clip.parentNode.parentNode.removeChild(clip.parentNode);
var el = doc.createElementNS(o.paper.svgns, "clipPath"),
rc = doc.createElementNS(o.paper.svgns, "rect");
el.id = "r" + (R.idGenerator++).toString(36);
$(rc, {
x: rect[0],
y: rect[1],
width: rect[2],
height: rect[3]
});
el.appendChild(rc);
o.paper.defs.appendChild(el);
$(node, {"clip-path": "url(#" + el.id + ")"});
o.clip = rc;
}
if (!value) {
var clip = doc.getElementById(node.getAttribute("clip-path").replace(/(^url\(#|\)$)/g, ""));
clip && clip.parentNode.removeChild(clip);
$(node, {"clip-path": ""});
delete o.clip;
}
break;
case "path": case "path":
if (value && o.type == "path") { if (value && o.type == "path") {
attrs.path = roundPath(pathToAbsolute(value)); attrs.path = roundPath(pathToAbsolute(value));
node.setAttribute("d", attrs.path); $(node, {d: attrs.path});
} }
case "width": case "width":
node.setAttribute(att, value); node.setAttribute(att, value);
...@@ -945,8 +981,7 @@ window.Raphael = (function () { ...@@ -945,8 +981,7 @@ window.Raphael = (function () {
break; break;
case "r": case "r":
if (o.type == "rect") { if (o.type == "rect") {
node.setAttribute("rx", value); $(node, {rx: value, ry: value});
node.setAttribute("ry", value);
} else { } else {
node.setAttribute(att, value); node.setAttribute(att, value);
} }
...@@ -985,11 +1020,8 @@ window.Raphael = (function () { ...@@ -985,11 +1020,8 @@ window.Raphael = (function () {
var el = doc.createElementNS(o.paper.svgns, "pattern"), var el = doc.createElementNS(o.paper.svgns, "pattern"),
ig = doc.createElementNS(o.paper.svgns, "image"); ig = doc.createElementNS(o.paper.svgns, "image");
el.id = "r" + (R.idGenerator++).toString(36); el.id = "r" + (R.idGenerator++).toString(36);
el.setAttribute("x", 0); $(el, {x: 0, y: 0, patternUnits: "userSpaceOnUse"});
el.setAttribute("y", 0); $(ig, {x: 0, y:0});
el.setAttribute("patternUnits", "userSpaceOnUse");
ig.setAttribute("x", 0);
ig.setAttribute("y", 0);
ig.setAttributeNS(o.paper.xlink, "href", isURL[1]); ig.setAttributeNS(o.paper.xlink, "href", isURL[1]);
el.appendChild(ig); el.appendChild(ig);
...@@ -998,10 +1030,8 @@ window.Raphael = (function () { ...@@ -998,10 +1030,8 @@ window.Raphael = (function () {
img.style.top = "-9999em"; img.style.top = "-9999em";
img.style.left = "-9999em"; img.style.left = "-9999em";
img.onload = function () { img.onload = function () {
el.setAttribute("width", this.offsetWidth); $(el, {width: this.offsetWidth, height: this.offsetHeight});
el.setAttribute("height", this.offsetHeight); $(ig, {width: this.offsetWidth, height: this.offsetHeight});
ig.setAttribute("width", this.offsetWidth);
ig.setAttribute("height", this.offsetHeight);
doc.body.removeChild(this); doc.body.removeChild(this);
paper.safari(); paper.safari();
}; };
...@@ -1009,7 +1039,7 @@ window.Raphael = (function () { ...@@ -1009,7 +1039,7 @@ window.Raphael = (function () {
img.src = isURL[1]; img.src = isURL[1];
o.paper.defs.appendChild(el); o.paper.defs.appendChild(el);
node.style.fill = "url(#" + el.id + ")"; node.style.fill = "url(#" + el.id + ")";
node.setAttribute("fill", "url(#" + el.id + ")"); $(node, {fill: "url(#" + el.id + ")"});
o.pattern = el; o.pattern = el;
o.pattern && updatePosition(o); o.pattern && updatePosition(o);
break; break;
...@@ -1019,12 +1049,12 @@ window.Raphael = (function () { ...@@ -1019,12 +1049,12 @@ window.Raphael = (function () {
if (typeof attrs.opacity != "undefined" && typeof params.opacity == "undefined" ) { if (typeof attrs.opacity != "undefined" && typeof params.opacity == "undefined" ) {
node.style.opacity = attrs.opacity; node.style.opacity = attrs.opacity;
// Need following line for Firefox // Need following line for Firefox
node.setAttribute("opacity", attrs.opacity); $(node, {opacity: attrs.opacity});
} }
if (typeof attrs["fill-opacity"] != "undefined" && typeof params["fill-opacity"] == "undefined" ) { if (typeof attrs["fill-opacity"] != "undefined" && typeof params["fill-opacity"] == "undefined" ) {
node.style.fillOpacity = attrs["fill-opacity"]; node.style.fillOpacity = attrs["fill-opacity"];
// Need following line for Firefox // Need following line for Firefox
node.setAttribute("fill-opacity", attrs["fill-opacity"]); $(node, {"fill-opacity": attrs["fill-opacity"]});
} }
case "stroke": case "stroke":
node.style[att] = R.getRGB(value).hex; node.style[att] = R.getRGB(value).hex;
...@@ -1075,22 +1105,20 @@ window.Raphael = (function () { ...@@ -1075,22 +1105,20 @@ window.Raphael = (function () {
var texts = (params.text + "").split("\n"); var texts = (params.text + "").split("\n");
for (var i = 0, ii = texts.length; i < ii; i++) { for (var i = 0, ii = texts.length; i < ii; i++) {
var tspan = doc.createElementNS(el.paper.svgns, "tspan"); var tspan = doc.createElementNS(el.paper.svgns, "tspan");
i && tspan.setAttribute("dy", fontSize * leading); i && $(tspan, {dy: fontSize * leading, x: a.x});
i && tspan.setAttribute("x", a.x);
tspan.appendChild(doc.createTextNode(texts[i])); tspan.appendChild(doc.createTextNode(texts[i]));
node.appendChild(tspan); node.appendChild(tspan);
} }
} else { } else {
var texts = node.getElementsByTagName("tspan"); var texts = node.getElementsByTagName("tspan");
for (var i = 0, ii = texts.length; i < ii; i++) { for (var i = 0, ii = texts.length; i < ii; i++) {
i && texts[i].setAttribute("dy", fontSize * leading); i && $(texts[i], {dy: fontSize * leading, x: a.x});
i && texts[i].setAttribute("x", a.x);
} }
} }
node.setAttribute("y", a.y); $(node, {y: a.y});
var bb = el.getBBox(), var bb = el.getBBox(),
dif = a.y - (bb.y + bb.height / 2); dif = a.y - (bb.y + bb.height / 2);
dif && node.setAttribute("y", a.y + dif); dif && $(node, {y: a.y + dif});
}; };
var Element = function (node, svg) { var Element = function (node, svg) {
var X = 0, var X = 0,
...@@ -1133,11 +1161,13 @@ window.Raphael = (function () { ...@@ -1133,11 +1161,13 @@ window.Raphael = (function () {
cx = cx == null ? bbox.x + bbox.width / 2 : cx; cx = cx == null ? bbox.x + bbox.width / 2 : cx;
cy = cy == null ? bbox.y + bbox.height / 2 : cy; cy = cy == null ? bbox.y + bbox.height / 2 : cy;
if (this._.rt.deg) { if (this._.rt.deg) {
this.transformations[0] = "rotate(".concat(this._.rt.deg, " ", cx, " ", cy, ")"); this.transformations[0] = R.format("rotate({0} {1} {2})", this._.rt.deg, cx, cy);
this.clip && $(this.clip, {transform: R.format("rotate({0} {1} {2})", -this._.rt.deg, cx, cy)});
} else { } else {
this.transformations[0] = ""; this.transformations[0] = "";
this.clip && $(this.clip, {transform: ""});
} }
this.node.setAttribute("transform", this.transformations.join(" ")); $(this.node, {transform: this.transformations.join(" ")});
return this; return this;
}; };
Element.prototype.hide = function () { Element.prototype.hide = function () {
...@@ -1234,112 +1264,53 @@ window.Raphael = (function () { ...@@ -1234,112 +1264,53 @@ window.Raphael = (function () {
x = round(x); x = round(x);
y = round(y); y = round(y);
var el = doc.createElementNS(svg.svgns, "circle"); var el = doc.createElementNS(svg.svgns, "circle");
el.setAttribute("cx", x); svg.canvas && svg.canvas.appendChild(el);
el.setAttribute("cy", y);
el.setAttribute("r", r);
el.setAttribute("fill", "none");
el.setAttribute("stroke", "#000");
if (svg.canvas) {
svg.canvas.appendChild(el);
}
var res = new Element(el, svg); var res = new Element(el, svg);
res.attrs = res.attrs || {}; res.attrs = {cx: x, cy: y, r: r, fill: "none", stroke: "#000"};
res.attrs.cx = x;
res.attrs.cy = y;
res.attrs.r = r;
res.attrs.stroke = "#000";
res.type = "circle"; res.type = "circle";
$(el, res.attrs);
return res; return res;
}; };
var theRect = function (svg, x, y, w, h, r) { var theRect = function (svg, x, y, w, h, r) {
x = round(x); x = round(x);
y = round(y); y = round(y);
var el = doc.createElementNS(svg.svgns, "rect"); var el = doc.createElementNS(svg.svgns, "rect");
el.setAttribute("x", x); svg.canvas && svg.canvas.appendChild(el);
el.setAttribute("y", y);
el.setAttribute("width", w);
el.setAttribute("height", h);
if (r) {
el.setAttribute("rx", r);
el.setAttribute("ry", r);
}
el.setAttribute("fill", "none");
el.setAttribute("stroke", "#000");
if (svg.canvas) {
svg.canvas.appendChild(el);
}
var res = new Element(el, svg); var res = new Element(el, svg);
res.attrs = res.attrs || {}; res.attrs = {x: x, y: y, width: w, height: h, r: r || 0, rx: r || 0, ry: r || 0, fill: "none", stroke: "#000"};
res.attrs.x = x;
res.attrs.y = y;
res.attrs.width = w;
res.attrs.height = h;
res.attrs.stroke = "#000";
if (r) {
res.attrs.rx = res.attrs.ry = r;
}
res.type = "rect"; res.type = "rect";
$(el, res.attrs);
return res; return res;
}; };
var theEllipse = function (svg, x, y, rx, ry) { var theEllipse = function (svg, x, y, rx, ry) {
x = round(x); x = round(x);
y = round(y); y = round(y);
var el = doc.createElementNS(svg.svgns, "ellipse"); var el = doc.createElementNS(svg.svgns, "ellipse");
el.setAttribute("cx", x); svg.canvas && svg.canvas.appendChild(el);
el.setAttribute("cy", y);
el.setAttribute("rx", rx);
el.setAttribute("ry", ry);
el.setAttribute("fill", "none");
el.setAttribute("stroke", "#000");
if (svg.canvas) {
svg.canvas.appendChild(el);
}
var res = new Element(el, svg); var res = new Element(el, svg);
res.attrs = res.attrs || {}; res.attrs = {cx: x, cy: y, rx: rx, ry: ry, fill: "none", stroke: "#000"};
res.attrs.cx = x;
res.attrs.cy = y;
res.attrs.rx = rx;
res.attrs.ry = ry;
res.attrs.stroke = "#000";
res.type = "ellipse"; res.type = "ellipse";
$(el, res.attrs);
return res; return res;
}; };
var theImage = function (svg, src, x, y, w, h) { var theImage = function (svg, src, x, y, w, h) {
var el = doc.createElementNS(svg.svgns, "image"); var el = doc.createElementNS(svg.svgns, "image");
el.setAttribute("x", x); $(el, {x: x, y: y, width: w, height: h, preserveAspectRatio: "none"});
el.setAttribute("y", y);
el.setAttribute("width", w);
el.setAttribute("height", h);
el.setAttribute("preserveAspectRatio", "none");
el.setAttributeNS(svg.xlink, "href", src); el.setAttributeNS(svg.xlink, "href", src);
if (svg.canvas) { svg.canvas && svg.canvas.appendChild(el);
svg.canvas.appendChild(el);
}
var res = new Element(el, svg); var res = new Element(el, svg);
res.attrs = res.attrs || {}; res.attrs = {x: x, y: y, width: w, height: h, src: src};
res.attrs.src = src;
res.attrs.x = x;
res.attrs.y = y;
res.attrs.width = w;
res.attrs.height = h;
res.type = "image"; res.type = "image";
return res; return res;
}; };
var theText = function (svg, x, y, text) { var theText = function (svg, x, y, text) {
var el = doc.createElementNS(svg.svgns, "text"); var el = doc.createElementNS(svg.svgns, "text");
el.setAttribute("x", x); $(el, {x: x, y: y, "text-anchor": "middle"});
el.setAttribute("y", y); svg.canvas && svg.canvas.appendChild(el);
el.setAttribute("text-anchor", "middle");
if (svg.canvas) {
svg.canvas.appendChild(el);
}
var res = new Element(el, svg); var res = new Element(el, svg);
res.attrs = res.attrs || {}; res.attrs = {x: x, y: y, "text-anchor": "middle", text: text, font: availableAttrs.font, stroke: "none", fill: "#000"};
res.attrs.text = text;
res.attrs.x = x;
res.attrs.y = y;
res.type = "text"; res.type = "text";
setFillAndStroke(res, {font: availableAttrs.font, stroke: "none", fill: "#000", text: text}); setFillAndStroke(res, res.attrs);
return res; return res;
}; };
var setSize = function (width, height) { var setSize = function (width, height) {
...@@ -1484,6 +1455,30 @@ window.Raphael = (function () { ...@@ -1484,6 +1455,30 @@ window.Raphael = (function () {
xy = (params.scale + "").split(separator); xy = (params.scale + "").split(separator);
o.scale(+xy[0] || 1, +xy[1] || +xy[0] || 1, +xy[2] || null, +xy[3] || null); o.scale(+xy[0] || 1, +xy[1] || +xy[0] || 1, +xy[2] || null, +xy[3] || null);
} }
if ("clip-rect" in params) {
var rect = (params["clip-rect"] + "").split(separator);
if (rect.length == 4) {
rect[2] += rect[0];
rect[3] += rect[1];
var div = node.clipRect || doc.createElement("div"),
dstyle = div.style,
group = node.parentNode;
dstyle.clip = R.format("rect({0}px {2}px {3}px {1}px)", rect);
if (!node.clipRect) {
dstyle.position = "absolute";
dstyle.top = 0;
dstyle.left = 0;
dstyle.width = o.paper.width + "px";
dstyle.height = o.paper.height + "px";
group.parentNode.insertBefore(div, group);
div.appendChild(group);
node.clipRect = div;
}
}
if (!params["clip-rect"]) {
node.clipRect && (node.clipRect.style.clip = "");
}
}
if (o.type == "image" && params.src) { if (o.type == "image" && params.src) {
node.src = params.src; node.src = params.src;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment