Skip to content

殷洪（管理员） / raphael

Go to a project
Commit a42f6a61 by Dmitry Baranovskiy
Options

New methods: registerFont, getFont and print. Cufón file formats for fonts integration.

parent b3e699a2
Showing with 108 additions and 36 deletions
raphael.js
...@@ -979,38 +979,36 @@ window.Raphael = (function () { ...@@ -979,38 +979,36 @@ window.Raphael = (function () {
tuneText(o, params); tuneText(o, params);
}; };
var leading = 1.2; var leading = 1.2;
var tuneText = function (element, params) { var tuneText = function (el, params) {
if (element.type != "text" || !("text" in params || "font" in params || "font-size" in params || "x" in params)) { if (el.type != "text" || !("text" in params || "font" in params || "font-size" in params || "x" in params)) {
return; return;
} }
var fontSize = element.node.firstChild ? parseInt(doc.defaultView.getComputedStyle(element.node.firstChild, "").getPropertyValue("font-size"), 10) : 10; var fontSize = el.node.firstChild ? parseInt(doc.defaultView.getComputedStyle(el.node.firstChild, "").getPropertyValue("font-size"), 10) : 10;
var height = 0;
if ("text" in params) { if ("text" in params) {
while (element.node.firstChild) { while (el.node.firstChild) {
element.node.removeChild(element.node.firstChild); el.node.removeChild(el.node.firstChild);
} }
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(element.svg.svgns, "tspan"); var tspan = doc.createElementNS(el.svg.svgns, "tspan");
i && tspan.setAttribute("dy", fontSize * leading); i && tspan.setAttribute("dy", fontSize * leading);
i && tspan.setAttribute("x", element.attrs.x); i && tspan.setAttribute("x", el.attrs.x);
tspan.appendChild(doc.createTextNode(texts[i])); tspan.appendChild(doc.createTextNode(texts[i]));
element.node.appendChild(tspan); el.node.appendChild(tspan);
height += fontSize * leading;
} }
} else { } else {
var texts = element.node.getElementsByTagName("tspan"); var texts = el.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].setAttribute("dy", fontSize * leading);
i && texts[i].setAttribute("x", element.attrs.x); i && texts[i].setAttribute("x", el.attrs.x);
height += fontSize * leading;
} }
} }
height -= fontSize * (leading - 1); el.node.setAttribute("y", el.attrs.y);
var dif = height / 2 - fontSize; var bb = el.getBBox();
var dif = el.attrs.y - (bb.y + bb.height / 2);
if (dif) { if (dif) {
element.node.setAttribute("y", element.attrs.y - dif); el.node.setAttribute("y", el.attrs.y + dif);
} }
}; };
var Element = function (node, svg) { var Element = function (node, svg) {
...@@ -1072,15 +1070,11 @@ window.Raphael = (function () { ...@@ -1072,15 +1070,11 @@ window.Raphael = (function () {
Element.prototype.getBBox = function () { Element.prototype.getBBox = function () {
var bbox = this.node.getBBox(); var bbox = this.node.getBBox();
if (this.type == "text") { if (this.type == "text") {
var chr0 = this.node.getExtentOfChar(0); bbox = {x: bbox.x, y: Infinity, width: bbox.width, height: 0};
if (chr0.height > bbox.height) { for (var i = 0, ii = this.node.getNumberOfChars(); i < ii; i++) {
var chrl = this.node.getExtentOfChar(this.node.getNumberOfChars() - 1); var bb = this.node.getExtentOfChar(i);
return { (bb.y < bbox.y) && (bbox.y = bb.y);
x: chr0.x, (bb.y + bb.height - bbox.y > bbox.height) && (bbox.height = bb.y + bb.height - bbox.y);
y: chr0.y,
width: chrl.x - chr0.x + chrl.width,
height: chr0.height
};
} }
} }
return bbox; return bbox;
...@@ -1867,9 +1861,17 @@ window.Raphael = (function () { ...@@ -1867,9 +1861,17 @@ window.Raphael = (function () {
os.top = y - top + "px"; os.top = y - top + "px";
os.width = w + "px"; os.width = w + "px";
os.height = h + "px"; os.height = h + "px";
if (this.type == "rect" && this.attrs.r != params.r) { var arcsize = (+params.r || 0) / (Math.min(w, h));
if (this.type == "rect" && this.arcsize != arcsize) {
// We should recplace element with the new one // We should recplace element with the new one
// this.node.arcsize = (params.r || 0) / (Math.min(w, h)); var o = createNode("roundrect");
o.arcsize = arcsize;
this.Group.appendChild(o);
this.node.parentNode.removeChild(this.node);
this.node = o;
this.arcsize = arcsize;
setFillAndStroke(this, this.attrs);
this.setBox(this.attrs);
} }
} }
}; };
...@@ -1971,9 +1973,10 @@ window.Raphael = (function () { ...@@ -1971,9 +1973,10 @@ window.Raphael = (function () {
return res; return res;
}; };
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"),
var o = createNode("roundrect"); o = createNode("roundrect"),
o.arcsize = (+r || 0) / (Math.min(w, h)); arcsize = (+r || 0) / (Math.min(w, h));
o.arcsize = arcsize;
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);
...@@ -1983,7 +1986,8 @@ window.Raphael = (function () { ...@@ -1983,7 +1986,8 @@ window.Raphael = (function () {
res.attrs.y = y; res.attrs.y = y;
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.arcsize = arcsize;
res.setBox({x: x, y: y, width: w, height: h}); res.setBox({x: x, y: y, width: w, height: h});
return res; return res;
}; };
...@@ -2310,11 +2314,11 @@ window.Raphael = (function () { ...@@ -2310,11 +2314,11 @@ window.Raphael = (function () {
!+y && (y = x); !+y && (y = x);
var dx, dy, dcx, dcy; var dx, dy, dcx, dcy;
if (x != 0) { if (x != 0) {
var bb = this.getBBox(), var bb = this.type == "path" ? pathDimensions(this.attrs.path) : this.getBBox(),
rcx = bb.x + bb.width / 2, rcx = bb.x + bb.width / 2,
rcy = bb.y + bb.height / 2; rcy = bb.y + bb.height / 2;
cx = cx || rcx; cx = isNaN(cx) ? rcx : cx;
cy = cy || rcy; cy = isNaN(cy) ? rcy : cy;
var dirx = Math.round(x / Math.abs(x)), var dirx = Math.round(x / Math.abs(x)),
diry = Math.round(y / Math.abs(y)), diry = Math.round(y / Math.abs(y)),
s = this.node.style, s = this.node.style,
...@@ -2324,7 +2328,7 @@ window.Raphael = (function () { ...@@ -2324,7 +2328,7 @@ window.Raphael = (function () {
dy = this.attr("y"); dy = this.attr("y");
dcx = this.attr("cx"); dcx = this.attr("cx");
dcy = this.attr("cy"); dcy = this.attr("cy");
if (dirx != 1 || diry != 1) { if (!(this.type in {rect: 1, circle: 1, ellipse: 1}) && (dirx != 1 || diry != 1)) {
if (this.transformations) { if (this.transformations) {
this.transformations[2] = "scale(" + [dirx, diry] + ")"; this.transformations[2] = "scale(" + [dirx, diry] + ")";
this.node.setAttribute("transform", this.transformations.join(" ")); this.node.setAttribute("transform", this.transformations.join(" "));
...@@ -2338,6 +2342,7 @@ window.Raphael = (function () { ...@@ -2338,6 +2342,7 @@ window.Raphael = (function () {
", Dx=0, Dy=0, sizingmethod='auto expand', filtertype='bilinear')"; ", Dx=0, Dy=0, sizingmethod='auto expand', filtertype='bilinear')";
s.filter = (this.node.filterMatrix || "") + (this.node.filterOpacity || ""); s.filter = (this.node.filterMatrix || "") + (this.node.filterOpacity || "");
} }
return this;
} else { } else {
if (this.transformations) { if (this.transformations) {
this.transformations[2] = ""; this.transformations[2] = "";
...@@ -2372,7 +2377,7 @@ window.Raphael = (function () { ...@@ -2372,7 +2377,7 @@ window.Raphael = (function () {
}); });
break; break;
case "path": case "path":
var path = pathToRelative(R.parsePathString(this.attr("path"))), var path = pathToRelative(R.parsePathString(this.attrs.path)),
skip = true; skip = true;
for (var i = 0, ii = path.length; i < ii; i++) { for (var i = 0, ii = path.length; i < ii; i++) {
if (path[i][0].toUpperCase() == "M" && skip) { if (path[i][0].toUpperCase() == "M" && skip) {
...@@ -2611,6 +2616,73 @@ window.Raphael = (function () { ...@@ -2611,6 +2616,73 @@ window.Raphael = (function () {
}; };
}; };
R.registerFont = function (font) {
if (!font.face) {
return;
}
this.fonts = this.fonts || {};
if (this.fonts[font.face["font-family"]]) {
this.fonts[font.face["font-family"]].push(font);
} else {
this.fonts[font.face["font-family"]] = [font];
}
font.face["units-per-em"] = parseInt(font.face["units-per-em"], 10);
for (var glyph in font.glyphs) {
var path = font.glyphs[glyph];
if (path.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";
}) + "z";
}
}
};
paper.getFont = function (family, weight, style, stretch) {
stretch = stretch || "normal";
style = style || "normal";
weight = +weight || {normal: 400, bold: 700, lighter: 300, bolder: 800}[weight] || 400;
var font = R.fonts[family];
if (!font) {
var name = new RegExp("(^|\\s)" + family.replace(/[^\w\d\s+!~.:_-]/g, "") + "(\\s|$)", "i");
for (var fontName in R.fonts) {
if (name.test(fontName)) {
font = R.fonts[fontName];
break;
}
}
}
var thefont;
if (font) {
for (var i = 0, ii = font.length; i < ii; i++) {
thefont = font[i];
if (thefont.face["font-weight"] == weight && (thefont.face["font-style"] == style || !thefont.face["font-style"]) && thefont.face["font-stretch"] == stretch) {
break;
}
}
}
return thefont;
};
paper.print = function (x, y, string, font, size) {
var out = this.set(),
letters = (string + "").split(""),
shift = 0,
path = "",
scale;
if (font) {
scale = (size || 16) / font.face["units-per-em"];
for (var i = 0, ii = letters.length; i < ii; i++) {
var prev = i && font.glyphs[letters[i - 1]] || {},
curr = font.glyphs[letters[i]];
shift += i ? (prev.w || font.w) + (prev.k && prev.k[letters[i]] || 0) : 0;
curr && curr.d && out.push(this.path({fill: "#000", stroke: "none"}, curr.d).translate(shift, 0));
}
out.scale(scale, scale, 0, y).translate(x, (size || 16) / 2);
}
return out;
};
R.noConflict = function () { R.noConflict = function () {
var r = window.Raphael; var r = window.Raphael;
delete window.Raphael; delete window.Raphael;
......
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