Skip to content

殷洪（管理员） / raphael

Go to a project
Commit a1f2c39a by Dmitry Baranovskiy
Options

Fixed plugins, gradients, r for rects in VML, arcs in scaling and a bit of… 

Fixed plugins, gradients, r for rects in VML, arcs in scaling and a bit of animation. [not final release]
parent e1a5ada5
Showing with 53 additions and 46 deletions
raphael.js
...@@ -136,7 +136,7 @@ window.Raphael = (function () { ...@@ -136,7 +136,7 @@ window.Raphael = (function () {
return {r: -1, g: -1, b: -1, hex: "none"}; return {r: -1, g: -1, b: -1, hex: "none"};
} }
var red, green, blue, var red, green, blue,
rgb = colour.match(/^\s*((#[a-f\d]{6})|(#[a-f\d]{3})|rgb\(\s*([\d\.]+\s*,\s*[\d\.]+\s*,\s*[\d\.]+)\s*\)|rgb\(\s*([\d\.]+%\s*,\s*[\d\.]+%\s*,\s*[\d\.]+%)\s*\)|hsb\(\s*([\d\.]+\s*,\s*[\d\.]+\s*,\s*[\d\.]+)\s*\)|hsb\(\s*([\d\.]+%\s*,\s*[\d\.]+%\s*,\s*[\d\.]+%)\s*\))\s*$/i); rgb = (colour + "").match(/^\s*((#[a-f\d]{6})|(#[a-f\d]{3})|rgb\(\s*([\d\.]+\s*,\s*[\d\.]+\s*,\s*[\d\.]+)\s*\)|rgb\(\s*([\d\.]+%\s*,\s*[\d\.]+%\s*,\s*[\d\.]+%)\s*\)|hsb\(\s*([\d\.]+\s*,\s*[\d\.]+\s*,\s*[\d\.]+)\s*\)|hsb\(\s*([\d\.]+%\s*,\s*[\d\.]+%\s*,\s*[\d\.]+%)\s*\))\s*$/i);
if (rgb) { if (rgb) {
if (rgb[2]) { if (rgb[2]) {
blue = parseInt(rgb[2].substring(5), 16); blue = parseInt(rgb[2].substring(5), 16);
...@@ -213,8 +213,6 @@ window.Raphael = (function () { ...@@ -213,8 +213,6 @@ window.Raphael = (function () {
var pathcache = {}, pathcount = []; var pathcache = {}, pathcount = [];
R.parsePathString = function (pathString) { R.parsePathString = function (pathString) {
if (pathString in pathcache) { if (pathString in pathcache) {
console.log("cache1:" + pathString);
console.log("cache2:" + pathcache[pathString]);
return pathcache[pathString]; return pathcache[pathString];
} }
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},
...@@ -248,7 +246,6 @@ window.Raphael = (function () { ...@@ -248,7 +246,6 @@ window.Raphael = (function () {
delete pathcache[pathcount.unshift()]; delete pathcache[pathcount.unshift()];
} }
pathcount.push(pathString); pathcount.push(pathString);
// console.log("data:" + pathString + ":" + data);
pathcache[pathString] = data; pathcache[pathString] = data;
return data; return data;
}; };
...@@ -588,11 +585,11 @@ window.Raphael = (function () { ...@@ -588,11 +585,11 @@ window.Raphael = (function () {
for (var prop in add) if (add.hasOwnProperty(prop) && !(prop in con)) { for (var prop in add) if (add.hasOwnProperty(prop) && !(prop in con)) {
switch (typeof add[prop]) { switch (typeof add[prop]) {
case "function": case "function":
con[prop] = con === paper ? add[prop] : function () { return add[prop].apply(paper, arguments); }; con[prop] = con === this ? add[prop] : function () { return add[prop].apply(this, arguments); };
break; break;
case "object": case "object":
con[prop] = {}; con[prop] = {};
plugins(con[prop], add[prop]); plugins.call(this, con[prop], add[prop]);
break; break;
default: default:
con[prop] = add[prop]; con[prop] = add[prop];
...@@ -787,7 +784,7 @@ window.Raphael = (function () { ...@@ -787,7 +784,7 @@ window.Raphael = (function () {
paper.pathfinder(p, p.attrs.path); paper.pathfinder(p, p.attrs.path);
} }
if (params) { if (params) {
params.fill = params.fill || "none"; !params.gradient && (params.fill = params.fill || "none");
params.stroke = params.stroke || "#000"; params.stroke = params.stroke || "#000";
} else { } else {
params = {fill: "none", stroke: "#000"}; params = {fill: "none", stroke: "#000"};
...@@ -795,7 +792,7 @@ window.Raphael = (function () { ...@@ -795,7 +792,7 @@ window.Raphael = (function () {
setFillAndStroke(p, params); setFillAndStroke(p, params);
return p; return p;
}; };
var addGrdientFill = function (o, gradient, SVG) { var addGradientFill = function (o, gradient, SVG) {
gradient = toGradient(gradient); gradient = toGradient(gradient);
var el = doc.createElementNS(SVG.svgns, (gradient.type || "linear") + "Gradient"); var el = doc.createElementNS(SVG.svgns, (gradient.type || "linear") + "Gradient");
el.id = "raphael-gradient-" + R.idGenerator++; el.id = "raphael-gradient-" + R.idGenerator++;
...@@ -821,6 +818,7 @@ window.Raphael = (function () { ...@@ -821,6 +818,7 @@ window.Raphael = (function () {
stop.setAttribute("stop-opacity", gradient.dots[ii - 1].opacity); stop.setAttribute("stop-opacity", gradient.dots[ii - 1].opacity);
} }
o.setAttribute("fill", "url(#" + el.id + ")"); o.setAttribute("fill", "url(#" + el.id + ")");
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("opacity", 1);
...@@ -1007,7 +1005,7 @@ window.Raphael = (function () { ...@@ -1007,7 +1005,7 @@ window.Raphael = (function () {
node.setAttribute(att, R.getRGB(value).hex); node.setAttribute(att, R.getRGB(value).hex);
break; break;
case "gradient": case "gradient":
addGrdientFill(node, value, o.svg); addGradientFill(node, value, o.svg);
break; break;
case "opacity": case "opacity":
case "fill-opacity": case "fill-opacity":
...@@ -1331,8 +1329,9 @@ window.Raphael = (function () { ...@@ -1331,8 +1329,9 @@ window.Raphael = (function () {
container[prop] = paper[prop]; container[prop] = paper[prop];
} }
} }
plugins(container, R.fn); plugins.call(container, container, R.fn);
container.clear(); container.clear();
container.raphael = R;
return container; return container;
}; };
paper.remove = function () { paper.remove = function () {
...@@ -1341,9 +1340,9 @@ window.Raphael = (function () { ...@@ -1341,9 +1340,9 @@ window.Raphael = (function () {
paper.svgns = "http://www.w3.org/2000/svg"; paper.svgns = "http://www.w3.org/2000/svg";
paper.xlink = "http://www.w3.org/1999/xlink"; paper.xlink = "http://www.w3.org/1999/xlink";
paper.safari = function () { paper.safari = function () {
if (navigator.vendor == "Apple Computer, Inc.") { if ({"Apple Computer, Inc.": 1, "Google Inc.": 1}[navigator.vendor]) {
var rect = this.rect(-this.width, -this.height, this.width * 3, this.height * 3).attr({stroke: "none"}); var rect = this.rect(-this.width, -this.height, this.width * 3, this.height * 3).attr({stroke: "none"});
setTimeout(function () {rect.remove();}, 0); setTimeout(function () {rect.remove();});
} }
}; };
} }
...@@ -1584,7 +1583,7 @@ window.Raphael = (function () { ...@@ -1584,7 +1583,7 @@ window.Raphael = (function () {
} }
setFillAndStroke(p, params); setFillAndStroke(p, params);
if (params.gradient) { if (params.gradient) {
addGrdientFill(p, params.gradient); addGradientFill(p, params.gradient);
} }
VML.canvas.appendChild(g); VML.canvas.appendChild(g);
return p; return p;
...@@ -1730,7 +1729,7 @@ window.Raphael = (function () { ...@@ -1730,7 +1729,7 @@ window.Raphael = (function () {
} }
return angle; return angle;
}; };
var addGrdientFill = function (o, gradient) { var addGradientFill = function (o, gradient) {
gradient = toGradient(gradient); gradient = toGradient(gradient);
o.attrs = o.attrs || {}; o.attrs = o.attrs || {};
var attrs = o.attrs; var attrs = o.attrs;
...@@ -1752,18 +1751,18 @@ window.Raphael = (function () { ...@@ -1752,18 +1751,18 @@ window.Raphael = (function () {
if (typeof gradient.dots[gradient.dots.length - 1].color != "undefined") { if (typeof gradient.dots[gradient.dots.length - 1].color != "undefined") {
fill.color2 = R.getRGB(gradient.dots[gradient.dots.length - 1].color).hex; fill.color2 = R.getRGB(gradient.dots[gradient.dots.length - 1].color).hex;
} }
var colors = []; var clrs = [];
for (var i = 0, ii = gradient.dots.length; i < ii; i++) { for (var i = 0, ii = gradient.dots.length; i < ii; i++) {
if (gradient.dots[i].offset) { if (gradient.dots[i].offset) {
colors.push(gradient.dots[i].offset + " " + R.getRGB(gradient.dots[i].color).hex); clrs.push(gradient.dots[i].offset + " " + R.getRGB(gradient.dots[i].color).hex);
} }
}; };
var fillOpacity = typeof gradient.dots[gradient.dots.length - 1].opacity == "undefined" ? (typeof attrs.opacity == "undefined" ? 1 : attrs.opacity) : gradient.dots[gradient.dots.length - 1].opacity; var fillOpacity = typeof gradient.dots[gradient.dots.length - 1].opacity == "undefined" ? (typeof attrs.opacity == "undefined" ? 1 : attrs.opacity) : gradient.dots[gradient.dots.length - 1].opacity;
if (colors.length) { if (clrs.length) {
fill.colors.value = colors.join(","); fill.colors.value = clrs.join(",");
fillOpacity = typeof attrs.opacity == "undefined" ? 1 : attrs.opacity; fillOpacity = typeof attrs.opacity == "undefined" ? 1 : attrs.opacity;
} else { } else {
fill.colors.value = "0% " + fill.color; fill.colors && (fill.colors.value = "0% " + fill.color);
} }
fill.opacity = fillOpacity; fill.opacity = fillOpacity;
if (typeof gradient.angle != "undefined") { if (typeof gradient.angle != "undefined") {
...@@ -1907,7 +1906,7 @@ window.Raphael = (function () { ...@@ -1907,7 +1906,7 @@ window.Raphael = (function () {
var arcsize = (+params.r || 0) / (Math.min(w, h)); var arcsize = (+params.r || 0) / (Math.min(w, h));
if (this.type == "rect" && this.arcsize != arcsize && (arcsize || this.arcsize)) { if (this.type == "rect" && this.arcsize != arcsize && (arcsize || this.arcsize)) {
// We should replace element with the new one // We should replace element with the new one
var o = createNode("roundrect"); var o = createNode(arcsize ? "roundrect" : "rect");
o.arcsize = arcsize; o.arcsize = arcsize;
this.Group.appendChild(o); this.Group.appendChild(o);
this.node.parentNode.removeChild(this.node); this.node.parentNode.removeChild(this.node);
...@@ -1966,7 +1965,7 @@ window.Raphael = (function () { ...@@ -1966,7 +1965,7 @@ window.Raphael = (function () {
} }
if (params) { if (params) {
if (params.gradient) { if (params.gradient) {
addGrdientFill(this, params.gradient); addGradientFill(this, params.gradient);
} }
if (params.text && this.type == "text") { if (params.text && this.type == "text") {
this.node.string = params.text; this.node.string = params.text;
...@@ -2017,7 +2016,7 @@ window.Raphael = (function () { ...@@ -2017,7 +2016,7 @@ 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"),
o = createNode("roundrect"), 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;
g.appendChild(o); g.appendChild(o);
...@@ -2110,7 +2109,7 @@ window.Raphael = (function () { ...@@ -2110,7 +2109,7 @@ window.Raphael = (function () {
doc.createStyleSheet().addRule(".rvml", "behavior:url(#default#VML)"); doc.createStyleSheet().addRule(".rvml", "behavior:url(#default#VML)");
try { try {
if (!doc.namespaces.rvml) { if (!doc.namespaces.rvml) {
doc.namespaces.add("rvml","urn:schemas-microsoft-com:vml"); doc.namespaces.add("rvml", "urn:schemas-microsoft-com:vml");
} }
var createNode = function (tagName) { var createNode = function (tagName) {
return doc.createElement('<rvml:' + tagName + ' class="rvml">'); return doc.createElement('<rvml:' + tagName + ' class="rvml">');
...@@ -2183,7 +2182,7 @@ window.Raphael = (function () { ...@@ -2183,7 +2182,7 @@ window.Raphael = (function () {
for (var prop in paper) { for (var prop in paper) {
container[prop] = paper[prop]; container[prop] = paper[prop];
} }
plugins(container, R.fn); plugins.call(container, container, R.fn);
container.clear = function () { container.clear = function () {
var todel = []; var todel = [];
for (var i = 0, ii = r.childNodes.length; i < ii; i++) { for (var i = 0, ii = r.childNodes.length; i < ii; i++) {
...@@ -2195,6 +2194,7 @@ window.Raphael = (function () { ...@@ -2195,6 +2194,7 @@ window.Raphael = (function () {
r.removeChild(todel[i]); r.removeChild(todel[i]);
} }
}; };
container.raphael = R;
return container; return container;
}; };
paper.remove = function () { paper.remove = function () {
...@@ -2400,10 +2400,11 @@ window.Raphael = (function () { ...@@ -2400,10 +2400,11 @@ window.Raphael = (function () {
skip = false; skip = false;
} }
if (this.svg && p[0].toUpperCase() == "A") { if (this.svg && p[0].toUpperCase() == "A") {
p[path[i].length - 2] *= x; p[path[i].length - 2] *= x / this._.sx;
p[path[i].length - 1] *= y; p[path[i].length - 1] *= y / this._.sy;
p[1] *= x; p[1] *= x / this._.sx;
p[2] *= y; p[2] *= y / this._.sy;
p[5] = +(dirx + diry ? !!+p[5] : !+p[5]);
} else { } else {
for (var j = 1, jj = p.length; j < jj; j++) { for (var j = 1, jj = p.length; j < jj; j++) {
p[j] *= (j % 2) ? x / this._.sx : y / this._.sy; p[j] *= (j % 2) ? x / this._.sx : y / this._.sy;
...@@ -2446,9 +2447,10 @@ window.Raphael = (function () { ...@@ -2446,9 +2447,10 @@ window.Raphael = (function () {
s.filter = (this.node.filterMatrix || "") + (this.node.filterOpacity || ""); s.filter = (this.node.filterMatrix || "") + (this.node.filterOpacity || "");
} }
} }
} a.scale = [x, y, cx, cy].join(" ");
this._.sx = x; this._.sx = x;
this._.sy = y; this._.sy = y;
}
return this; return this;
}; };
Element.prototype.animate = function (params, ms, callback) { Element.prototype.animate = function (params, ms, callback) {
...@@ -2460,9 +2462,7 @@ window.Raphael = (function () { ...@@ -2460,9 +2462,7 @@ window.Raphael = (function () {
for (var attr in params) { for (var attr in params) {
if (attr in availableAnimAttrs) { if (attr in availableAnimAttrs) {
from[attr] = this.attr(attr); from[attr] = this.attr(attr);
if (typeof from[attr] == "undefined") { (typeof from[attr] == "undefined") && (from[attr] = availableAttrs[attr]);
from[attr] = availableAttrs[attr];
}
to[attr] = params[attr]; to[attr] = params[attr];
switch (availableAnimAttrs[attr]) { switch (availableAnimAttrs[attr]) {
case "number": case "number":
...@@ -2490,17 +2490,21 @@ window.Raphael = (function () { ...@@ -2490,17 +2490,21 @@ window.Raphael = (function () {
} }
break; break;
case "csv": case "csv":
var values = params[attr].toString().split(separator), var values = (params[attr] + "").split(separator),
from2 = from[attr].toString().split(separator); from2 = (from[attr] + "").split(separator);
if (attr == "translation") { switch (attr) {
case "translation":
from[attr] = [0, 0]; from[attr] = [0, 0];
diff[attr] = [values[0] / ms, values[1] / ms]; diff[attr] = [values[0] / ms, values[1] / ms];
} else if (attr == "rotation") { break;
case "rotation":
from[attr] = (from2[1] == values[1] && from2[2] == values[2]) ? from2 : [0, values[1], values[2]]; from[attr] = (from2[1] == values[1] && from2[2] == values[2]) ? from2 : [0, values[1], values[2]];
diff[attr] = [(values[0] - from[attr][0]) / ms, 0, 0]; diff[attr] = [(values[0] - from[attr][0]) / ms, 0, 0];
} else { break;
case "scale":
params[attr] = values;
from[attr] = (from[attr] + "").split(separator); from[attr] = (from[attr] + "").split(separator);
diff[attr] = [(values[0] - from[attr][0]) / ms, (values[1] - from[attr][0]) / ms]; diff[attr] = [(values[0] - from[attr][0]) / ms, (values[1] - from[attr][1]) / ms, 0, 0];
} }
to[attr] = values; to[attr] = values;
} }
...@@ -2509,8 +2513,8 @@ window.Raphael = (function () { ...@@ -2509,8 +2513,8 @@ window.Raphael = (function () {
var start = +new Date, var start = +new Date,
prev = 0, prev = 0,
that = this; that = this;
(function () { (function tick() {
var time = +new Date - start, var time = new Date - start,
set = {}, set = {},
now; now;
if (time < ms) { if (time < ms) {
...@@ -2538,17 +2542,20 @@ window.Raphael = (function () { ...@@ -2538,17 +2542,20 @@ window.Raphael = (function () {
now = now.join(" "); now = now.join(" ");
break; break;
case "csv": case "csv":
if (attr == "translation") { switch (attr) {
case "translation":
var x = diff[attr][0] * (time - prev), var x = diff[attr][0] * (time - prev),
y = diff[attr][1] * (time - prev); y = diff[attr][1] * (time - prev);
t.x += x; t.x += x;
t.y += y; t.y += y;
now = [x, y].join(" "); now = [x, y].join(" ");
} else if (attr == "rotation") { break;
case "rotation":
now = +from[attr][0] + time * diff[attr][0]; now = +from[attr][0] + time * diff[attr][0];
from[attr][1] && (now += "," + from[attr][1] + "," + from[attr][2]); from[attr][1] && (now += "," + from[attr][1] + "," + from[attr][2]);
} else { break;
now = [+from[attr][0] + time * diff[attr][0], +from[attr][1] + time * diff[attr][1]].join(" "); case "scale":
now = [+from[attr][0] + time * diff[attr][0], +from[attr][1] + time * diff[attr][1], (2 in params[attr] ? params[attr][2] : ""), (3 in params[attr] ? params[attr][3] : "")].join(" ");
} }
break; break;
} }
...@@ -2559,7 +2566,7 @@ window.Raphael = (function () { ...@@ -2559,7 +2566,7 @@ window.Raphael = (function () {
} }
} }
that.attr(set); that.attr(set);
that.animation_in_progress = setTimeout(arguments.callee, 0); that.animation_in_progress = setTimeout(tick);
paper.safari(); paper.safari();
} else { } else {
(t.x || t.y) && that.translate(-t.x, -t.y); (t.x || t.y) && that.translate(-t.x, -t.y);
...@@ -2726,7 +2733,7 @@ window.Raphael = (function () { ...@@ -2726,7 +2733,7 @@ window.Raphael = (function () {
R.ninja = function () { R.ninja = function () {
var r = window.Raphael; var r = window.Raphael;
delete window.Raphael; // delete window.Raphael;
if (oldRaphael.was) { if (oldRaphael.was) {
window.Raphael = oldRaphael.is; window.Raphael = oldRaphael.is;
} }
......
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