diff options
| -rw-r--r-- | dirty.html | 2 | ||||
| -rw-r--r-- | dist/svg.js | 28 | ||||
| -rw-r--r-- | src/matrix.js | 26 | ||||
| -rw-r--r-- | src/morph.js | 22 | ||||
| -rw-r--r-- | src/runner.js | 6 |
5 files changed, 60 insertions, 24 deletions
@@ -218,7 +218,7 @@ a.timeline().source(() => { }) -let obj = { rotate: 180, origin: [600, 600] } +let obj = { shear: 2, rotate: 50, origin: [600, 600] } a.clone() // startPosition a.clone().transform(obj) // endPosition diff --git a/dist/svg.js b/dist/svg.js index 7b70fc3..d387d53 100644 --- a/dist/svg.js +++ b/dist/svg.js @@ -6,7 +6,7 @@ * @copyright Wout Fierens <wout@mick-wout.com> * @license MIT * -* BUILT: Thu Jun 28 2018 22:44:34 GMT+1000 (AEST) +* BUILT: Thu Jun 28 2018 23:40:30 GMT+1000 (AEST) */; (function(root, factory) { @@ -1708,8 +1708,14 @@ SVG.Matrix = SVG.invent({ }, // Applies a matrix defined by its affine parameters - compose: function (o, ox, oy) { + compose: function (o) { + if (o.origin) { + o.originX = o.origin[0] + o.originY = o.origin[1] + } // Get the parameters + var ox = o.originX || 0 + var oy = o.originY || 0 var sx = o.scaleX || 1 var sy = o.scaleY || 1 var lam = o.shear || 0 @@ -1719,23 +1725,25 @@ SVG.Matrix = SVG.invent({ // Apply the standard matrix var result = new SVG.Matrix() + .translate(-ox, -oy) .scale(sx, sy) .shear(lam) .rotate(theta) .translate(tx, ty) .lmultiply(this) + .translate(ox, oy) return result }, // Decomposes this matrix into its affine parameters - decompose: function () { + decompose: function (ox=0, oy=0) { // Get the parameters from the matrix var a = this.a var b = this.b var c = this.c var d = this.d - var e = this.e - var f = this.f + var e = this.e - ox + var f = this.f - oy // Figure out if the winding direction is clockwise or counterclockwise var determinant = a * d - b * c @@ -1758,16 +1766,18 @@ SVG.Matrix = SVG.invent({ scaleY: sy, shear: lam, rotate: theta, - translateX: e, - translateY: f, + translateX: e + ox, + translateY: f + oy, + originX: ox, + originY: oy, // Return the matrix parameters a: this.a, b: this.b, c: this.c, d: this.d, - e: this.e, - f: this.f + e: this.e + ox, + f: this.f + oy } }, diff --git a/src/matrix.js b/src/matrix.js index 6947e7e..25d686a 100644 --- a/src/matrix.js +++ b/src/matrix.js @@ -75,8 +75,14 @@ SVG.Matrix = SVG.invent({ }, // Applies a matrix defined by its affine parameters - compose: function (o, ox, oy) { + compose: function (o) { + if (o.origin) { + o.originX = o.origin[0] + o.originY = o.origin[1] + } // Get the parameters + var ox = o.originX || 0 + var oy = o.originY || 0 var sx = o.scaleX || 1 var sy = o.scaleY || 1 var lam = o.shear || 0 @@ -86,23 +92,25 @@ SVG.Matrix = SVG.invent({ // Apply the standard matrix var result = new SVG.Matrix() + .translate(-ox, -oy) .scale(sx, sy) .shear(lam) .rotate(theta) .translate(tx, ty) .lmultiply(this) + .translate(ox, oy) return result }, // Decomposes this matrix into its affine parameters - decompose: function () { + decompose: function (ox=0, oy=0) { // Get the parameters from the matrix var a = this.a var b = this.b var c = this.c var d = this.d - var e = this.e - var f = this.f + var e = this.e - ox + var f = this.f - oy // Figure out if the winding direction is clockwise or counterclockwise var determinant = a * d - b * c @@ -125,16 +133,18 @@ SVG.Matrix = SVG.invent({ scaleY: sy, shear: lam, rotate: theta, - translateX: e, - translateY: f, + translateX: e + ox, + translateY: f + oy, + originX: ox, + originY: oy, // Return the matrix parameters a: this.a, b: this.b, c: this.c, d: this.d, - e: this.e, - f: this.f + e: this.e + ox, + f: this.f + oy } }, diff --git a/src/morph.js b/src/morph.js index 543479b..67d14f7 100644 --- a/src/morph.js +++ b/src/morph.js @@ -152,21 +152,31 @@ SVG.Morphable.TransformBag = SVG.invent({ shear: obj[2], rotate: obj[3], translateX: obj[4], - translateY: obj[5] + translateY: obj[5], + originX: obj[6], + originY: obj[7] } } SVG.Matrix.call(this, obj) - if (obj && obj.origin){ - this.translateO(-obj.origin[0], -obj.origin[1]) + if (obj && obj.origin) { + obj.originX = origin[0] + obj.originY = origin[1] } + + this.originX = obj && obj.originX || 0 + this.originY = obj && obj.originY || 0 + + /*if (obj && obj.origin){ + this.translateO(-obj.origin[0], -obj.origin[1]) + }*/ //this.value = new SVG.Matrix(obj) }, extend: { toArray: function (){ - var v = this.decompose() + var v = this.decompose(this.originX, this.originY) return [ v.scaleX, @@ -174,7 +184,9 @@ SVG.Morphable.TransformBag = SVG.invent({ v.shear, v.rotate, v.translateX, - v.translateY + v.translateY, + v.originX, + v.originY, ] } } diff --git a/src/runner.js b/src/runner.js index 4f8e5f3..6094aaf 100644 --- a/src/runner.js +++ b/src/runner.js @@ -700,7 +700,11 @@ SVG.extend(SVG.Runner, { // make sure to add an origin if we morph affine //if (affine) { - startMatrix = startMatrix.translate(-origin[0], -origin[1]) + /*startMatrix = startMatrix.decompose(origin[0], origin[1]) + + startMatrix = new SVG.Matrix().compose(startMatrix)*/ + + startMatrix.origin = origin //} // FIXME: correct the rotation so that it takes the shortest path |