shile
/
raphael
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fixed setBox and getBBox for text nodes in IE.

This commit is contained in:
Dmitry Baranovskiy 2009-02-11 16:31:09 +11:00
parent ce0c1bf064
commit e096c8fe9b
1 changed files with 28 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
raphael.js
View File

@ -1009,7 +1009,6 @@ function Raphael() {
el.setAttribute("x", x); el.setAttribute("x", x);
el.setAttribute("y", y); el.setAttribute("y", y);
el.setAttribute("text-anchor", "middle"); el.setAttribute("text-anchor", "middle");
el.setAttribute("fill", "#000");
if (text) { if (text) {
el.appendChild(document.createTextNode(text)); el.appendChild(document.createTextNode(text));
} }
@ -1020,8 +1019,8 @@ function Raphael() {
res.attrs = res.attrs || {}; res.attrs = res.attrs || {};
res.attrs.x = x; res.attrs.x = x;
res.attrs.y = y; res.attrs.y = y;
res.attrs.fill = "#000";
res.type = "text"; res.type = "text";
setFillAndStroke(res, {font: '10px "Arial"', stroke: "none", fill: "#000"});
return res; return res;
}; };
theGroup = function (svg) { theGroup = function (svg) {
@ -1354,7 +1353,8 @@ function Raphael() {
return p; return p;
}; };
setFillAndStroke = function (o, params) { setFillAndStroke = function (o, params) {
var s = o[0].style; var s = o.node.style,
res = o;
o.attrs = o.attrs || {}; o.attrs = o.attrs || {};
for (var par in params) { for (var par in params) {
o.attrs[par] = params[par]; o.attrs[par] = params[par];
@ -1439,6 +1439,18 @@ function Raphael() {
} }
o.appendChild(stroke); o.appendChild(stroke);
} }
if (res.type == "text") {
var span = document.createElement("span");//,
s = span.style;
s.font = res.attrs.font;
res.node.parentNode.appendChild(span);
span.innerText = res.node.string;
res.W = res.attrs.w = span.offsetWidth;
res.H = res.attrs.h = span.offsetHeight;
res.X = res.attrs.x - Math.round(res.W / 2);
res.Y = res.attrs.y - res.H / 2;
res.node.parentNode.removeChild(span);
}
}; };
addGrdientFill = function (o, gradient) { addGrdientFill = function (o, gradient) {
o.attrs = o.attrs || {}; o.attrs = o.attrs || {};
@ -1520,7 +1532,7 @@ function Raphael() {
}; };
Element.prototype.setBox = function (params) { Element.prototype.setBox = function (params) {
var gs = this.Group.style, var gs = this.Group.style,
os = this[0].style; os = (this.shape && this.shape.style) || this.node.style;
for (var i in params) { for (var i in params) {
this.attrs[i] = params[i]; this.attrs[i] = params[i];
} }
@ -1546,7 +1558,11 @@ function Raphael() {
break; break;
case "text": case "text":
this.textpath.v = ["m", Math.round(attr.x), ", ", Math.round(attr.y - 2), "l", Math.round(attr.x) + 1, ", ", Math.round(attr.y - 2)].join(""); this.textpath.v = ["m", Math.round(attr.x), ", ", Math.round(attr.y - 2), "l", Math.round(attr.x) + 1, ", ", Math.round(attr.y - 2)].join("");
return; x = attr.x - Math.round(this.W / 2);
y = attr.y - this.H / 2;
w = this.W;
h = this.H;
break;
case "path": case "path":
if (!this.attrs.path) { if (!this.attrs.path) {
x = 0; x = 0;
@ -1568,13 +1584,13 @@ function Raphael() {
h = this.vml.height; h = this.vml.height;
break; break;
} }
if (this.type == "path") { if (this.type == "path" || this.type == "text") {
var left = Math.round(this.vml.width / 2 - w / 2 - x), var left = Math.round(this.vml.width / 2 - w / 2 - x),
top = Math.round(this.vml.height / 2 - h / 2 - y); top = Math.round(this.vml.height / 2 - h / 2 - y);
gs.left = - left + "px"; gs.left = - left + "px";
gs.top = - top + "px"; gs.top = - top + "px";
this.X = left; this.X = this.type == "text" ? x : left;
this.Y = top; this.Y = this.type == "text" ? y : top;
this.W = w; this.W = w;
this.H = h; this.H = h;
os.top = top + "px"; os.top = top + "px";
@ -1715,12 +1731,12 @@ function Raphael() {
g.appendChild(o); g.appendChild(o);
vml.canvas.appendChild(g); vml.canvas.appendChild(g);
var res = new Element(o, g, vml); var res = new Element(o, g, vml);
res.type = "circle";
setFillAndStroke(res, {stroke: "#000", fill: "none"}); setFillAndStroke(res, {stroke: "#000", fill: "none"});
res.setBox({x: x - r, y: y - r, width: r * 2, height: r * 2}); res.setBox({x: x - r, y: y - r, width: r * 2, height: r * 2});
res.attrs.cx = x; res.attrs.cx = x;
res.attrs.cy = y; res.attrs.cy = y;
res.attrs.r = r; res.attrs.r = r;
res.type = "circle";
return res; return res;
}; };
theRect = function (vml, x, y, w, h, r) { theRect = function (vml, x, y, w, h, r) {
@ -1732,6 +1748,7 @@ function Raphael() {
g.appendChild(o); g.appendChild(o);
vml.canvas.appendChild(g); vml.canvas.appendChild(g);
var res = new Element(o, g, vml); var res = new Element(o, g, vml);
res.type = "rect";
setFillAndStroke(res, {stroke: "#000"}); setFillAndStroke(res, {stroke: "#000"});
res.setBox({x: x, y: y, width: w, height: h}); res.setBox({x: x, y: y, width: w, height: h});
res.attrs.x = x; res.attrs.x = x;
@ -1739,7 +1756,6 @@ function Raphael() {
res.attrs.w = w; res.attrs.w = w;
res.attrs.h = h; res.attrs.h = h;
res.attrs.r = r; res.attrs.r = r;
res.type = "rect";
return res; return res;
}; };
theEllipse = function (vml, x, y, rx, ry) { theEllipse = function (vml, x, y, rx, ry) {
@ -1748,13 +1764,13 @@ function Raphael() {
g.appendChild(o); g.appendChild(o);
vml.canvas.appendChild(g); vml.canvas.appendChild(g);
var res = new Element(o, g, vml); var res = new Element(o, g, vml);
res.type = "ellipse";
setFillAndStroke(res, {stroke: "#000"}); setFillAndStroke(res, {stroke: "#000"});
res.setBox({x: x - rx, y: y - ry, width: rx * 2, height: ry * 2}); res.setBox({x: x - rx, y: y - ry, width: rx * 2, height: ry * 2});
res.attrs.cx = x; res.attrs.cx = x;
res.attrs.cy = y; res.attrs.cy = y;
res.attrs.rx = rx; res.attrs.rx = rx;
res.attrs.ry = ry; res.attrs.ry = ry;
res.type = "ellipse";
return res; return res;
}; };
theImage = function (vml, src, x, y, w, h) { theImage = function (vml, src, x, y, w, h) {
@ -1773,7 +1789,6 @@ function Raphael() {
return res; return res;
}; };
theText = function (vml, x, y, text) { theText = function (vml, x, y, text) {
// @TODO: setTheBox
var g = document.createElement("rvml:group"), gs = g.style; var g = document.createElement("rvml:group"), gs = g.style;
var el = document.createElement("rvml:shape"), ol = el.style; var el = document.createElement("rvml:shape"), ol = el.style;
var path = document.createElement("rvml:path"), ps = path.style; var path = document.createElement("rvml:path"), ps = path.style;
@ -1803,7 +1818,7 @@ function Raphael() {
res.attrs.y = y; res.attrs.y = y;
res.attrs.w = 1; res.attrs.w = 1;
res.attrs.h = 1; res.attrs.h = 1;
setFillAndStroke(res, {stroke: "none", fill: "#000"}); setFillAndStroke(res, {font: '10px "Arial"', stroke: "none", fill: "#000"});
return res; return res;
}; };
theGroup = function (vml) { theGroup = function (vml) {