summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorUlrich-Matthias Schäfer <ulima.ums@googlemail.com>2015-07-05 01:33:53 +0200
committerUlrich-Matthias Schäfer <ulima.ums@googlemail.com>2015-07-05 01:33:53 +0200
commitdd14bc36596fd895f09a8f4bdff08690cfa15c41 (patch)
treeaf093f849dc87bf93c82fb79d27aaae908b1a013 /src
parentdd826d235281883b5f5dd451535bc259688d08ba (diff)
downloadsvg.js-dd14bc36596fd895f09a8f4bdff08690cfa15c41.tar.gz
svg.js-dd14bc36596fd895f09a8f4bdff08690cfa15c41.zip
Fixed transform method which now uses current transformation and not ctm anymore
Diffstat (limited to 'src')
-rw-r--r--src/matrix.js18
-rw-r--r--src/transform.js35
2 files changed, 37 insertions, 16 deletions
diff --git a/src/matrix.js b/src/matrix.js
index cbd053f..c715a8c 100644
--- a/src/matrix.js
+++ b/src/matrix.js
@@ -4,8 +4,8 @@ SVG.Matrix = SVG.invent({
var i, base = arrayToMatrix([1, 0, 0, 1, 0, 0])
// ensure source as object
- source = source && source.node && source.node.getCTM ?
- source.node.getCTM() :
+ source = source instanceof SVG.Element ?
+ source.matrixify() :
typeof source === 'string' ?
stringToMatrix(source) :
arguments.length == 6 ?
@@ -18,7 +18,7 @@ SVG.Matrix = SVG.invent({
this[abcdef[i]] = source && typeof source[abcdef[i]] === 'number' ?
source[abcdef[i]] : base[abcdef[i]]
}
-
+
// Add methods
, extend: {
// Extract individual transformations
@@ -27,7 +27,7 @@ SVG.Matrix = SVG.invent({
var px = deltaTransformPoint(this, 0, 1)
, py = deltaTransformPoint(this, 1, 0)
, skewX = 180 / Math.PI * Math.atan2(px.y, px.x) - 90
-
+
return {
// translation
x: this.e
@@ -100,7 +100,7 @@ SVG.Matrix = SVG.invent({
}
// Translate matrix
, translate: function(x, y) {
- return new SVG.Matrix(this.native().translate(x || 0, y || 0))
+ return new SVG.Matrix(this.native().translate(x || 0, y || 0))
}
// Scale matrix
, scale: function(x, y, cx, cy) {
@@ -118,7 +118,7 @@ SVG.Matrix = SVG.invent({
, rotate: function(r, cx, cy) {
// convert degrees to radians
r = SVG.utils.radians(r)
-
+
return this.around(cx, cy, new SVG.Matrix(Math.cos(r), Math.sin(r), -Math.sin(r), Math.cos(r), 0, 0))
}
// Flip matrix on x or y, at a given offset
@@ -140,7 +140,7 @@ SVG.Matrix = SVG.invent({
, native: function() {
// create new matrix
var matrix = SVG.parser.draw.node.createSVGMatrix()
-
+
// update with current values
for (var i = abcdef.length - 1; i >= 0; i--)
matrix[abcdef[i]] = this[abcdef[i]]
@@ -160,9 +160,9 @@ SVG.Matrix = SVG.invent({
, construct: {
// Get current matrix
ctm: function() {
- return new SVG.Matrix(this)
+ return new SVG.Matrix(this.node.getCTM())
}
-
+
}
}) \ No newline at end of file
diff --git a/src/transform.js b/src/transform.js
index 43bfb1b..2023439 100644
--- a/src/transform.js
+++ b/src/transform.js
@@ -8,7 +8,7 @@ SVG.extend(SVG.Element, SVG.FX, {
// act as a getter
if (typeof o !== 'object') {
// get current matrix
- matrix = target.ctm().extract()
+ matrix = new SVG.Matrix(target).extract()
// add parametric rotation
if (typeof this.param === 'object') {
@@ -27,7 +27,7 @@ SVG.extend(SVG.Element, SVG.FX, {
// ensure relative flag
relative = !!relative || !!o.relative
-
+
// act on matrix
if (o.a != null) {
matrix = relative ?
@@ -35,7 +35,7 @@ SVG.extend(SVG.Element, SVG.FX, {
matrix.multiply(new SVG.Matrix(o)) :
// absolute
new SVG.Matrix(o)
-
+
// act on rotation
} else if (o.rotation != null) {
// ensure centre point
@@ -55,11 +55,11 @@ SVG.extend(SVG.Element, SVG.FX, {
if (this instanceof SVG.Element) {
matrix = relative ?
// relative
- target.attr('transform', matrix + ' rotate(' + [o.rotation, o.cx, o.cy].join() + ')').ctm() :
+ matrix.rotate(o.rotation, o.cx, o.cy) :
// absolute
matrix.rotate(o.rotation - matrix.extract().rotation, o.cx, o.cy)
}
-
+
// act on scale
} else if (o.scale != null || o.scaleX != null || o.scaleY != null) {
// ensure centre point
@@ -92,7 +92,7 @@ SVG.extend(SVG.Element, SVG.FX, {
var e = matrix.extract()
matrix = matrix.multiply(new SVG.Matrix().skew(e.skewX, e.skewY, o.cx, o.cy).inverse())
}
-
+
matrix = matrix.skew(o.skewX, o.skewY, o.cx, o.cy)
// act on flip
@@ -113,7 +113,7 @@ SVG.extend(SVG.Element, SVG.FX, {
if (o.y != null) matrix.f = o.y
}
}
-
+
return this.attr('transform', matrix)
}
})
@@ -122,5 +122,26 @@ SVG.extend(SVG.Element, {
// Reset all transformations
untransform: function() {
return this.attr('transform', null)
+ },
+ matrixify: function() {
+
+ var matrix = (this.attr('transform') || '')
+ // split transformations
+ .split(/\)\s*/).slice(0,-1).map(function(str){
+ // generate key => value pairs
+ var kv = str.trim().split('(')
+ return [kv[0], kv[1].split(',').map(function(str){ return parseFloat(str) })]
+ })
+ // calculate every transformation into one matrix
+ .reduce(function(matrix, transform){
+
+ if(transform[0] == 'matrix') return matrix.multiply(arrayToMatrix(transform[1]))
+ return matrix[transform[0]].apply(matrix, transform[1])
+
+ }, new SVG.Matrix())
+ // apply calculated matrix to element
+ this.attr('transform', matrix)
+
+ return matrix
}
}) \ No newline at end of file