Skip to content

殷洪（管理员） / raphael

Go to a project
Commit 87f9554e by Dmitry Baranovskiy
Options

Fixing pathes, rotation and issue #47

parent c3ecaa81
Showing with 75 additions and 67 deletions
raphael.js
...@@ -122,6 +122,18 @@ window.Raphael = (function () { ...@@ -122,6 +122,18 @@ window.Raphael = (function () {
} }
return {h: hue, s: saturation, b: brightness}; return {h: hue, s: saturation, b: brightness};
}; };
R._path2string = function () {
var res = "",
item;
for (var i = 0, ii = this.length; i < ii; i++) {
for (var j = 0, jj = this[i].length; j < jj; j++) {
res += this[i][j];
j && j != jj - 1 && (res += ",");
}
i != ii - 1 && (res += "\n");
}
return res.replace(/,(?=-)/g, "");
};
var getRGBcache = {}, var getRGBcache = {},
getRGBcount = []; getRGBcount = [];
R.getRGB = function (colour) { R.getRGB = function (colour) {
...@@ -216,20 +228,7 @@ window.Raphael = (function () { ...@@ -216,20 +228,7 @@ window.Raphael = (function () {
delete this.start; delete this.start;
}; };
// path utilities // path utilities
var pathcache = {"": []}, var pathcache = {"": null},
path2string = function () {
var res = "",
item;
for (var i = 0, ii = this.length; i < ii; i++) {
for (var j = 0, jj = this[i].length; j < jj; j++) {
item = this[i][j];
res += isNaN(item) ? item : +item.toFixed(3);
j && j != jj - 1 && (res += ",");
}
i != ii - 1 && (res += "\n");
}
return res.replace(/,(?=-)/g, "");
},
pathcount = []; pathcount = [];
R.parsePathString = function (pathString) { R.parsePathString = function (pathString) {
if (pathString in pathcache) { if (pathString in pathcache) {
...@@ -237,7 +236,7 @@ window.Raphael = (function () { ...@@ -237,7 +236,7 @@ window.Raphael = (function () {
} }
var paramCounts = {a: 7, c: 6, h: 1, l: 2, m: 2, q: 4, s: 4, t: 2, v: 1, z: 0}, var paramCounts = {a: 7, c: 6, h: 1, l: 2, m: 2, q: 4, s: 4, t: 2, v: 1, z: 0},
data = []; data = [];
if (pathString.toString == path2string) { if (R.isArray(pathString) && R.isArray(pathString[0])) { // rough assumption
data = pathString; data = pathString;
} }
if (!data.length) { if (!data.length) {
...@@ -254,14 +253,13 @@ window.Raphael = (function () { ...@@ -254,14 +253,13 @@ window.Raphael = (function () {
}; };
} }
}); });
data.toString = path2string;
} }
data.toString = R._path2string;
if (pathcount.length > 200) { if (pathcount.length > 200) {
delete pathcache[pathcount.unshift()]; delete pathcache[pathcount.unshift()];
} }
pathcount.push(pathString); pathcount.push(pathString);
pathcache[pathString] = data; return (pathcache[pathString] = data);
return data;
}; };
var pathDimensions = function (path) { var pathDimensions = function (path) {
pathDimensions.cache = pathDimensions.cache || {}; pathDimensions.cache = pathDimensions.cache || {};
...@@ -298,7 +296,7 @@ window.Raphael = (function () { ...@@ -298,7 +296,7 @@ window.Raphael = (function () {
}); });
}, },
pathToRelative = function (pathArray) { pathToRelative = function (pathArray) {
if (typeof pathArray == "string") { if (!R.isArray(pathArray) || !R.isArray(pathArray && pathArray[0])) { // rough assumption
pathArray = R.parsePathString(pathArray); pathArray = R.parsePathString(pathArray);
} }
pathToRelative.cache = pathToRelative.cache || {}; pathToRelative.cache = pathToRelative.cache || {};
...@@ -373,7 +371,7 @@ window.Raphael = (function () { ...@@ -373,7 +371,7 @@ window.Raphael = (function () {
y += +res[i][len - 1]; y += +res[i][len - 1];
} }
} }
res.toString = path2string; res.toString = R._path2string;
if (pathToRelative.count.length > 100) { if (pathToRelative.count.length > 100) {
delete pathToRelative.cache[pathToRelative.count.unshift()]; delete pathToRelative.cache[pathToRelative.count.unshift()];
} }
...@@ -382,7 +380,7 @@ window.Raphael = (function () { ...@@ -382,7 +380,7 @@ window.Raphael = (function () {
}, },
pathClone = function (pathArray) { pathClone = function (pathArray) {
var res = []; var res = [];
if (typeof pathArray == "string") { if (!R.isArray(pathArray) || !R.isArray(pathArray && pathArray[0])) { // rough assumption
pathArray = R.parsePathString(pathArray); pathArray = R.parsePathString(pathArray);
} }
for (var i = 0, ii = pathArray.length; i < ii; i++) { for (var i = 0, ii = pathArray.length; i < ii; i++) {
...@@ -391,11 +389,11 @@ window.Raphael = (function () { ...@@ -391,11 +389,11 @@ window.Raphael = (function () {
res[i][j] = pathArray[i][j]; res[i][j] = pathArray[i][j];
} }
} }
res.toString = path2string; res.toString = R._path2string;
return res; return res;
}, },
pathToAbsolute = function (pathArray) { pathToAbsolute = function (pathArray) {
if (typeof pathArray == "string") { if (!R.isArray(pathArray) || !R.isArray(pathArray && pathArray[0])) { // rough assumption
pathArray = R.parsePathString(pathArray); pathArray = R.parsePathString(pathArray);
} }
pathToAbsolute.cache = pathToAbsolute.cache || {}; pathToAbsolute.cache = pathToAbsolute.cache || {};
...@@ -447,7 +445,6 @@ window.Raphael = (function () { ...@@ -447,7 +445,6 @@ window.Raphael = (function () {
} }
} }
} else { } else {
r = res[i] = [];
for (var k = 0, kk = pa.length; k < kk; k++) { for (var k = 0, kk = pa.length; k < kk; k++) {
res[i][k] = pa[k]; res[i][k] = pa[k];
} }
...@@ -468,7 +465,7 @@ window.Raphael = (function () { ...@@ -468,7 +465,7 @@ window.Raphael = (function () {
y = res[i][res[i].length - 1]; y = res[i][res[i].length - 1];
} }
} }
res.toString = path2string; res.toString = R._path2string;
if (pathToAbsolute.count.length > 100) { if (pathToAbsolute.count.length > 100) {
delete pathToAbsolute.cache[pathToAbsolute.count.unshift()]; delete pathToAbsolute.cache[pathToAbsolute.count.unshift()];
} }
...@@ -803,14 +800,13 @@ window.Raphael = (function () { ...@@ -803,14 +800,13 @@ window.Raphael = (function () {
// SVG // SVG
if (R.svg) { if (R.svg) {
var round = function (num) { var round = function (num) {
return isNaN(num) ? num : +num + ((+num).toFixed() == +num) * .5; return +num + (Math.floor(num) == num) * .5;
}; };
var roundPath = function (path) { var roundPath = function (path) {
for (var i = 0, ii = path.length; i < ii; i++) { for (var i = 0, ii = path.length; i < ii; i++) {
if (path[i][0].toLowerCase() != "a") { if (path[i][0].toLowerCase() != "a") {
for (var j = 0, jj = path[i].length; j < jj; j++) { for (var j = 1, jj = path[i].length; j < jj; j++) {
var x = path[i][j]; path[i][j] = round(path[i][j]);
path[i][j] = round(x);
} }
} else { } else {
path[i][6] = round(path[i][6]); path[i][6] = round(path[i][6]);
...@@ -829,8 +825,7 @@ window.Raphael = (function () { ...@@ -829,8 +825,7 @@ window.Raphael = (function () {
} }
var p = new Element(el, SVG); var p = new Element(el, SVG);
p.type = "path"; p.type = "path";
p.attrs.path = roundPath(pathToAbsolute(pathString)); pathString && (p.attrs.path = roundPath(pathToAbsolute(pathString))) && p.node.setAttribute("d", p.attrs.path);
pathString && p.node.setAttribute("d", p.attrs.path);
setFillAndStroke(p, {fill: "none", stroke: "#000"}); setFillAndStroke(p, {fill: "none", stroke: "#000"});
return p; return p;
}; };
...@@ -867,10 +862,8 @@ window.Raphael = (function () { ...@@ -867,10 +862,8 @@ window.Raphael = (function () {
o.setAttribute("fill-opacity", 1); o.setAttribute("fill-opacity", 1);
}; };
var updatePosition = function (o) { var updatePosition = function (o) {
if (o.pattern) { var bbox = o.getBBox();
var bbox = o.getBBox(); o.pattern.setAttribute("patternTransform", "translate(".concat(bbox.x, ",", bbox.y, ")"));
o.pattern.setAttribute("patternTransform", "translate(".concat(bbox.x, ",", bbox.y, ")"));
}
}; };
var setFillAndStroke = function (o, params) { var setFillAndStroke = function (o, params) {
var dasharray = { var dasharray = {
...@@ -903,7 +896,7 @@ window.Raphael = (function () { ...@@ -903,7 +896,7 @@ window.Raphael = (function () {
node.setAttribute("stroke-dasharray", value); node.setAttribute("stroke-dasharray", value);
} }
}; };
o.rotate(0, true); parseInt(rot, 10) && o.rotate(0, true);
for (var att in params) { for (var att in params) {
if (!(att in availableAttrs)) { if (!(att in availableAttrs)) {
continue; continue;
...@@ -944,7 +937,7 @@ window.Raphael = (function () { ...@@ -944,7 +937,7 @@ window.Raphael = (function () {
case "rx": case "rx":
case "cx": case "cx":
node.setAttribute(att, value); node.setAttribute(att, value);
updatePosition(o); o.pattern && updatePosition(o);
break; break;
case "height": case "height":
node.setAttribute(att, value); node.setAttribute(att, value);
...@@ -961,7 +954,7 @@ window.Raphael = (function () { ...@@ -961,7 +954,7 @@ window.Raphael = (function () {
case "ry": case "ry":
case "cy": case "cy":
node.setAttribute(att, value); node.setAttribute(att, value);
updatePosition(o); o.pattern && updatePosition(o);
break; break;
case "r": case "r":
if (o.type == "rect") { if (o.type == "rect") {
...@@ -1031,7 +1024,7 @@ window.Raphael = (function () { ...@@ -1031,7 +1024,7 @@ window.Raphael = (function () {
node.style.fill = "url(#" + el.id + ")"; node.style.fill = "url(#" + el.id + ")";
node.setAttribute("fill", "url(#" + el.id + ")"); node.setAttribute("fill", "url(#" + el.id + ")");
o.pattern = el; o.pattern = el;
updatePosition(o); o.pattern && updatePosition(o);
break; break;
} }
delete params.gradient; delete params.gradient;
...@@ -1064,9 +1057,8 @@ window.Raphael = (function () { ...@@ -1064,9 +1057,8 @@ window.Raphael = (function () {
} }
break; break;
} }
case "font-size": default:
value = parseInt(value, 10) + "px"; att == "font-size" && (value = parseInt(value, 10) + "px");
default :
var cssrule = att.replace(/(\-.)/g, function (w) { var cssrule = att.replace(/(\-.)/g, function (w) {
return w.substring(1).toUpperCase(); return w.substring(1).toUpperCase();
}); });
...@@ -1078,7 +1070,7 @@ window.Raphael = (function () { ...@@ -1078,7 +1070,7 @@ window.Raphael = (function () {
} }
tuneText(o, params); tuneText(o, params);
o.rotate(rot, true); parseInt(rot, 10) && o.rotate(rot, true);
}; };
var leading = 1.2; var leading = 1.2;
var tuneText = function (el, params) { var tuneText = function (el, params) {
...@@ -1473,20 +1465,21 @@ window.Raphael = (function () { ...@@ -1473,20 +1465,21 @@ window.Raphael = (function () {
return p; return p;
}; };
var setFillAndStroke = function (o, params) { var setFillAndStroke = function (o, params) {
o.attrs = o.attrs || {};
var node = o.node, var node = o.node,
a = o.attrs,
s = node.style, s = node.style,
xy, xy,
res = o; res = o;
o.attrs = o.attrs || {};
for (var par in params) { for (var par in params) {
o.attrs[par] = params[par]; a[par] = params[par];
} }
params.href && (node.href = params.href); params.href && (node.href = params.href);
params.title && (node.title = params.title); params.title && (node.title = params.title);
params.target && (node.target = params.target); params.target && (node.target = params.target);
if (params.path && o.type == "path") { if (params.path && o.type == "path") {
o.attrs.path = R.parsePathString(params.path); a.path = R.parsePathString(params.path);
o.node.path = path2vml(o.attrs.path); node.path = path2vml(a.path);
} }
if (params.rotation != null) { if (params.rotation != null) {
o.rotate(params.rotation, true); o.rotate(params.rotation, true);
...@@ -1504,24 +1497,36 @@ window.Raphael = (function () { ...@@ -1504,24 +1497,36 @@ window.Raphael = (function () {
} }
if (o.type == "image" && params.opacity) { if (o.type == "image" && params.opacity) {
node.filterOpacity = " progid:DXImageTransform.Microsoft.Alpha(opacity=" + (params.opacity * 100) + ")"; node.filterOpacity = " progid:DXImageTransform.Microsoft.Alpha(opacity=" + (params.opacity * 100) + ")";
node.style.filter = (node.filterMatrix || "") + (node.filterOpacity || ""); s.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"].split(",")[0].replace(/^['"]+|['"]+$/g, "") + '"'); 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"]);
if (typeof params.opacity != "undefined" || typeof params["stroke-width"] != "undefined" || typeof params.fill != "undefined" || typeof params.stroke != "undefined" || params["stroke-width"] || params["stroke-opacity"] || params["fill-opacity"] || params["stroke-dasharray"] || params["stroke-miterlimit"] || params["stroke-linejoin"] || params["stroke-linecap"]) { if (params.opacity != null ||
o = o.shape || node; params["stroke-width"] != null ||
var fill = (o.getElementsByTagName("fill") && o.getElementsByTagName("fill")[0]) || createNode("fill"); params.fill != null ||
params.stroke != null ||
params["stroke-width"] != null ||
params["stroke-opacity"] != null ||
params["fill-opacity"] != null ||
params["stroke-dasharray"] != null ||
params["stroke-miterlimit"] != null ||
params["stroke-linejoin"] != null ||
params["stroke-linecap"] != null) {
node = o.shape || node;
var fill = (node.getElementsByTagName("fill") && node.getElementsByTagName("fill")[0]),
newfill = false;
!fill && (newfill = fill = createNode("fill"));
if ("fill-opacity" in params || "opacity" in params) { if ("fill-opacity" in params || "opacity" in params) {
var opacity = ((+params["fill-opacity"] + 1 || 2) - 1) * ((+params.opacity + 1 || 2) - 1); var opacity = ((+a["fill-opacity"] + 1 || 2) - 1) * ((+a.opacity + 1 || 2) - 1);
opacity < 0 && (opacity = 0); opacity < 0 && (opacity = 0);
opacity > 1 && (opacity = 1); opacity > 1 && (opacity = 1);
fill.opacity = opacity; fill.opacity = opacity;
} }
params.fill && (fill.on = true); params.fill && (fill.on = true);
if (typeof fill.on == "undefined" || params.fill == "none") { if (fill.on == null || params.fill == "none") {
fill.on = false; fill.on = false;
} }
if (fill.on && params.fill) { if (fill.on && params.fill) {
...@@ -1535,18 +1540,22 @@ window.Raphael = (function () { ...@@ -1535,18 +1540,22 @@ window.Raphael = (function () {
fill.type = "solid"; fill.type = "solid";
} }
} }
o.appendChild(fill); newfill && node.appendChild(fill);
var stroke = (o.getElementsByTagName("stroke") && o.getElementsByTagName("stroke")[0]) || createNode("stroke"); var stroke = (node.getElementsByTagName("stroke") && node.getElementsByTagName("stroke")[0]),
if ((params.stroke && params.stroke != "none") || params["stroke-width"] || typeof params["stroke-opacity"] != "undefined" || params["stroke-dasharray"] || params["stroke-miterlimit"] || params["stroke-linejoin"] || params["stroke-linecap"]) { newstroke = false;
!stroke && (newstroke = stroke = createNode("stroke"));
if ((params.stroke && params.stroke != "none") ||
params["stroke-width"] ||
params["stroke-opacity"] != null ||
params["stroke-dasharray"] ||
params["stroke-miterlimit"] ||
params["stroke-linejoin"] ||
params["stroke-linecap"]) {
stroke.on = true; stroke.on = true;
} }
if (params.stroke == "none" || typeof stroke.on == "undefined" || params.stroke == 0) { (params.stroke == "none" || stroke.on == null || params.stroke == 0) && (stroke.on = false);
stroke.on = false; stroke.on && params.stroke && (stroke.color = R.getRGB(params.stroke).hex);
} var opacity = ((+a["stroke-opacity"] + 1 || 2) - 1) * ((+a.opacity + 1 || 2) - 1);
if (stroke.on && params.stroke) {
stroke.color = R.getRGB(params.stroke).hex;
}
var opacity = ((+params["stroke-opacity"] + 1 || 2) - 1) * ((+params.opacity + 1 || 2) - 1);
opacity < 0 && (opacity = 0); opacity < 0 && (opacity = 0);
opacity > 1 && (opacity = 1); opacity > 1 && (opacity = 1);
stroke.opacity = opacity; stroke.opacity = opacity;
...@@ -1569,11 +1578,10 @@ window.Raphael = (function () { ...@@ -1569,11 +1578,10 @@ window.Raphael = (function () {
}; };
stroke.dashstyle = dasharray[params["stroke-dasharray"]] || ""; stroke.dashstyle = dasharray[params["stroke-dasharray"]] || "";
} }
o.appendChild(stroke); newstroke && node.appendChild(stroke);
} }
if (res.type == "text") { if (res.type == "text") {
var s = paper.span.style, var s = paper.span.style;
a = res.attrs;
a.font && (s.font = a.font); a.font && (s.font = a.font);
a["font-family"] && (s.fontFamily = a["font-family"]); a["font-family"] && (s.fontFamily = a["font-family"]);
a["font-size"] && (s.fontSize = a["font-size"]); a["font-size"] && (s.fontSize = a["font-size"]);
...@@ -2211,6 +2219,7 @@ window.Raphael = (function () { ...@@ -2211,6 +2219,7 @@ window.Raphael = (function () {
return theText(this, x, y, text); return theText(this, x, y, text);
}; };
paper.set = function (itemsArray) { paper.set = function (itemsArray) {
arguments.length > 1 && (itemsArray = Array.prototype.splice.call(arguments, 0, arguments.length));
return new Set(itemsArray); return new Set(itemsArray);
}; };
paper.setSize = setSize; paper.setSize = setSize;
...@@ -2554,7 +2563,6 @@ window.Raphael = (function () { ...@@ -2554,7 +2563,6 @@ window.Raphael = (function () {
var Set = function (items) { var Set = function (items) {
this.items = []; this.items = [];
this.length = 0; this.length = 0;
arguments.length > 1 && (items = Array.prototype.splice.call(arguments, 0, arguments.length));
if (items) { if (items) {
for (var i = 0, ii = items.length; i < ii; i++) { for (var i = 0, ii = items.length; i < ii; i++) {
if (items[i] && (items[i].constructor == Element || items[i].constructor == Set)) { if (items[i] && (items[i].constructor == Element || items[i].constructor == Set)) {
......
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