Skip to content

殷洪（管理员） / raphael

Go to a project
Commit 17f95e18 by Dmitry Baranovskiy
Options

0.8.3 

• Removing grobal group in VML
• Allow sets to have sets inside
• Fix for quadratic curves in VML
• Make registerFont transparent, you should be able to call Cufon.registerFont(Raphael.registerFont(font))
• Fix Firefox bug with BBox
• Fix bug with rotation + translation.
parent e75fa26b
Showing with 185 additions and 136 deletions
raphael.js
/* /*
* Raphael 0.8.2 - JavaScript Vector Library * Raphael 0.8.3 - 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.
...@@ -21,7 +21,7 @@ window.Raphael = (function () { ...@@ -21,7 +21,7 @@ window.Raphael = (function () {
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 = {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 = "0.8.2"; R.version = "0.8.3";
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;
...@@ -644,7 +644,7 @@ window.Raphael = (function () { ...@@ -644,7 +644,7 @@ window.Raphael = (function () {
return this; return this;
}; };
p.moveTo = function (x, y) { p.moveTo = function (x, y) {
var d = this.isAbsolute?"M":"m"; var d = this.isAbsolute ? "M" : "m";
d += parseFloat(x).toFixed(3) + " " + parseFloat(y).toFixed(3) + " "; d += parseFloat(x).toFixed(3) + " " + parseFloat(y).toFixed(3) + " ";
var oldD = this[0].getAttribute("d") || ""; var oldD = this[0].getAttribute("d") || "";
(oldD == "M0,0") && (oldD = ""); (oldD == "M0,0") && (oldD = "");
...@@ -655,12 +655,12 @@ window.Raphael = (function () { ...@@ -655,12 +655,12 @@ window.Raphael = (function () {
return this; return this;
}; };
p.lineTo = function (x, y) { p.lineTo = function (x, y) {
this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(x); this.last.x = (!this.isAbsolute * this.last.x) + parseFloat(x);
this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(y); this.last.y = (!this.isAbsolute * this.last.y) + parseFloat(y);
var d = this.isAbsolute?"L":"l"; var d = this.isAbsolute ? "L" : "l";
d += parseFloat(x).toFixed(3) + " " + parseFloat(y).toFixed(3) + " "; d += parseFloat(x).toFixed(3) + " " + parseFloat(y).toFixed(3) + " ";
var oldD = this[0].getAttribute("d") || ""; var oldD = this.node.getAttribute("d") || "";
this[0].setAttribute("d", oldD + d); this.node.setAttribute("d", oldD + d);
this.attrs.path = oldD + d; this.attrs.path = oldD + d;
return this; return this;
}; };
...@@ -668,7 +668,7 @@ window.Raphael = (function () { ...@@ -668,7 +668,7 @@ window.Raphael = (function () {
var d = this.isAbsolute ? "A" : "a"; var d = this.isAbsolute ? "A" : "a";
d += [parseFloat(rx).toFixed(3), parseFloat(ry).toFixed(3), 0, large_arc_flag, sweep_flag, parseFloat(x).toFixed(3), parseFloat(y).toFixed(3)].join(" "); d += [parseFloat(rx).toFixed(3), parseFloat(ry).toFixed(3), 0, large_arc_flag, sweep_flag, parseFloat(x).toFixed(3), parseFloat(y).toFixed(3)].join(" ");
var oldD = this[0].getAttribute("d") || ""; var oldD = this[0].getAttribute("d") || "";
this[0].setAttribute("d", oldD + d); this.node.setAttribute("d", oldD + d);
this.last.x = parseFloat(x); this.last.x = parseFloat(x);
this.last.y = parseFloat(y); this.last.y = parseFloat(y);
this.attrs.path = oldD + d; this.attrs.path = oldD + d;
...@@ -678,21 +678,21 @@ window.Raphael = (function () { ...@@ -678,21 +678,21 @@ window.Raphael = (function () {
if (!w1) { if (!w1) {
return this.lineTo(x1, y1); return this.lineTo(x1, y1);
} else { } else {
var p = {}; var p = {},
var x = parseFloat(x1); x = parseFloat(x1),
var y = parseFloat(y1); y = parseFloat(y1),
var w = parseFloat(w1); w = parseFloat(w1),
var d = this.isAbsolute?"C":"c"; d = this.isAbsolute ? "C" : "c",
var attr = [+this.last.x + w, +this.last.y, x - w, y, x, y]; attr = [+this.last.x + w, +this.last.y, x - w, y, x, y];
for (var i = 0, ii = attr.length; i < ii; i++) { for (var i = 0, ii = attr.length; i < ii; i++) {
d += attr[i].toFixed(3) + " "; d += attr[i] + " ";
} }
this.last.x = (this.isAbsolute ? 0 : this.last.x) + attr[4]; this.last.x = (this.isAbsolute ? 0 : this.last.x) + attr[4];
this.last.y = (this.isAbsolute ? 0 : this.last.y) + attr[5]; this.last.y = (this.isAbsolute ? 0 : this.last.y) + attr[5];
this.last.bx = attr[2]; this.last.bx = attr[2];
this.last.by = attr[3]; this.last.by = attr[3];
var oldD = this[0].getAttribute("d") || ""; var oldD = this.node.getAttribute("d") || "";
this[0].setAttribute("d", oldD + d); this.node.setAttribute("d", oldD + d);
this.attrs.path = oldD + d; this.attrs.path = oldD + d;
return this; return this;
} }
...@@ -700,7 +700,6 @@ window.Raphael = (function () { ...@@ -700,7 +700,6 @@ window.Raphael = (function () {
p.curveTo = function () { p.curveTo = function () {
var p = {}, var p = {},
command = [0, 1, 2, 3, "s", 5, "c"]; command = [0, 1, 2, 3, "s", 5, "c"];
var d = command[arguments.length]; var d = command[arguments.length];
if (this.isAbsolute) { if (this.isAbsolute) {
d = d.toUpperCase(); d = d.toUpperCase();
...@@ -867,7 +866,8 @@ window.Raphael = (function () { ...@@ -867,7 +866,8 @@ window.Raphael = (function () {
"--..": [8, 3, 1, 3, 1, 3] "--..": [8, 3, 1, 3, 1, 3]
}, },
node = o.node, node = o.node,
attrs = o.attrs; attrs = o.attrs,
rot = attrs.rotation,
addDashes = function (o, value) { addDashes = function (o, value) {
value = dasharray[value.toString().toLowerCase()]; value = dasharray[value.toString().toLowerCase()];
if (value) { if (value) {
...@@ -881,6 +881,7 @@ window.Raphael = (function () { ...@@ -881,6 +881,7 @@ window.Raphael = (function () {
node.setAttribute("stroke-dasharray", value); node.setAttribute("stroke-dasharray", value);
} }
}; };
o.rotate(0, true);
for (var att in params) { for (var att in params) {
if (!(att in availableAttrs)) { if (!(att in availableAttrs)) {
continue; continue;
...@@ -1052,6 +1053,7 @@ window.Raphael = (function () { ...@@ -1052,6 +1053,7 @@ window.Raphael = (function () {
} }
tuneText(o, params); tuneText(o, params);
o.rotate(attrs.rotation, true);
}; };
var leading = 1.2; var leading = 1.2;
var tuneText = function (el, params) { var tuneText = function (el, params) {
...@@ -1143,7 +1145,11 @@ window.Raphael = (function () { ...@@ -1143,7 +1145,11 @@ window.Raphael = (function () {
this.node.parentNode.removeChild(this.node); this.node.parentNode.removeChild(this.node);
}; };
Element.prototype.getBBox = function () { Element.prototype.getBBox = function () {
var bbox = this.node.getBBox(); if (this.node.style.display == "none") {
this.show();
var hide = true;
}
var bbox = this.node.getBBox() || {};
if (this.type == "text") { if (this.type == "text") {
bbox = {x: bbox.x, y: Infinity, width: bbox.width, height: 0}; bbox = {x: bbox.x, y: Infinity, width: bbox.width, height: 0};
for (var i = 0, ii = this.node.getNumberOfChars(); i < ii; i++) { for (var i = 0, ii = this.node.getNumberOfChars(); i < ii; i++) {
...@@ -1152,6 +1158,7 @@ window.Raphael = (function () { ...@@ -1152,6 +1158,7 @@ window.Raphael = (function () {
(bb.y + bb.height - bbox.y > bbox.height) && (bbox.height = bb.y + bb.height - bbox.y); (bb.y + bb.height - bbox.y > bbox.height) && (bbox.height = bb.y + bb.height - bbox.y);
} }
} }
hide && this.hide();
return bbox; return bbox;
}; };
Element.prototype.attr = function () { Element.prototype.attr = function () {
...@@ -1373,15 +1380,17 @@ window.Raphael = (function () { ...@@ -1373,15 +1380,17 @@ window.Raphael = (function () {
// VML // VML
if (R.vml) { if (R.vml) {
R.toString = function () { R.toString = function () {
return "Your browser doesn\u2019t support SVG.\nYou are running Rapha\u00ebl " + this.version; return "Your browser doesn\u2019t support SVG. Assuming it is Internet Explorer and falling down to VML.\nYou are running Rapha\u00ebl " + this.version;
}; };
thePath = function (params, pathString, VML) { var thePath = function (params, pathString, VML) {
var g = createNode("group"), gl = g.style; var g = createNode("group"), gl = g.style;
gl.position = "absolute"; gl.position = "absolute";
gl.left = 0; gl.left = 0;
gl.top = 0; gl.top = 0;
gl.width = VML.width + "px"; gl.width = VML.width + "px";
gl.height = VML.height + "px"; gl.height = VML.height + "px";
g.coordsize = VML.coordsize;
g.coordorigin = VML.coordorigin;
var el = createNode("shape"), ol = el.style; var el = createNode("shape"), ol = el.style;
ol.width = VML.width + "px"; ol.width = VML.width + "px";
ol.height = VML.height + "px"; ol.height = VML.height + "px";
...@@ -1407,8 +1416,10 @@ window.Raphael = (function () { ...@@ -1407,8 +1416,10 @@ window.Raphael = (function () {
return this; return this;
}; };
p.moveTo = function (x, y) { p.moveTo = function (x, y) {
var d = this.isAbsolute?"m":"t"; var X = Math.round(parseFloat(x)) - 1;
d += Math.round(parseFloat(x)) + " " + Math.round(parseFloat(y)); var Y = Math.round(parseFloat(y)) - 1;
var d = this.isAbsolute ? "m" : "t";
d += X + " " + Y;
this.node.path = this.Path += d; this.node.path = this.Path += d;
this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(x); this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(x);
this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(y); this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(y);
...@@ -1417,9 +1428,11 @@ window.Raphael = (function () { ...@@ -1417,9 +1428,11 @@ window.Raphael = (function () {
return this; return this;
}; };
p.lineTo = function (x, y) { p.lineTo = function (x, y) {
var d = this.isAbsolute?"l":"r"; var X = Math.round(parseFloat(x)) - 1;
d += Math.round(parseFloat(x)) + " " + Math.round(parseFloat(y)); var Y = Math.round(parseFloat(y)) - 1;
this[0].path = this.Path += d; var d = this.isAbsolute ? "l" : "r";
d += X + " " + Y;
this.node.path = this.Path += d;
this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(x); this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(x);
this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(y); this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(y);
this.last.isAbsolute = this.isAbsolute; this.last.isAbsolute = this.isAbsolute;
...@@ -1429,10 +1442,10 @@ window.Raphael = (function () { ...@@ -1429,10 +1442,10 @@ window.Raphael = (function () {
p.arcTo = function (rx, ry, large_arc_flag, sweep_flag, x2, y2) { p.arcTo = function (rx, ry, large_arc_flag, sweep_flag, x2, y2) {
// for more information of where this math came from visit: // for more information of where this math came from visit:
// http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes // http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes
x2 = (this.isAbsolute ? 0 : this.last.x) + x2; x2 = (this.isAbsolute ? 0 : this.last.x) + x2 - 1;
y2 = (this.isAbsolute ? 0 : this.last.y) + y2; y2 = (this.isAbsolute ? 0 : this.last.y) + y2 - 1;
var x1 = this.last.x, var x1 = this.last.x - 1,
y1 = this.last.y, y1 = this.last.y - 1,
x = (x1 - x2) / 2, x = (x1 - x2) / 2,
y = (y1 - y2) / 2, y = (y1 - y2) / 2,
k = (large_arc_flag == sweep_flag ? -1 : 1) * k = (large_arc_flag == sweep_flag ? -1 : 1) *
...@@ -1454,11 +1467,11 @@ window.Raphael = (function () { ...@@ -1454,11 +1467,11 @@ window.Raphael = (function () {
if (!w1) { if (!w1) {
return this.lineTo(x1, y1); return this.lineTo(x1, y1);
} else { } else {
var x = Math.round(Math.round(parseFloat(x1) * 100) / 100), var x = Math.round(parseFloat(x1)) - 1,
y = Math.round(Math.round(parseFloat(y1) * 100) / 100), y = Math.round(parseFloat(y1)) - 1,
w = Math.round(Math.round(parseFloat(w1) * 100) / 100), w = Math.round(parseFloat(w1)),
d = this.isAbsolute ? "c" : "v", d = this.isAbsolute ? "c" : "v",
attr = [Math.round(this.last.x) + w, Math.round(this.last.y), x - w, y, x, y], attr = [Math.round(this.last.x) - 1 + w, Math.round(this.last.y) - 1, x - w, y, x, y],
svgattr = [this.last.x + w1, this.last.y, x1 - w1, y1, x1, y1]; svgattr = [this.last.x + w1, this.last.y, x1 - w1, y1, x1, y1];
d += attr.join(" ") + " "; d += attr.join(" ") + " ";
this.last.x = (this.isAbsolute ? 0 : this.last.x) + attr[4]; this.last.x = (this.isAbsolute ? 0 : this.last.x) + attr[4];
...@@ -1477,12 +1490,12 @@ window.Raphael = (function () { ...@@ -1477,12 +1490,12 @@ window.Raphael = (function () {
this.last.by = (this.isAbsolute ? 0 : this.last.y) + parseFloat(arguments[3]); this.last.by = (this.isAbsolute ? 0 : this.last.y) + parseFloat(arguments[3]);
this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(arguments[4]); this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(arguments[4]);
this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(arguments[5]); this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(arguments[5]);
d += [Math.round(parseFloat(arguments[0])), d += [Math.round(parseFloat(arguments[0])) - 1,
Math.round(parseFloat(arguments[1])), Math.round(parseFloat(arguments[1])) - 1,
Math.round(parseFloat(arguments[2])), Math.round(parseFloat(arguments[2])) - 1,
Math.round(parseFloat(arguments[3])), Math.round(parseFloat(arguments[3])) - 1,
Math.round(parseFloat(arguments[4])), Math.round(parseFloat(arguments[4])) - 1,
Math.round(parseFloat(arguments[5]))].join(" ") + " "; Math.round(parseFloat(arguments[5])) - 1].join(" ") + " ";
this.last.isAbsolute = this.isAbsolute; this.last.isAbsolute = this.isAbsolute;
this.attrs.path += (this.isAbsolute ? "C" : "c") + Array.prototype.splice.call(arguments, 0, arguments.length); this.attrs.path += (this.isAbsolute ? "C" : "c") + Array.prototype.splice.call(arguments, 0, arguments.length);
} }
...@@ -1493,43 +1506,46 @@ window.Raphael = (function () { ...@@ -1493,43 +1506,46 @@ window.Raphael = (function () {
this.last.by = (this.isAbsolute ? 0 : this.last.y) + parseFloat(arguments[1]); this.last.by = (this.isAbsolute ? 0 : this.last.y) + parseFloat(arguments[1]);
this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(arguments[2]); this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(arguments[2]);
this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(arguments[3]); this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(arguments[3]);
d += [Math.round(bx), Math.round(by), d += [Math.round(bx) - 1, Math.round(by) - 1,
Math.round(parseFloat(arguments[0])), Math.round(parseFloat(arguments[0])) - 1,
Math.round(parseFloat(arguments[1])), Math.round(parseFloat(arguments[1])) - 1,
Math.round(parseFloat(arguments[2])), Math.round(parseFloat(arguments[2])) - 1,
Math.round(parseFloat(arguments[3]))].join(" ") + " "; Math.round(parseFloat(arguments[3])) - 1].join(" ") + " ";
this.attrs.path += (this.isAbsolute ? "S" : "s") + Array.prototype.splice.call(arguments, 0, arguments.length); this.attrs.path += (this.isAbsolute ? "S" : "s") + Array.prototype.splice.call(arguments, 0, arguments.length);
} }
this.node.path = this.Path += d; this.node.path = this.Path += d;
return this; return this;
}; };
p.qcurveTo = function () { p.qcurveTo = function () {
var d = "qb"; var lx = Math.round(this.last.x) - 1,
ly = Math.round(this.last.y) - 1,
res = [];
if (arguments.length == 4) { if (arguments.length == 4) {
this.last.qx = (this.isAbsolute ? 0 : this.last.x) + parseFloat(arguments[0]); this.last.qx = (!this.isAbsolute * this.last.x) + parseFloat(arguments[0]);
this.last.qy = (this.isAbsolute ? 0 : this.last.y) + parseFloat(arguments[1]); this.last.qy = (!this.isAbsolute * this.last.y) + parseFloat(arguments[1]);
this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(arguments[2]); this.last.x = (!this.isAbsolute * this.last.x) + parseFloat(arguments[2]);
this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(arguments[3]); this.last.y = (!this.isAbsolute * this.last.y) + parseFloat(arguments[3]);
d += [Math.round(this.last.qx), res = [this.last.qx, this.last.qy, this.last.x, this.last.y];
Math.round(this.last.qy),
Math.round(this.last.x),
Math.round(this.last.y)].join(" ") + " ";
this.last.isAbsolute = this.isAbsolute; this.last.isAbsolute = this.isAbsolute;
this.attrs.path += (this.isAbsolute ? "Q" : "q") + Array.prototype.splice.call(arguments, 0, arguments.length); this.attrs.path += (this.isAbsolute ? "Q" : "q") + Array.prototype.splice.call(arguments, 0, arguments.length);
} }
if (arguments.length == 2) { if (arguments.length == 2) {
this.last.qx = this.last.x * 2 - this.last.qx; this.last.qx = this.last.x * 2 - this.last.qx;
this.last.qy = this.last.y * 2 - this.last.qy; this.last.qy = this.last.y * 2 - this.last.qy;
this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(arguments[2]); this.last.x = (!this.isAbsolute * this.last.x) + parseFloat(arguments[2]);
this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(arguments[3]); this.last.y = (!this.isAbsolute * this.last.y) + parseFloat(arguments[3]);
d += [Math.round(this.last.qx), res = [this.last.qx, this.last.qy, this.last.x, this.last.y];
Math.round(this.last.qy),
Math.round(this.last.x),
Math.round(this.last.y)].join(" ") + " ";
this.attrs.path += (this.isAbsolute ? "T" : "t") + Array.prototype.splice.call(arguments, 0, arguments.length); this.attrs.path += (this.isAbsolute ? "T" : "t") + Array.prototype.splice.call(arguments, 0, arguments.length);
} }
var d = "c" + [
Math.round(2 / 3 * res[0] + 1 / 3 * lx) - 1,
Math.round(2 / 3 * res[1] + 1 / 3 * ly) - 1,
Math.round(2 / 3 * res[0] + 1 / 3 * res[2]) - 1,
Math.round(2 / 3 * res[1] + 1 / 3 * res[3]) - 1,
Math.round(res[2]) - 1,
Math.round(res[3]) - 1
].join(" ") + " ";
this.node.path = this.Path += d; this.node.path = this.Path += d;
this.path.push({type: "qcurve", arg: [].slice.call(arguments, 0), pos: this.isAbsolute});
return this; return this;
}; };
p.addRoundedCorner = function (r, dir) { p.addRoundedCorner = function (r, dir) {
...@@ -1608,6 +1624,7 @@ window.Raphael = (function () { ...@@ -1608,6 +1624,7 @@ window.Raphael = (function () {
if (params.gradient) { if (params.gradient) {
addGradientFill(p, params.gradient); addGradientFill(p, params.gradient);
} }
p.setBox();
VML.canvas.appendChild(g); VML.canvas.appendChild(g);
return p; return p;
}; };
...@@ -1646,7 +1663,7 @@ window.Raphael = (function () { ...@@ -1646,7 +1663,7 @@ window.Raphael = (function () {
node.style.filter = (node.filterMatrix || "") + (node.filterOpacity || ""); node.style.filter = (node.filterMatrix || "") + (node.filterOpacity || "");
} }
params.font && (s.font = params.font); params.font && (s.font = params.font);
params["font-family"] && (s.fontFamily = params["font-family"]); params["font-family"] && (s.fontFamily = '"' + params["font-family"].split(",")[0].replace(/^['"]+|['"]+$/g, "") + '"');
params["font-size"] && (s.fontSize = params["font-size"]); params["font-size"] && (s.fontSize = params["font-size"]);
params["font-weight"] && (s.fontWeight = params["font-weight"]); params["font-weight"] && (s.fontWeight = params["font-weight"]);
params["font-style"] && (s.fontStyle = params["font-style"]); params["font-style"] && (s.fontStyle = params["font-style"]);
...@@ -1823,7 +1840,7 @@ window.Raphael = (function () { ...@@ -1823,7 +1840,7 @@ window.Raphael = (function () {
if (deg == null) { if (deg == null) {
return this._.rt.deg; return this._.rt.deg;
} }
deg = deg.toString().split(separator); deg = (deg + "").split(separator);
if (deg.length - 1) { if (deg.length - 1) {
cx = parseFloat(deg[1]); cx = parseFloat(deg[1]);
cy = parseFloat(deg[2]); cy = parseFloat(deg[2]);
...@@ -1839,7 +1856,7 @@ window.Raphael = (function () { ...@@ -1839,7 +1856,7 @@ window.Raphael = (function () {
} }
this._.rt.cx = cx; this._.rt.cx = cx;
this._.rt.cy = cy; this._.rt.cy = cy;
this.setBox(null, cx, cy); this.setBox(this.attrs, cx, cy);
this.Group.style.rotation = this._.rt.deg; this.Group.style.rotation = this._.rt.deg;
// gradient fix for rotation. TODO // gradient fix for rotation. TODO
// var fill = (this.shape || this.node).getElementsByTagName("fill"); // var fill = (this.shape || this.node).getElementsByTagName("fill");
...@@ -1998,11 +2015,8 @@ window.Raphael = (function () { ...@@ -1998,11 +2015,8 @@ window.Raphael = (function () {
if (params.text && this.type == "text") { if (params.text && this.type == "text") {
this.node.string = params.text; this.node.string = params.text;
} }
if (params.id) {
this.node.id = params.id;
}
setFillAndStroke(this, params); setFillAndStroke(this, params);
this.setBox(params); this.setBox(this.attrs);
} }
return this; return this;
}; };
...@@ -2029,8 +2043,17 @@ window.Raphael = (function () { ...@@ -2029,8 +2043,17 @@ window.Raphael = (function () {
return this; return this;
}; };
var theCircle = function (vml, x, y, r) { var theCircle = function (vml, x, y, r) {
var g = createNode("group"); var g = createNode("group"),
var o = createNode("oval"); gl = g.style,
o = createNode("oval"),
ol = o.style;
gl.position = "absolute";
gl.left = 0;
gl.top = 0;
gl.width = vml.width + "px";
gl.height = vml.height + "px";
g.coordsize = vml.coordsize;
g.coordorigin = vml.coordorigin;
g.appendChild(o); g.appendChild(o);
var res = new Element(o, g, vml); var res = new Element(o, g, vml);
res.type = "circle"; res.type = "circle";
...@@ -2044,26 +2067,38 @@ window.Raphael = (function () { ...@@ -2044,26 +2067,38 @@ window.Raphael = (function () {
}; };
var theRect = function (vml, x, y, w, h, r) { var theRect = function (vml, x, y, w, h, r) {
var g = createNode("group"), var g = createNode("group"),
gl = g.style,
o = createNode(r ? "roundrect" : "rect"), o = createNode(r ? "roundrect" : "rect"),
arcsize = (+r || 0) / (Math.min(w, h)); arcsize = (+r || 0) / (Math.min(w, h));
o.arcsize = arcsize; o.arcsize = arcsize;
gl.position = "absolute";
gl.left = 0;
gl.top = 0;
gl.width = vml.width + "px";
gl.height = vml.height + "px";
g.coordsize = vml.coordsize;
g.coordorigin = vml.coordorigin;
g.appendChild(o); g.appendChild(o);
var res = new Element(o, g, vml); var res = new Element(o, g, vml);
res.type = "rect"; res.type = "rect";
setFillAndStroke(res, {stroke: "#000"}); setFillAndStroke(res, {stroke: "#000"});
res.attrs.x = x;
res.attrs.y = y;
res.attrs.w = w;
res.attrs.h = h;
res.attrs.r = +r;
res.arcsize = arcsize; res.arcsize = arcsize;
res.setBox({x: x, y: y, width: w, height: h}); res.setBox({x: x, y: y, width: w, height: h, r: +r});
vml.canvas.appendChild(g); vml.canvas.appendChild(g);
return res; return res;
}; };
var theEllipse = function (vml, x, y, rx, ry) { var theEllipse = function (vml, x, y, rx, ry) {
var g = createNode("group"); var g = createNode("group"),
var o = createNode("oval"); gl = g.style,
o = createNode("oval"),
ol = o.style;
gl.position = "absolute";
gl.left = 0;
gl.top = 0;
gl.width = vml.width + "px";
gl.height = vml.height + "px";
g.coordsize = vml.coordsize;
g.coordorigin = vml.coordorigin;
g.appendChild(o); g.appendChild(o);
var res = new Element(o, g, vml); var res = new Element(o, g, vml);
res.type = "ellipse"; res.type = "ellipse";
...@@ -2077,8 +2112,17 @@ window.Raphael = (function () { ...@@ -2077,8 +2112,17 @@ window.Raphael = (function () {
return res; return res;
}; };
var theImage = function (vml, src, x, y, w, h) { var theImage = function (vml, src, x, y, w, h) {
var g = createNode("group"); var g = createNode("group"),
var o = createNode("image"); gl = g.style,
o = createNode("image"),
ol = o.style;
gl.position = "absolute";
gl.left = 0;
gl.top = 0;
gl.width = vml.width + "px";
gl.height = vml.height + "px";
g.coordsize = vml.coordsize;
g.coordorigin = vml.coordorigin;
o.src = src; o.src = src;
g.appendChild(o); g.appendChild(o);
var res = new Element(o, g, vml); var res = new Element(o, g, vml);
...@@ -2093,9 +2137,16 @@ window.Raphael = (function () { ...@@ -2093,9 +2137,16 @@ window.Raphael = (function () {
}; };
var theText = function (vml, x, y, text) { var theText = function (vml, x, y, text) {
var g = createNode("group"), gs = g.style; var g = createNode("group"), gs = g.style;
gs.position = "absolute";
gs.left = 0;
gs.top = 0;
gs.width = vml.width + "px";
gs.height = vml.height + "px";
g.coordsize = vml.coordsize;
g.coordorigin = vml.coordorigin;
var el = createNode("shape"), ol = el.style; var el = createNode("shape"), ol = el.style;
var path = createNode("path"), ps = path.style; var path = createNode("path"), ps = path.style;
path.v = ["m", Math.round(x), ", ", Math.round(y - 2), "l", Math.round(x) + 1, ", ", Math.round(y - 2)].join(""); path.v = ["m", Math.round(x), ", ", Math.round(y), "l", Math.round(x) + 1, ", ", Math.round(y)].join("");
path.textpathok = true; path.textpathok = true;
ol.width = vml.width; ol.width = vml.width;
ol.height = vml.height; ol.height = vml.height;
...@@ -2107,8 +2158,6 @@ window.Raphael = (function () { ...@@ -2107,8 +2158,6 @@ window.Raphael = (function () {
var o = createNode("textpath"); var o = createNode("textpath");
o.string = text; o.string = text;
o.on = true; o.on = true;
o.coordsize = vml.coordsize;
o.coordorigin = vml.coordorigin;
el.appendChild(o); el.appendChild(o);
el.appendChild(path); el.appendChild(path);
g.appendChild(el); g.appendChild(el);
...@@ -2126,11 +2175,12 @@ window.Raphael = (function () { ...@@ -2126,11 +2175,12 @@ window.Raphael = (function () {
return res; return res;
}; };
var setSize = function (width, height) { var setSize = function (width, height) {
var cs = this.canvas.style;
this.width = width || this.width; this.width = width || this.width;
this.height = height || this.height; this.height = height || this.height;
this.canvas.style.width = this.width + "px"; cs.width = this.width + "px";
this.canvas.style.height = this.height + "px"; cs.height = this.height + "px";
this.canvas.parentNode.style.clip = "rect(0 " + this.width + "px " + this.height + "px 0)"; cs.clip = "rect(0 " + this.width + "px " + this.height + "px 0)";
this.canvas.coordsize = this.width + " " + this.height; this.canvas.coordsize = this.width + " " + this.height;
return this; return this;
}; };
...@@ -2157,41 +2207,22 @@ window.Raphael = (function () { ...@@ -2157,41 +2207,22 @@ window.Raphael = (function () {
if (!container) { if (!container) {
throw new Error("VML container not found."); throw new Error("VML container not found.");
} }
var c = doc.createElement("div"), var c = paper.canvas = doc.createElement("div"),
d = doc.createElement("div"), cs = c.style;
r = paper.canvas = createNode("group"), width = parseFloat(width) || "512px";
cs = c.style, rs = r.style; height = parseFloat(height) || "342px";
paper.width = width; paper.width = width;
paper.height = height; paper.height = height;
width = width || "512px"; paper.coordsize = width + " " + height;
height = height || "342px"; paper.coordorigin = "0 0";
cs.clip = "rect(0 " + width + "px " + height + "px 0)"; cs.width = width + "px";
cs.top = "-2px"; cs.height = height + "px";
cs.left = "-2px";
cs.position = "absolute"; cs.position = "absolute";
rs.position = "absolute"; cs.clip = "rect(0 " + width + "px " + height + "px 0)";
d.style.position = "relative";
rs.width = width;
rs.height = height;
r.coordsize = (/%$/.test(width) ? width : parseFloat(width)) + " " + (/%$/.test(height) ? height : parseFloat(height));
r.coordorigin = "0 0";
var b = createNode("rect"), bs = b.style;
bs.left = bs.top = 0;
bs.width = rs.width;
bs.height = rs.height;
b.filled = b.stroked = "f";
r.appendChild(b);
c.appendChild(r);
d.appendChild(c);
if (container == 1) { if (container == 1) {
doc.body.appendChild(d); doc.body.appendChild(c);
cs.position = "absolute";
cs.left = x + "px"; cs.left = x + "px";
cs.top = y + "px"; cs.top = y + "px";
cs.width = width;
cs.height = height;
container = { container = {
style: { style: {
width: width, width: width,
...@@ -2199,12 +2230,12 @@ window.Raphael = (function () { ...@@ -2199,12 +2230,12 @@ window.Raphael = (function () {
} }
}; };
} else { } else {
cs.width = container.style.width = width; container.style.width = width;
cs.height = container.style.height = height; container.style.height = height;
if (container.firstChild) { if (container.firstChild) {
container.insertBefore(d, container.firstChild); container.insertBefore(c, container.firstChild);
} else { } else {
container.appendChild(d); container.appendChild(c);
} }
} }
for (var prop in paper) { for (var prop in paper) {
...@@ -2226,7 +2257,7 @@ window.Raphael = (function () { ...@@ -2226,7 +2257,7 @@ window.Raphael = (function () {
return container; return container;
}; };
paper.remove = function () { paper.remove = function () {
this.canvas.parentNode.parentNode.parentNode.removeChild(this.canvas.parentNode.parentNode); this.canvas.parentNode.removeChild(this.canvas);
}; };
paper.safari = function () {}; paper.safari = function () {};
} }
...@@ -2696,15 +2727,17 @@ window.Raphael = (function () { ...@@ -2696,15 +2727,17 @@ window.Raphael = (function () {
}; };
// Set // Set
var Set = function () { var Set = function (items) {
this.items = []; this.items = [];
this.length = 0; this.length = 0;
for (var i = 0, ii = arguments.length; i < ii; i++) { if (items) {
if (arguments[i] && (arguments[i].constructor == Element || arguments[i].constructor == Set)) { for (var i = 0, ii = items.length; i < ii; i++) {
this[this.items.length] = this.items[this.items.length] = arguments[i]; if (items[i] && (items[i].constructor == Element || items[i].constructor == Set)) {
this[this.items.length] = this.items[this.items.length] = items[i];
this.length++; this.length++;
} }
} }
}
}; };
Set.prototype.push = function (item) { Set.prototype.push = function (item) {
if (item && item.constructor == Element || item.constructor == Set) { if (item && item.constructor == Element || item.constructor == Set) {
...@@ -2714,7 +2747,7 @@ window.Raphael = (function () { ...@@ -2714,7 +2747,7 @@ window.Raphael = (function () {
} }
return this; return this;
}; };
Set.prototype.pull = function (id) { Set.prototype.pop = function (id) {
var res = this.items.splice(id, 1)[0]; var res = this.items.splice(id, 1)[0];
for (var j = id, jj = this.items.length; j < jj; j++) { for (var j = id, jj = this.items.length; j < jj; j++) {
this[j] = this[j + 1]; this[j] = this[j + 1];
...@@ -2767,26 +2800,42 @@ window.Raphael = (function () { ...@@ -2767,26 +2800,42 @@ window.Raphael = (function () {
R.registerFont = function (font) { R.registerFont = function (font) {
if (!font.face) { if (!font.face) {
return; return font;
} }
this.fonts = this.fonts || {}; this.fonts = this.fonts || {};
if (this.fonts[font.face["font-family"]]) { var fontcopy = {
this.fonts[font.face["font-family"]].push(font); w: font.w,
face: {},
glyphs: {}
},
family = font.face["font-family"];
for (var prop in font.face) {
fontcopy.face[prop] = font.face[prop];
}
if (this.fonts[family]) {
this.fonts[family].push(fontcopy);
} else { } else {
this.fonts[font.face["font-family"]] = [font]; this.fonts[family] = [fontcopy];
} }
if (!font.svg) { if (!font.svg) {
font.face["units-per-em"] = parseInt(font.face["units-per-em"], 10); fontcopy.face["units-per-em"] = parseInt(font.face["units-per-em"], 10);
for (var glyph in font.glyphs) { for (var glyph in font.glyphs) {
var path = font.glyphs[glyph]; var path = font.glyphs[glyph];
if (path.d) { fontcopy.glyphs[glyph] = {
path.d = "M" + path.d.replace(/[mlcxtrv]/g, function (command) { w: path.w,
k: {},
d: path.d && "M" + path.d.replace(/[mlcxtrv]/g, function (command) {
return {l: "L", c: "C", x: "z", t: "m", r: "l", v: "c"}[command] || "M"; return {l: "L", c: "C", x: "z", t: "m", r: "l", v: "c"}[command] || "M";
}) + "z"; }) + "z"
};
if (path.k) {
for (var k in path.k) {
fontcopy.glyphs[glyph].k[k] = path.k[k];
}
} }
} }
} }
return font;
}; };
paper.getFont = function (family, weight, style, stretch) { paper.getFont = function (family, weight, style, stretch) {
stretch = stretch || "normal"; stretch = stretch || "normal";
......
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 sign in to comment