Skip to content

殷洪（管理员） / raphael

Go to a project
Commit e0339293 by Dmitry Baranovskiy
Options

Added absolute transformation syntax support.

parent b46e2746
Showing with 90 additions and 36 deletions
raphael-min.js
This source diff could not be displayed because it is too large. You can view the blob instead.
raphael.core.js
...@@ -1094,7 +1094,7 @@ ...@@ -1094,7 +1094,7 @@
c.replace(pathValues, function (a, b) { c.replace(pathValues, function (a, b) {
b && params.push(+b); b && params.push(+b);
}); });
data.push([name][concat](params)); data.push([b][concat](params));
}); });
} }
data.toString = R._path2string; data.toString = R._path2string;
...@@ -1736,17 +1736,33 @@ ...@@ -1736,17 +1736,33 @@
for (var i = 0, ii = tdata.length; i < ii; i++) { for (var i = 0, ii = tdata.length; i < ii; i++) {
var t = tdata[i], var t = tdata[i],
tlen = t.length, tlen = t.length,
absolute = t[0] != (t[0] = Str(t[0]).toLowerCase()),
inver = absolute ? m.invert() : 0,
x1 = inver && inver.x(0, 0),
y1 = inver && inver.y(0, 0),
x2, y2,
bb; bb;
t[0] = Str(t[0]).toLowerCase();
if (t[0] == "t" && tlen == 3) { if (t[0] == "t" && tlen == 3) {
m.translate(t[1], t[2]); if (absolute) {
x2 = inver.x(t[1], t[2]);
y2 = inver.y(t[1], t[2]);
m.translate(x2 - x1, y2 - y1);
} else {
m.translate(t[1], t[2]);
}
} else if (t[0] == "r") { } else if (t[0] == "r") {
if (tlen == 2) { if (tlen == 2) {
bb = bb || el.getBBox(1); bb = bb || el.getBBox(1);
m.rotate(t[1], bb.x + bb.width / 2, bb.y + bb.height / 2); m.rotate(t[1], bb.x + bb.width / 2, bb.y + bb.height / 2);
deg += t[1]; deg += t[1];
} else if (tlen == 4) { } else if (tlen == 4) {
m.rotate(t[1], t[2], t[3]); if (absolute) {
x2 = inver.x(t[2], t[3]);
y2 = inver.y(t[2], t[3]);
m.rotate(t[1], x2 - x1, y2 - y1);
} else {
m.rotate(t[1], t[2], t[3]);
}
deg += t[1]; deg += t[1];
} }
} else if (t[0] == "s") { } else if (t[0] == "s") {
...@@ -1756,7 +1772,13 @@ ...@@ -1756,7 +1772,13 @@
sx *= t[1]; sx *= t[1];
sy *= t[tlen - 1]; sy *= t[tlen - 1];
} else if (tlen == 5) { } else if (tlen == 5) {
m.scale(t[1], t[2], t[3], t[4]); if (absolute) {
x2 = inver.x(t[3], t[4]);
y2 = inver.y(t[3], t[4]);
m.scale(t[1], t[2], x2 - x1, y2 - y1);
} else {
m.scale(t[1], t[2], t[3], t[4]);
}
sx *= t[1]; sx *= t[1];
sy *= t[2]; sy *= t[2];
} }
...@@ -1784,20 +1806,21 @@ ...@@ -1784,20 +1806,21 @@
} }
}, },
getEmpty = function (item) { getEmpty = function (item) {
switch (item[0]) { var l = item[0];
case "t": return ["t", 0, 0]; switch (l.toLowerCase()) {
case "m": return ["m", 1, 0, 0, 1, 0, 0]; case "t": return [l, 0, 0];
case "m": return [l, 1, 0, 0, 1, 0, 0];
case "r": if (item.length == 4) { case "r": if (item.length == 4) {
return ["r", 0, item[2], item[3]]; return [l, 0, item[2], item[3]];
} else { } else {
return ["r", 0]; return [l, 0];
} }
case "s": if (item.length == 5) { case "s": if (item.length == 5) {
return ["s", 1, 1, item[3], item[4]]; return [l, 1, 1, item[3], item[4]];
} else if (item.length == 3) { } else if (item.length == 3) {
return ["s", 1, 1]; return [l, 1, 1];
} else { } else {
return ["s", 1]; return [l, 1];
} }
} }
}, },
...@@ -1814,8 +1837,8 @@ ...@@ -1814,8 +1837,8 @@
tt1 = t1[i] || getEmpty(t2[i]); tt1 = t1[i] || getEmpty(t2[i]);
tt2 = t2[i] || getEmpty(tt1); tt2 = t2[i] || getEmpty(tt1);
if ((tt1[0] != tt2[0]) || if ((tt1[0] != tt2[0]) ||
(tt1[0] == "r" && (tt1[2] != tt2[2] || tt1[3] != tt2[3])) || (tt1[0].toLowerCase() == "r" && (tt1[2] != tt2[2] || tt1[3] != tt2[3])) ||
(tt1[0] == "s" && (tt1[3] != tt2[3] || tt1[4] != tt2[4])) (tt1[0].toLowerCase() == "s" && (tt1[3] != tt2[3] || tt1[4] != tt2[4]))
) { ) {
return; return;
} }
...@@ -2139,8 +2162,8 @@ ...@@ -2139,8 +2162,8 @@
* Return transform string that represents given matrix * Return transform string that represents given matrix
= (string) transform string = (string) transform string
\*/ \*/
matrixproto.toTransformString = function () { matrixproto.toTransformString = function (shorter) {
var s = this.split(); var s = shorter || this.split();
if (s.isSimple) { if (s.isSimple) {
return "t" + [s.dx, s.dy] + "s" + [s.scalex, s.scaley, 0, 0] + "r" + [s.rotate, 0, 0]; return "t" + [s.dx, s.dy] + "s" + [s.scalex, s.scaley, 0, 0] + "r" + [s.rotate, 0, 0];
} else { } else {
......
raphael.js
...@@ -7,14 +7,14 @@ ...@@ -7,14 +7,14 @@
// └─────────────────────────────────────────────────────────────────────┘ \\ // └─────────────────────────────────────────────────────────────────────┘ \\
// ┌──────────────────────────────────────────────────────────────────────────────────────┐ \\ // ┌──────────────────────────────────────────────────────────────────────────────────────┐ \\
// │ Eve 0.3.1 - JavaScript Events Library │ \\ // │ Eve 0.3.2 - JavaScript Events Library │ \\
// ├──────────────────────────────────────────────────────────────────────────────────────┤ \\ // ├──────────────────────────────────────────────────────────────────────────────────────┤ \\
// │ Copyright (c) 2008-2011 Dmitry Baranovskiy (http://dmitry.baranovskiy.com/) │ \\ // │ Copyright (c) 2008-2011 Dmitry Baranovskiy (http://dmitry.baranovskiy.com/) │ \\
// │ Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license. │ \\ // │ Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license. │ \\
// └──────────────────────────────────────────────────────────────────────────────────────┘ \\ // └──────────────────────────────────────────────────────────────────────────────────────┘ \\
(function (glob) { (function (glob) {
var version = "0.3.1", var version = "0.3.2",
has = "hasOwnProperty", has = "hasOwnProperty",
separator = /[\.\/]/, separator = /[\.\/]/,
wildcard = "*", wildcard = "*",
...@@ -28,6 +28,7 @@ ...@@ -28,6 +28,7 @@
eve = function (name, scope) { eve = function (name, scope) {
var e = events, var e = events,
oldstop = stop,
args = Array.prototype.slice.call(arguments, 2), args = Array.prototype.slice.call(arguments, 2),
listeners = eve.listeners(name), listeners = eve.listeners(name),
z = 0, z = 0,
...@@ -50,6 +51,7 @@ ...@@ -50,6 +51,7 @@
l = queue[indexed[z++]]; l = queue[indexed[z++]];
out.push(l.apply(scope, args)); out.push(l.apply(scope, args));
if (stop) { if (stop) {
stop = oldstop;
return out; return out;
} }
} }
...@@ -59,6 +61,7 @@ ...@@ -59,6 +61,7 @@
if (l.zIndex == indexed[z]) { if (l.zIndex == indexed[z]) {
out.push(l.apply(scope, args)); out.push(l.apply(scope, args));
if (stop) { if (stop) {
stop = oldstop;
return out; return out;
} }
do { do {
...@@ -66,6 +69,7 @@ ...@@ -66,6 +69,7 @@
l = queue[indexed[z]]; l = queue[indexed[z]];
l && out.push(l.apply(scope, args)); l && out.push(l.apply(scope, args));
if (stop) { if (stop) {
stop = oldstop;
return out; return out;
} }
} while (l) } while (l)
...@@ -75,10 +79,12 @@ ...@@ -75,10 +79,12 @@
} else { } else {
out.push(l.apply(scope, args)); out.push(l.apply(scope, args));
if (stop) { if (stop) {
stop = oldstop;
return out; return out;
} }
} }
} }
stop = oldstop;
return out.length ? out : null; return out.length ? out : null;
}; };
...@@ -958,7 +964,7 @@ ...@@ -958,7 +964,7 @@
c.replace(pathValues, function (a, b) { c.replace(pathValues, function (a, b) {
b && params.push(+b); b && params.push(+b);
}); });
data.push([name][concat](params)); data.push([b][concat](params));
}); });
} }
data.toString = R._path2string; data.toString = R._path2string;
...@@ -1561,17 +1567,33 @@ ...@@ -1561,17 +1567,33 @@
for (var i = 0, ii = tdata.length; i < ii; i++) { for (var i = 0, ii = tdata.length; i < ii; i++) {
var t = tdata[i], var t = tdata[i],
tlen = t.length, tlen = t.length,
absolute = t[0] != (t[0] = Str(t[0]).toLowerCase()),
inver = absolute ? m.invert() : 0,
x1 = inver && inver.x(0, 0),
y1 = inver && inver.y(0, 0),
x2, y2,
bb; bb;
t[0] = Str(t[0]).toLowerCase();
if (t[0] == "t" && tlen == 3) { if (t[0] == "t" && tlen == 3) {
m.translate(t[1], t[2]); if (absolute) {
x2 = inver.x(t[1], t[2]);
y2 = inver.y(t[1], t[2]);
m.translate(x2 - x1, y2 - y1);
} else {
m.translate(t[1], t[2]);
}
} else if (t[0] == "r") { } else if (t[0] == "r") {
if (tlen == 2) { if (tlen == 2) {
bb = bb || el.getBBox(1); bb = bb || el.getBBox(1);
m.rotate(t[1], bb.x + bb.width / 2, bb.y + bb.height / 2); m.rotate(t[1], bb.x + bb.width / 2, bb.y + bb.height / 2);
deg += t[1]; deg += t[1];
} else if (tlen == 4) { } else if (tlen == 4) {
m.rotate(t[1], t[2], t[3]); if (absolute) {
x2 = inver.x(t[2], t[3]);
y2 = inver.y(t[2], t[3]);
m.rotate(t[1], x2 - x1, y2 - y1);
} else {
m.rotate(t[1], t[2], t[3]);
}
deg += t[1]; deg += t[1];
} }
} else if (t[0] == "s") { } else if (t[0] == "s") {
...@@ -1581,7 +1603,13 @@ ...@@ -1581,7 +1603,13 @@
sx *= t[1]; sx *= t[1];
sy *= t[tlen - 1]; sy *= t[tlen - 1];
} else if (tlen == 5) { } else if (tlen == 5) {
m.scale(t[1], t[2], t[3], t[4]); if (absolute) {
x2 = inver.x(t[3], t[4]);
y2 = inver.y(t[3], t[4]);
m.scale(t[1], t[2], x2 - x1, y2 - y1);
} else {
m.scale(t[1], t[2], t[3], t[4]);
}
sx *= t[1]; sx *= t[1];
sy *= t[2]; sy *= t[2];
} }
...@@ -1609,20 +1637,21 @@ ...@@ -1609,20 +1637,21 @@
} }
}, },
getEmpty = function (item) { getEmpty = function (item) {
switch (item[0]) { var l = item[0];
case "t": return ["t", 0, 0]; switch (l.toLowerCase()) {
case "m": return ["m", 1, 0, 0, 1, 0, 0]; case "t": return [l, 0, 0];
case "m": return [l, 1, 0, 0, 1, 0, 0];
case "r": if (item.length == 4) { case "r": if (item.length == 4) {
return ["r", 0, item[2], item[3]]; return [l, 0, item[2], item[3]];
} else { } else {
return ["r", 0]; return [l, 0];
} }
case "s": if (item.length == 5) { case "s": if (item.length == 5) {
return ["s", 1, 1, item[3], item[4]]; return [l, 1, 1, item[3], item[4]];
} else if (item.length == 3) { } else if (item.length == 3) {
return ["s", 1, 1]; return [l, 1, 1];
} else { } else {
return ["s", 1]; return [l, 1];
} }
} }
}, },
...@@ -1639,8 +1668,8 @@ ...@@ -1639,8 +1668,8 @@
tt1 = t1[i] || getEmpty(t2[i]); tt1 = t1[i] || getEmpty(t2[i]);
tt2 = t2[i] || getEmpty(tt1); tt2 = t2[i] || getEmpty(tt1);
if ((tt1[0] != tt2[0]) || if ((tt1[0] != tt2[0]) ||
(tt1[0] == "r" && (tt1[2] != tt2[2] || tt1[3] != tt2[3])) || (tt1[0].toLowerCase() == "r" && (tt1[2] != tt2[2] || tt1[3] != tt2[3])) ||
(tt1[0] == "s" && (tt1[3] != tt2[3] || tt1[4] != tt2[4])) (tt1[0].toLowerCase() == "s" && (tt1[3] != tt2[3] || tt1[4] != tt2[4]))
) { ) {
return; return;
} }
...@@ -1839,8 +1868,8 @@ ...@@ -1839,8 +1868,8 @@
return out; return out;
}; };
matrixproto.toTransformString = function () { matrixproto.toTransformString = function (shorter) {
var s = this.split(); var s = shorter || this.split();
if (s.isSimple) { if (s.isSimple) {
return "t" + [s.dx, s.dy] + "s" + [s.scalex, s.scaley, 0, 0] + "r" + [s.rotate, 0, 0]; return "t" + [s.dx, s.dy] + "s" + [s.scalex, s.scaley, 0, 0] + "r" + [s.rotate, 0, 0];
} else { } else {
......
raphael.svg.js
...@@ -797,6 +797,8 @@ window.Raphael.svg && function (R) { ...@@ -797,6 +797,8 @@ window.Raphael.svg && function (R) {
* Each letter is a command. There are four commands: `t` is for translate, `r` is for rotate, `s` is for * Each letter is a command. There are four commands: `t` is for translate, `r` is for rotate, `s` is for
* scale and `m` is for matrix. * scale and `m` is for matrix.
* *
* There are also alternative “absolute” translation, rotation and scale: `T`, `R` and `S`. They will not take previous transformation into account. For example, `...T100,0` will always move element 100 px horisontally, while `...t100,0` could move it vertically if there is `r90` before. Just compare results of `r90t100,0` and `r90T100,0`.
*
* So, the example line above could be read like “translate by 100, 100; rotate 30° around 100, 100; scale twice around 100, 100; * So, the example line above could be read like “translate by 100, 100; rotate 30° around 100, 100; scale twice around 100, 100;
* rotate 45° around centre; scale 1.5 times relative to centre”. As you can see rotate and scale commands have origin * rotate 45° around centre; scale 1.5 times relative to centre”. As you can see rotate and scale commands have origin
* coordinates as optional parameters, the default is the centre point of the element. * coordinates as optional parameters, the default is the centre point of the element.
......
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