diff options
| author | Ulrich-Matthias Schäfer <ulima.ums@googlemail.com> | 2015-07-05 01:33:53 +0200 |
|---|---|---|
| committer | Ulrich-Matthias Schäfer <ulima.ums@googlemail.com> | 2015-07-05 01:33:53 +0200 |
| commit | dd14bc36596fd895f09a8f4bdff08690cfa15c41 (patch) | |
| tree | af093f849dc87bf93c82fb79d27aaae908b1a013 /src | |
| parent | dd826d235281883b5f5dd451535bc259688d08ba (diff) | |
| download | svg.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.js | 18 | ||||
| -rw-r--r-- | src/transform.js | 35 |
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 |