Skip to content

殷洪（管理员） / raphael

Go to a project
Commit 737137c3 by Dmitry Baranovskiy
Options

Fixed bug for HSL/HSB 

Added new method Raphael.color()
Fixed rotation in VML
parent 9962a268
Showing with 160 additions and 60 deletions
raphael.js
/* // ┌─────────────────────────────────────────────────────────────────────┐ \\
* Raphaël 2.0.0 - JavaScript Vector Library // │ Raphaël 2 - JavaScript Vector Library │ \\
* // ├─────────────────────────────────────────────────────────────────────┤ \\
* Copyright (c) 2011 Dmitry Baranovskiy (http://raphaeljs.com) // │ Copyright (c) 2008-2011 Dmitry Baranovskiy (http://raphaeljs.com) │ \\
* Copyright (c) 2011 Sencha Labs (http://sencha.com) // │ Copyright (c) 2008-2011 Sencha Labs (http://sencha.com) │ \\
* Licensed under the MIT (http://raphaeljs.com/license.html) license. // │ Licensed under the MIT (http://raphaeljs.com/license.html) license. │ \\
*/ // └─────────────────────────────────────────────────────────────────────┘ \\
(function () { (function () {
/*\ /*\
* Raphael * Raphael
...@@ -144,9 +144,9 @@ ...@@ -144,9 +144,9 @@
commaSpaces = /\s*,\s*/, commaSpaces = /\s*,\s*/,
hsrg = {hs: 1, rg: 1}, hsrg = {hs: 1, rg: 1},
p2s = /,?([achlmqrstvxz]),?/gi, p2s = /,?([achlmqrstvxz]),?/gi,
pathCommand = /([achlmqstvz])[\s,]*((-?\d*\.?\d*(?:e[-+]?\d+)?\s*,?\s*)+)/ig, pathCommand = /([achlmqstvz])[\s,]*((-?\d*\.?\d*(?:e[\-+]?\d+)?\s*,?\s*)+)/ig,
tCommand = /([rstm])[\s,]*((-?\d*\.?\d*(?:e[-+]?\d+)?\s*,?\s*)+)/ig, tCommand = /([rstm])[\s,]*((-?\d*\.?\d*(?:e[\-+]?\d+)?\s*,?\s*)+)/ig,
pathValues = /(-?\d*\.?\d*(?:e[-+]?\d+)?)\s*,?\s*/ig, pathValues = /(-?\d*\.?\d*(?:e[\-+]?\d+)?)\s*,?\s*/ig,
radial_gradient = /^r(?:\(([^,]+?)\s*,\s*([^\)]+?)\))?/, radial_gradient = /^r(?:\(([^,]+?)\s*,\s*([^\)]+?)\))?/,
sortByKey = function (a, b) { sortByKey = function (a, b) {
return a.key - b.key; return a.key - b.key;
...@@ -227,7 +227,7 @@ ...@@ -227,7 +227,7 @@
b = d.firstChild; b = d.firstChild;
b.style.behavior = "url(#default#VML)"; b.style.behavior = "url(#default#VML)";
if (!(b && typeof b.adj == "object")) { if (!(b && typeof b.adj == "object")) {
return R.type = E; return (R.type = E);
} }
d = null; d = null;
} }
...@@ -508,6 +508,60 @@ ...@@ -508,6 +508,60 @@
R.is(o, "finite") && (rgb.opacity = o); R.is(o, "finite") && (rgb.opacity = o);
return rgb; return rgb;
}; };
/*\
* Raphael.color
[ method ]
**
* Parses the color string and returns object with all values for the given color.
> Parameters
- clr (string) color string in one of the supported formasts (see @Raphael.getRGB)
= (object) Combined RGB & HSB object in format:
o {
o r (number) red,
o g (number) green,
o b (number) blue,
o hex (string) color in HTML/CSS format: #••••••,
o error (boolean) `true` if string can’t be parsed,
o h (number) hue,
o s (number) saturation,
o v (number) value (brightness),
o l (number) lightness
o }
\*/
R.color = function (clr) {
var rgb;
if (R.is(clr, "object") && "h" in clr && "s" in clr && "b" in clr) {
rgb = R.hsb2rgb(clr);
clr.r = rgb.r;
clr.g = rgb.g;
clr.b = rgb.b;
clr.hex = rgb.hex;
} else if (R.is(clr, "object") && "h" in clr && "s" in clr && "l" in clr) {
rgb = R.hsl2rgb(clr);
clr.r = rgb.r;
clr.g = rgb.g;
clr.b = rgb.b;
clr.hex = rgb.hex;
} else {
if (R.is(clr, "string")) {
clr = R.getRGB(clr);
}
if (R.is(clr, "object") && "r" in clr && "g" in clr && "b" in clr) {
rgb = R.rgb2hsl(clr);
clr.h = rgb.h;
clr.s = rgb.s;
clr.l = rgb.l;
rgb = R.rgb2hsb(clr);
clr.v = rgb.b;
} else {
clr = {hex: "none"};
crl.r = clr.g = clr.b = clr.h = clr.s = clr.v = clr.l = -1;
}
}
clr.toString = rgbtoString;
return clr;
};
/*\ /*\
* Raphael.hsb2rgb * Raphael.hsb2rgb
[ method ] [ method ]
...@@ -614,8 +668,9 @@ ...@@ -614,8 +668,9 @@
H = (C == 0 ? null : H = (C == 0 ? null :
V == r ? (g - b) / C : V == r ? (g - b) / C :
V == g ? (b - r) / C + 2 : V == g ? (b - r) / C + 2 :
(r - g) / C + 4); (r - g) / C + 4
H = (H % 6) * 60; );
H = ((H + 360) % 6) * 60 / 360;
S = C == 0 ? 0 : C / V; S = C == 0 ? 0 : C / V;
return {h: H, s: S, b: V, toString: hsbtoString}; return {h: H, s: S, b: V, toString: hsbtoString};
}; };
...@@ -649,7 +704,7 @@ ...@@ -649,7 +704,7 @@
M == r ? (g - b) / C : M == r ? (g - b) / C :
M == g ? (b - r) / C + 2 : M == g ? (b - r) / C + 2 :
(r - g) / C + 4); (r - g) / C + 4);
H = (H % 6) * 60; H = ((H + 360) % 6) * 60 / 360;
L = (M + m) / 2; L = (M + m) / 2;
S = (C == 0 ? 0 : S = (C == 0 ? 0 :
L < .5 ? C / (2 * L) : L < .5 ? C / (2 * L) :
...@@ -696,6 +751,10 @@ ...@@ -696,6 +751,10 @@
g.doc.body.appendChild(img); g.doc.body.appendChild(img);
img.src = src; img.src = src;
} }
function clrToString() {
return this.hex;
}
/*\ /*\
* Raphael.getRGB * Raphael.getRGB
...@@ -726,10 +785,10 @@ ...@@ -726,10 +785,10 @@
\*/ \*/
R.getRGB = cacher(function (colour) { R.getRGB = cacher(function (colour) {
if (!colour || !!((colour = Str(colour)).indexOf("-") + 1)) { if (!colour || !!((colour = Str(colour)).indexOf("-") + 1)) {
return {r: -1, g: -1, b: -1, hex: "none", error: 1}; return {r: -1, g: -1, b: -1, hex: "none", error: 1, toString: clrToString};
} }
if (colour == "none") { if (colour == "none") {
return {r: -1, g: -1, b: -1, hex: "none"}; return {r: -1, g: -1, b: -1, hex: "none", toString: clrToString};
} }
!(hsrg[has](colour.toLowerCase().substring(0, 2)) || colour.charAt() == "#") && (colour = toHex(colour)); !(hsrg[has](colour.toLowerCase().substring(0, 2)) || colour.charAt() == "#") && (colour = toHex(colour));
var res, var res,
...@@ -788,12 +847,12 @@ ...@@ -788,12 +847,12 @@
values[3] && values[3].slice(-1) == "%" && (opacity /= 100); values[3] && values[3].slice(-1) == "%" && (opacity /= 100);
return R.hsl2rgb(red, green, blue, opacity); return R.hsl2rgb(red, green, blue, opacity);
} }
rgb = {r: red, g: green, b: blue}; rgb = {r: red, g: green, b: blue, toString: clrToString};
rgb.hex = "#" + (16777216 | blue | (green << 8) | (red << 16)).toString(16).slice(1); rgb.hex = "#" + (16777216 | blue | (green << 8) | (red << 16)).toString(16).slice(1);
R.is(opacity, "finite") && (rgb.opacity = opacity); R.is(opacity, "finite") && (rgb.opacity = opacity);
return rgb; return rgb;
} }
return {r: -1, g: -1, b: -1, hex: "none", error: 1}; return {r: -1, g: -1, b: -1, hex: "none", error: 1, toString: clrToString};
}, R); }, R);
/*\ /*\
* Raphael.hsb * Raphael.hsb
...@@ -1132,6 +1191,9 @@ ...@@ -1132,6 +1191,9 @@
if (!R.is(pathArray, array) || !R.is(pathArray && pathArray[0], array)) { // rough assumption if (!R.is(pathArray, array) || !R.is(pathArray && pathArray[0], array)) { // rough assumption
pathArray = R.parsePathString(pathArray); pathArray = R.parsePathString(pathArray);
} }
if (!pathArray || !pathArray.length) {
return [["M", 0, 0]];
}
var res = [], var res = [],
x = 0, x = 0,
y = 0, y = 0,
...@@ -1831,7 +1893,6 @@ ...@@ -1831,7 +1893,6 @@
// translation // translation
out.dx = this.e; out.dx = this.e;
out.dy = this.f; out.dy = this.f;
this.e = this.f = 0;
// scale and shear // scale and shear
var row = [[this.a, this.c], [this.b, this.d]]; var row = [[this.a, this.c], [this.b, this.d]];
...@@ -1846,9 +1907,19 @@ ...@@ -1846,9 +1907,19 @@
out.shear /= out.scaley; out.shear /= out.scaley;
// rotation // rotation
out.rotate = R.deg(math.asin(-row[0][1])); var sin = -row[0][1],
cos = row[1][1];
if (cos < 0) {
out.rotate = R.deg(math.acos(cos));
if (sin < 0) {
out.rotate = 360 - out.rotate;
}
} else {
out.rotate = R.deg(math.asin(sin));
}
out.isSimple = !+out.shear.toFixed(9) && (out.scalex.toFixed(9) == out.scaley.toFixed(9) || !out.rotate); out.isSimple = !+out.shear.toFixed(9) && (out.scalex.toFixed(9) == out.scaley.toFixed(9) || !out.rotate);
out.isSuperSimple = !+out.shear.toFixed(9) && out.scalex.toFixed(9) == out.scaley.toFixed(9) && !out.rotate;
return out; return out;
}; };
...@@ -1963,6 +2034,7 @@ ...@@ -1963,6 +2034,7 @@
delete element.gradient; delete element.gradient;
} }
id = id.replace(/[\(\)\s,\xb0#]/g, "-");
el = $(type + "Gradient", {id: id}); el = $(type + "Gradient", {id: id});
element.gradient = el; element.gradient = el;
$(el, type == "radial" ? { $(el, type == "radial" ? {
...@@ -2423,7 +2495,7 @@ ...@@ -2423,7 +2495,7 @@
var texts = Str(params.text).split("\n"), var texts = Str(params.text).split("\n"),
tspans = [], tspans = [],
tspan; tspan;
for (var i = 0, ii = texts.length; i < ii; i++) if (texts[i]) { for (var i = 0, ii = texts.length; i < ii; i++) {
tspan = $("tspan"); tspan = $("tspan");
i && $(tspan, {dy: fontSize * leading, x: a.x}); i && $(tspan, {dy: fontSize * leading, x: a.x});
tspan.appendChild(g.doc.createTextNode(texts[i])); tspan.appendChild(g.doc.createTextNode(texts[i]));
...@@ -2812,8 +2884,8 @@ ...@@ -2812,8 +2884,8 @@
} }
if (name == null) { if (name == null) {
var res = {}; var res = {};
for (var i in this.attrs) if (this.attrs[has](i)) { for (var a in this.attrs) if (this.attrs[has](a)) {
res[i] = this.attrs[i]; res[a] = this.attrs[a];
} }
res.gradient && res.fill == "none" && (res.fill = res.gradient) && delete res.gradient; res.gradient && res.fill == "none" && (res.fill = res.gradient) && delete res.gradient;
res.transform = this._.transform; res.transform = this._.transform;
...@@ -2826,20 +2898,26 @@ ...@@ -2826,20 +2898,26 @@
if (name == "transform") { if (name == "transform") {
return this._.transform; return this._.transform;
} }
if (name in this.attrs) { var names = name.split(separator),
return this.attrs[name]; out = {};
} else if (R.is(this.paper.customAttributes[name], "function")) { for (var i = 0, ii = names.length; i < ii; i++) {
return this.paper.customAttributes[name].def; name = names[i];
} else { if (name in this.attrs) {
return availableAttrs[name]; out[name] = this.attrs[name];
} else if (R.is(this.paper.customAttributes[name], "function")) {
out[name] = this.paper.customAttributes[name].def;
} else {
out[name] = availableAttrs[name];
}
} }
return ii - 1 ? out : out[names[0]];
} }
if (value == null && R.is(name, array)) { if (value == null && R.is(name, array)) {
var values = {}; out = {};
for (var j = 0, jj = name.length; j < jj; j++) { for (i = 0, ii = name.length; i < ii; i++) {
values[name[j]] = this.attr(name[j]); out[name[i]] = this.attr(name[i]);
} }
return values; return out;
} }
if (value != null) { if (value != null) {
var params = {}; var params = {};
...@@ -3497,6 +3575,8 @@ ...@@ -3497,6 +3575,8 @@
addGradientFill = function (o, gradient, fill) { addGradientFill = function (o, gradient, fill) {
o.attrs = o.attrs || {}; o.attrs = o.attrs || {};
var attrs = o.attrs, var attrs = o.attrs,
opacity,
oindex,
type = "linear", type = "linear",
fxfy = ".5 .5"; fxfy = ".5 .5";
o.attrs.gradient = gradient; o.attrs.gradient = gradient;
...@@ -3533,7 +3613,7 @@ ...@@ -3533,7 +3613,7 @@
for (var i = 0, ii = dots.length; i < ii; i++) { for (var i = 0, ii = dots.length; i < ii; i++) {
dots[i].offset && clrs.push(dots[i].offset + S + dots[i].color); dots[i].offset && clrs.push(dots[i].offset + S + dots[i].color);
} }
fill.colors && (fill.colors.value = clrs.length ? clrs.join() : "0% " + fill.color); fill.colors = clrs.length ? clrs.join() : "0% " + fill.color;
if (type == "radial") { if (type == "radial") {
fill.type = "gradientTitle"; fill.type = "gradientTitle";
fill.focus = "100%"; fill.focus = "100%";
...@@ -3546,7 +3626,6 @@ ...@@ -3546,7 +3626,6 @@
fill.angle = (270 - angle) % 360; fill.angle = (270 - angle) % 360;
} }
o.appendChild(fill); o.appendChild(fill);
// alert(fill.outerHTML);
} }
return 1; return 1;
}; };
...@@ -3585,17 +3664,19 @@ ...@@ -3585,17 +3664,19 @@
var matrix = this.matrix.clone(), var matrix = this.matrix.clone(),
vbs = this.paper._viewBoxShift, vbs = this.paper._viewBoxShift,
skew = this.skew, skew = this.skew,
o = this.node; o = this.node,
split,
isGrad = Str(this.attrs.fill).indexOf("-") + 1;
matrix.translate(-.5, -.5); matrix.translate(-.5, -.5);
if (vbs) { if (vbs) {
matrix.scale(vbs.scale, vbs.scale, -1, -1); matrix.scale(vbs.scale, vbs.scale, -1, -1);
matrix.translate(vbs.dx, vbs.dy); matrix.translate(vbs.dx, vbs.dy);
} }
if (Str(this.attrs.fill).indexOf("-") + 1 || this.type == "image") { if (isGrad || this.type == "image") {
skew.matrix = "1 0 0 1"; skew.matrix = "1 0 0 1";
skew.offset = "0 0"; skew.offset = "0 0";
var split = matrix.split(); // just translation?
if (!split.isSimple) { if (isGrad || !(split = matrix.split()).isSimple) {
o.style.filter = matrix.toFilter(); o.style.filter = matrix.toFilter();
var bb = this.getBBox(), var bb = this.getBBox(),
bbt = this.getBBox(1), bbt = this.getBBox(1),
...@@ -3605,7 +3686,6 @@ ...@@ -3605,7 +3686,6 @@
setCoords(this, 1, 1, dx, dy, 0); setCoords(this, 1, 1, dx, dy, 0);
} else { } else {
o.style.filter = E; o.style.filter = E;
alert("clean");
setCoords(this, split.scalex, split.scaley, split.dx, split.dy, split.rotate); setCoords(this, split.scalex, split.scaley, split.dx, split.dy, split.rotate);
} }
} else { } else {
...@@ -3722,8 +3802,8 @@ ...@@ -3722,8 +3802,8 @@
} }
if (name == null) { if (name == null) {
var res = {}; var res = {};
for (var i in this.attrs) if (this.attrs[has](i)) { for (var a in this.attrs) if (this.attrs[has](a)) {
res[i] = this.attrs[i]; res[a] = this.attrs[a];
} }
res.gradient && res.fill == "none" && (res.fill = res.gradient) && delete res.gradient; res.gradient && res.fill == "none" && (res.fill = res.gradient) && delete res.gradient;
res.transform = this._.transform; res.transform = this._.transform;
...@@ -3733,20 +3813,26 @@ ...@@ -3733,20 +3813,26 @@
if (name == fillString && this.attrs.fill == "none" && this.attrs.gradient) { if (name == fillString && this.attrs.fill == "none" && this.attrs.gradient) {
return this.attrs.gradient; return this.attrs.gradient;
} }
if (name in this.attrs) { var names = name.split(separator),
return this.attrs[name]; out = {};
} else if (R.is(this.paper.customAttributes[name], "function")) { for (var i = 0, ii = names.length; i < ii; i++) {
return this.paper.customAttributes[name].def; name = names[i];
} else { if (name in this.attrs) {
return availableAttrs[name]; out[name] = this.attrs[name];
} else if (R.is(this.paper.customAttributes[name], "function")) {
out[name] = this.paper.customAttributes[name].def;
} else {
out[name] = availableAttrs[name];
}
} }
return ii - 1 ? out : out[names[0]];
} }
if (this.attrs && value == null && R.is(name, array)) { if (this.attrs && value == null && R.is(name, array)) {
var ii, values = {}; out = {};
for (i = 0, ii = name.length; i < ii; i++) { for (i = 0, ii = name.length; i < ii; i++) {
values[name[i]] = this.attr(name[i]); out[name[i]] = this.attr(name[i]);
} }
return values; return out;
} }
var params; var params;
if (value != null) { if (value != null) {
...@@ -3776,7 +3862,7 @@ ...@@ -3776,7 +3862,7 @@
}; };
elproto.toFront = function () { elproto.toFront = function () {
!this.removed && this.node.parentNode.appendChild(this.node); !this.removed && this.node.parentNode.appendChild(this.node);
this.paper.top != this && tofront(this, this.paper); this.paper && this.paper.top != this && tofront(this, this.paper);
return this; return this;
}; };
elproto.toBack = function () { elproto.toBack = function () {
...@@ -4107,8 +4193,12 @@ ...@@ -4107,8 +4193,12 @@
addEvent = (function () { addEvent = (function () {
if (g.doc.addEventListener) { if (g.doc.addEventListener) {
return function (obj, type, fn, element) { return function (obj, type, fn, element) {
var realName = supportsTouch && touchMap[type] ? touchMap[type] : type; var realName = supportsTouch && touchMap[type] ? touchMap[type] : type,
var f = function (e) { f = function (e) {
var scrollY = g.doc.documentElement.scrollTop || g.doc.body.scrollTop,
scrollX = g.doc.documentElement.scrollLeft || g.doc.body.scrollLeft,
x = e.clientX + scrollX,
y = e.clientY + scrollY;
if (supportsTouch && touchMap[has](type)) { if (supportsTouch && touchMap[has](type)) {
for (var i = 0, ii = e.targetTouches && e.targetTouches.length; i < ii; i++) { for (var i = 0, ii = e.targetTouches && e.targetTouches.length; i < ii; i++) {
if (e.targetTouches[i].target == obj) { if (e.targetTouches[i].target == obj) {
...@@ -4121,7 +4211,7 @@ ...@@ -4121,7 +4211,7 @@
} }
} }
} }
return fn.call(element, e); return fn.call(element, e, x, y);
}; };
obj.addEventListener(realName, f, false); obj.addEventListener(realName, f, false);
return function () { return function () {
...@@ -4133,9 +4223,13 @@ ...@@ -4133,9 +4223,13 @@
return function (obj, type, fn, element) { return function (obj, type, fn, element) {
var f = function (e) { var f = function (e) {
e = e || g.win.event; e = e || g.win.event;
var scrollY = g.doc.documentElement.scrollTop || g.doc.body.scrollTop,
scrollX = g.doc.documentElement.scrollLeft || g.doc.body.scrollLeft,
x = e.clientX + scrollX,
y = e.clientY + scrollY;
e.preventDefault = e.preventDefault || preventDefault; e.preventDefault = e.preventDefault || preventDefault;
e.stopPropagation = e.stopPropagation || stopPropagation; e.stopPropagation = e.stopPropagation || stopPropagation;
return fn.call(element, e); return fn.call(element, e, x, y);
}; };
obj.attachEvent("on" + type, f); obj.attachEvent("on" + type, f);
var detacher = function () { var detacher = function () {
...@@ -4465,7 +4559,7 @@ ...@@ -4465,7 +4559,7 @@
| st.attr({fill: "red"}); | st.attr({fill: "red"});
\*/ \*/
paperproto.set = function (itemsArray) { paperproto.set = function (itemsArray) {
arguments.length > 1 && (itemsArray = Array.prototype.splice.call(arguments, 0, arguments.length)); !R.is(itemsArray, "array") && (itemsArray = Array.prototype.splice.call(arguments, 0, arguments.length));
return new Set(itemsArray); return new Set(itemsArray);
}; };
/*\ /*\
...@@ -5105,6 +5199,7 @@ ...@@ -5105,6 +5199,7 @@
} else { } else {
(function(f, el, a) { (function(f, el, a) {
setTimeout(function() { setTimeout(function() {
eve("anim.frame." + el.id, el, a);
eve("anim.finish." + el.id, el, a); eve("anim.finish." + el.id, el, a);
R.is(f, "function") && f.call(el); R.is(f, "function") && f.call(el);
}); });
...@@ -5748,6 +5843,11 @@ ...@@ -5748,6 +5843,11 @@
} }
return this; return this;
}; };
setproto.clear = function () {
while (this.length) {
this.pop();
}
};
setproto.animate = function (params, ms, easing, callback) { setproto.animate = function (params, ms, easing, callback) {
(R.is(easing, "function") || !easing) && (callback = easing || null); (R.is(easing, "function") || !easing) && (callback = easing || null);
var len = this.items.length, var len = this.items.length,
...@@ -5755,6 +5855,9 @@ ...@@ -5755,6 +5855,9 @@
item, item,
set = this, set = this,
collector; collector;
if (!len) {
return this;
}
callback && (collector = function () { callback && (collector = function () {
!--len && callback.call(set); !--len && callback.call(set);
}); });
...@@ -6213,6 +6316,4 @@ ...@@ -6213,6 +6316,4 @@
eve.on("DOMload", function () { eve.on("DOMload", function () {
loaded = true; loaded = true;
}); });
})(); })();
\ No newline at end of file
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