diff options
author | wout <wout@impinc.co.uk> | 2012-12-27 13:40:58 +0100 |
---|---|---|
committer | wout <wout@impinc.co.uk> | 2012-12-27 13:40:58 +0100 |
commit | 819c6e5e8d5c0484364e3b937130851471d38965 (patch) | |
tree | 9119980b05a8681ae7c90525cc5b409bd54dcd94 /src/element.js | |
parent | f301d239c399ee4ee9c5656c5565ee2208294b14 (diff) | |
download | svg.js-819c6e5e8d5c0484364e3b937130851471d38965.tar.gz svg.js-819c6e5e8d5c0484364e3b937130851471d38965.zip |
Reworked transform()
Diffstat (limited to 'src/element.js')
-rw-r--r-- | src/element.js | 73 |
1 files changed, 55 insertions, 18 deletions
diff --git a/src/element.js b/src/element.js index ff3ad37..03963f1 100644 --- a/src/element.js +++ b/src/element.js @@ -2,6 +2,15 @@ SVG.Element = function Element(n) { this.node = n; this.attrs = {}; + this.trans = { + x: 0, + y: 0, + scaleX: 1, + scaleY: 1, + rotation: 0, + skewX: 0, + skewY: 0 + }; this._s = ('size family weight stretch variant style').split(' '); }; @@ -41,7 +50,7 @@ SVG.extend(SVG.Element, { a == 'leading' ? this[a] : this.style[a]; - + else return this.attrs[a]; @@ -69,32 +78,60 @@ SVG.extend(SVG.Element, { return this; }, - // transformations - transform: function(t, r) { - var n = [], + transform: function(o) { + // act as a getter if the first argument is a string + if (typeof o === 'string') + return this.trans[o]; + + // ... otherwise continue as a setter + var k, + t = [], + b = this.bbox(), s = this.attr('transform') || '', - l = s.match(/([a-z]+\([^\)]+\))/g) || []; + l = s.match(/[a-z]+\([^\)]+\)/g) || []; - if (r !== true) { - var v = t.match(/^([A-Za-z\-]+)/)[1], - r = new RegExp('^' + v); - - for (var i = 0, s = l.length; i < s; i++) - if (!r.test(l[i])) - n.push(l[i]); - - } else - n = l; + // merge values + for (k in this.trans) + if (o[k] != null) + this.trans[k] = o[k]; + + // alias current transformations + o = this.trans; + + // add rotate + if (o.rotation != 0) + t.push('rotate(' + o.rotation + ',' + (o.cx != null ? o.cx : b.cx) + ',' + (o.cy != null ? o.cy : b.cy) + ')'); - n.push(t); + // add scale + if (o.scaleX != 1 && o.scaleY != 1) + t.push('scale(' + o.sx + ',' + o.sy + ')'); - return this.attr('transform', n.join(' ')); + // add skew on x axis + if (o.skewX != 0) + t.push('skewX(' + x.skewX + ')'); + + // add skew on y axis + if (o.skewY != 0) + t.push('skewY(' + x.skewY + ')') + + // add translate + if (o.x != 0 && o.y != 0) + t.push('translate(' + o.x + ',' + o.y + ')'); + + // add only te required transformations + return this.attr('transform', t.join(' ')); }, - + // get bounding box bbox: function() { + // actual bounding box var b = this.node.getBBox(); + // include translations on x an y + b.x += this.trans.x; + b.y += this.trans.y; + + // add the center b.cx = b.x + b.width / 2; b.cy = b.y + b.height / 2; |