diff options
author | wout <wout@impinc.co.uk> | 2014-01-31 16:22:01 +0100 |
---|---|---|
committer | wout <wout@impinc.co.uk> | 2014-01-31 16:22:01 +0100 |
commit | 2b2a4040f69fde2fb6555c663da8ef6235639dd0 (patch) | |
tree | 522edabba7b250ff7fa31011213a98e95786e59e /dist/svg.js | |
parent | b095d2949b24da056a0d968e0f2ba306d0d1f48d (diff) | |
download | svg.js-2b2a4040f69fde2fb6555c663da8ef6235639dd0.tar.gz svg.js-2b2a4040f69fde2fb6555c663da8ef6235639dd0.zip |
Added morph() and at() methods to SVG.Color
Diffstat (limited to 'dist/svg.js')
-rw-r--r-- | dist/svg.js | 61 |
1 files changed, 35 insertions, 26 deletions
diff --git a/dist/svg.js b/dist/svg.js index ed711ab..74f866c 100644 --- a/dist/svg.js +++ b/dist/svg.js @@ -1,4 +1,4 @@ -/* svg.js v1.0rc1-5-gbd7e10c - svg regex default color array pointarray patharray arraycache number viewbox bbox rbox element parent container fx relative event defs group arrange mask clip gradient doc shape use rect ellipse line poly path image text textpath nested hyperlink sugar set data memory loader - svgjs.com/license */ +/* svg.js v1.0rc1-7-gb095d29 - svg regex default color array pointarray patharray arraycache number viewbox bbox rbox element parent container fx relative event defs group arrange mask clip gradient doc shape use rect ellipse line poly path image text textpath nested hyperlink sugar set data memory loader - svgjs.com/license */ ;(function() { this.SVG = function(element) { @@ -255,6 +255,24 @@ + (this.g / 255 * 0.59) + (this.b / 255 * 0.11) } + // Make color morphable + , morph: function(color) { + this.destination = new SVG.Color(color) + + return this + } + // Get morphed color at given position + , at: function(pos) { + /* make sure a destination is defined */ + if (!this.destination) return this + + /* generate morphed array */ + return new SVG.Color({ + r: ~~(this.r + (this.destination.r - this.r) * pos) + , g: ~~(this.g + (this.destination.g - this.g) * pos) + , b: ~~(this.b + (this.destination.b - this.b) * pos) + }) + } // Private: ensure to six-based hex , _fullHex: function(hex) { return hex.length == 4 ? @@ -282,6 +300,13 @@ // Test if given value is a rgb object SVG.Color.isRgb = function(color) { return color && typeof color.r == 'number' + && typeof color.g == 'number' + && typeof color.b == 'number' + } + + // Test if given value is a color + SVG.Color.isColor = function(color) { + return SVG.Color.isRgb(color) || SVG.Color.test(color) } SVG.Array = function(array, fallback) { @@ -1784,12 +1809,17 @@ } // Add animatable attributes , attr: function(a, v, n) { - if (typeof a == 'object') + if (typeof a == 'object') { for (var key in a) this.attr(key, a[key]) - else - this.attrs[a] = { from: this.target.attr(a), to: v } + } else { + var from = this.target.attr(a) + + this.attrs[a] = SVG.Color.isColor(from) ? + new SVG.Color(from).morph(v) : + { from: from, to: v } + } return this } @@ -1986,32 +2016,11 @@ .plus(new SVG.Number(o.from)) : /* color recalculation */ - o.to && (o.to.r || SVG.Color.test(o.to)) ? - this._color(o, pos) : + o instanceof SVG.Color ? o.at(pos) : /* for all other values wait until pos has reached 1 to return the final value */ pos < 1 ? o.from : o.to } - // Private: tween color - , _color: function(o, pos) { - var from, to - - /* normalise pos */ - pos = pos < 0 ? 0 : pos > 1 ? 1 : pos - - /* convert FROM */ - from = new SVG.Color(o.from) - - /* convert TO hex to rgb */ - to = new SVG.Color(o.to) - - /* tween color and return hex */ - return new SVG.Color({ - r: ~~(from.r + (to.r - from.r) * pos) - , g: ~~(from.g + (to.g - from.g) * pos) - , b: ~~(from.b + (to.b - from.b) * pos) - }).toHex() - } }) |