diff options
Diffstat (limited to 'src/transform.js')
| -rw-r--r-- | src/transform.js | 154 |
1 files changed, 30 insertions, 124 deletions
diff --git a/src/transform.js b/src/transform.js index 96b58ab..1175b13 100644 --- a/src/transform.js +++ b/src/transform.js @@ -1,4 +1,6 @@ + SVG.extend(SVG.Element, { + // Add transformations transform: function (o) { @@ -6,153 +8,58 @@ SVG.extend(SVG.Element, { * EXTRACTING PARAMETERS */ - // Get target in case of the fx module, otherwise reference this - var target = this - // Act as a getter if no object was passed if (typeof o !== 'object') { - matrix = new SVG.Matrix(target).extract() + matrix = new SVG.Matrix(this).extract() return typeof o === 'string' ? matrix[o] : matrix } - // Get the origin location - var ox = o.ox - , oy = o.oy - // Allow the user to define the origin with a string - if (typeof o.origin == "string") { + if (typeof o.origin === "string") { - // Get the bounding box to use in our calculations - var bbox = target.bbox() + // Get the bounding box and string to use in our calculations + var string = o.origin.toLowerCase().trim() + , bbox = this.bbox() , x = bbox.x , y = bbox.y , width = bbox.width , height = bbox.height - // Get the string to modify - var string = o.origin.toLowerCase().trim() - // Set the bounds eg : "bottom-left", "Top right", "middle" etc... - ox = string.includes("left") ? x - : string.includes("right") ? x + width - : x + width / 2 - oy = string.includes("top") ? y - : string.includes("bottom") ? y + height - : y + height / 2 - + o.ox = string.includes("left") ? x + : string.includes("right") ? x + width + : x + width / 2 + o.oy = string.includes("top") ? y + : string.includes("bottom") ? y + height + : y + height / 2 + + // Make sure we only pass ox and oy + o.origin = null } // Get the resulting matrix and apply it to the element var result = new SVG.Matrix().form(o) , matrixString = result.toString() - - + // Apply the result + return this.attr('transform', matrix) } + } + // Map matrix to transform +, matrix: function(m, relative) { + // Construct a matrix from the first parameter + var matrix = new SVG.Matrix(m) + // If we have a relative matrix, we just apply the old matrix + if (relative) { + var oldMatrix = new SVG.Matrix(this) + matrix = oldMatrix.multiply(matrix) + } - - - - - - - - - - // - // // get current matrix - // matrix = new SVG.Matrix(target) - // - // // ensure relative flag - // relative = !!relative || !!o.relative - // - // // act on matrix - // if (o.a != null) { - // matrix = relative ? - // // relative - // matrix.multiply(new SVG.Matrix(o)) : - // // absolute - // new SVG.Matrix(o) - // - // // act on rotation - // } else if (o.rotation != null) { - // // ensure centre point - // ensureCentre(o, target) - // - // // apply transformation - // matrix = relative ? - // // relative - // 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 - // ensureCentre(o, target) - // - // // ensure scale values on both axes - // o.scaleX = o.scale != null ? o.scale : o.scaleX != null ? o.scaleX : 1 - // o.scaleY = o.scale != null ? o.scale : o.scaleY != null ? o.scaleY : 1 - // - // if (!relative) { - // // absolute; multiply inversed values - // var e = matrix.extract() - // o.scaleX = o.scaleX * 1 / e.scaleX - // o.scaleY = o.scaleY * 1 / e.scaleY - // } - // - // matrix = matrix.scale(o.scaleX, o.scaleY, o.cx, o.cy) - // - // // act on skew - // } else if (o.skew != null || o.skewX != null || o.skewY != null) { - // // ensure centre point - // ensureCentre(o, target) - // - // // ensure skew values on both axes - // o.skewX = o.skew != null ? o.skew : o.skewX != null ? o.skewX : 0 - // o.skewY = o.skew != null ? o.skew : o.skewY != null ? o.skewY : 0 - // - // if (!relative) { - // // absolute; reset skew values - // 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 - // } else if (o.flip) { - // if(o.flip == 'x' || o.flip == 'y') { - // o.offset = o.offset == null ? target.bbox()['c' + o.flip] : o.offset - // } else { - // if(o.offset == null) { - // bbox = target.bbox() - // o.flip = bbox.cx - // o.offset = bbox.cy - // } else { - // o.flip = o.offset - // } - // } - // - // matrix = new SVG.Matrix().flip(o.flip, o.offset) - // - // // act on translate - // } else if (o.x != null || o.y != null) { - // if (relative) { - // // relative - // matrix = matrix.translate(o.x, o.y) - // } else { - // // absolute - // if (o.x != null) matrix.e = o.x - // if (o.y != null) matrix.f = o.y - // } - // } - // - // return this.attr('transform', matrix) + // Apply the matrix directly + return this.attr('transform', matrix) } }) @@ -281,7 +188,6 @@ SVG.extend(SVG.Element, { toDoc: function() { return this.toParent(this.doc()) } - }) // TODO: DESTROY |