From cd7d46cd676a784f78d55c243cfa02a0f2067e18 Mon Sep 17 00:00:00 2001 From: dubejf Date: Sat, 25 Jul 2015 09:58:48 -0400 Subject: [PATCH] Handling of color with alpha Addresses comments in #6898 --- docs/api/math/Color.html | 12 +++-- src/math/Color.js | 111 +++++++++++++++++++++++++++++---------- 2 files changed, 91 insertions(+), 32 deletions(-) diff --git a/docs/api/math/Color.html b/docs/api/math/Color.html index f2f4c41998..271079cc91 100644 --- a/docs/api/math/Color.html +++ b/docs/api/math/Color.html @@ -1,7 +1,7 @@ - + @@ -18,7 +18,9 @@

Example

var color = new THREE.Color(); var color = new THREE.Color( 0xff0000 ); - var color = new THREE.Color("rgb(255,0,0)"); + var color = new THREE.Color("rgb(255, 0, 0)"); + var color = new THREE.Color("rgb(100%, 0%, 0%)"); + var color = new THREE.Color("hsl(0, 100%, 50%)"); var color = new THREE.Color( 1, 0, 0 ); @@ -27,7 +29,7 @@

[name]( value )

- value — optional argument that sets initial color. Can be a hexadecimal or a CSS-style string, for example, "rgb(250, 0,0)", "rgb(100%,0%,0%)", "#ff0000", "#f00", or "red", or three arguments that represent color channels. + value — optional argument that sets initial color. Can be a hexadecimal or a CSS-style string, for example, "rgb(250, 0,0)", "rgb(100%,0%,0%)", "hsl(0, 100%, 50%)", "#ff0000", "#f00", or "red", or three arguments that represent color channels.

Properties

@@ -113,10 +115,10 @@

[method:Color setStyle]( [page:String style] ) [page:Color this]

- style — color as a CSS-style string, for example, "rgb(250, 0,0)", "rgb(100%,0%,0%)", "#ff0000", "#f00", or "red" + style — color as a CSS-style string.
- Sets this color from a CSS-style string. + Sets this color from a CSS-style string. For example, "rgb(250, 0,0)", "rgb(100%, 0%, 0%)", "hsl(0, 100%, 50%)", "#ff0000", "#f00", or "red". Transluent colors such as "rgba(255, 0, 0, 0.5)" and "hsla(0, 100%, 50%, 0.5)" are also accepted, but the alpha-channel coordinate will be discarded.

[method:String getStyle]()

diff --git a/src/math/Color.js b/src/math/Color.js index 5ee6e8d9f6..5b049c5059 100644 --- a/src/math/Color.js +++ b/src/math/Color.js @@ -105,11 +105,27 @@ THREE.Color.prototype = { setStyle: function ( style ) { + var parseAlpha = function ( strAlpha ) { + + var alpha = parseFloat( strAlpha ); + + if ( alpha < 1 ) { + + console.warn( 'THREE.Color: Alpha component of color ' + style + ' will be ignored.' ); + + } + + return alpha; + + } + + var m; - // rgb / hsl if ( m = /^((?:rgb|hsl)a?)\(\s*([^\)]*)\)/.exec( style ) ) { + // rgb / hsl + var color; var name = m[ 1 ]; var components = m[ 2 ]; @@ -117,9 +133,8 @@ THREE.Color.prototype = { switch ( name ) { case 'rgb': - case 'rgba': - if ( color = /^(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/.exec( components ) ) { + if ( color = /^(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*$/.exec( components ) ) { // rgb(255,0,0) this.r = Math.min( 255, parseInt( color[ 1 ], 10 ) ) / 255; @@ -130,7 +145,7 @@ THREE.Color.prototype = { } - if ( color = /^(\d+)\%\s*,\s*(\d+)\%\s*,\s*(\d+)\%/.exec( components ) ) { + if ( color = /^(\d+)\%\s*,\s*(\d+)\%\s*,\s*(\d+)\%\s*$/.exec( components ) ) { // rgb(100%,0%,0%) this.r = Math.min( 100, parseInt( color[ 1 ], 10 ) ) / 100; @@ -143,13 +158,40 @@ THREE.Color.prototype = { break; + case 'rgba': + + if ( color = /^(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([0-9]*\.?[0-9]+)\s*$/.exec( components ) ) { + + // rgba(255,0,0,0.5) + this.r = Math.min( 255, parseInt( color[ 1 ], 10 ) ) / 255; + this.g = Math.min( 255, parseInt( color[ 2 ], 10 ) ) / 255; + this.b = Math.min( 255, parseInt( color[ 3 ], 10 ) ) / 255; + parseAlpha( color[ 4 ] ); + + return this; + + } + + if ( color = /^(\d+)\%\s*,\s*(\d+)\%\s*,\s*(\d+)\%\s*,\s*([0-9]*\.?[0-9]+)\s*$/.exec( components ) ) { + + // rgba(100%,0%,0%,0.5) + this.r = Math.min( 100, parseInt( color[ 1 ], 10 ) ) / 100; + this.g = Math.min( 100, parseInt( color[ 2 ], 10 ) ) / 100; + this.b = Math.min( 100, parseInt( color[ 3 ], 10 ) ) / 100; + parseAlpha( color[ 4 ] ); + + return this; + + } + + break; + case 'hsl': - case 'hsla': - if ( color = /^([0-9]*\.?[0-9]+)\s*,\s*(\d+)\%\s*,\s*(\d+)\%/.exec( components ) ) { + if ( color = /^([0-9]*\.?[0-9]+)\s*,\s*(\d+)\%\s*,\s*(\d+)\%\s*$/.exec( components ) ) { // hsl(120,50%,50%) - var h = parseFloat( color[ 1 ], 10 ); + var h = parseFloat( color[ 1 ] ); var s = parseInt( color[ 2 ], 10 ) / 100; var l = parseInt( color[ 3 ], 10 ) / 100; @@ -159,33 +201,43 @@ THREE.Color.prototype = { break; - } + case 'hsla': - // unknown color - return this; + if ( color = /^([0-9]*\.?[0-9]+)\s*,\s*(\d+)\%\s*,\s*(\d+)\%\s*,\s*([0-9]*\.?[0-9]+)\s*$/.exec( components ) ) { - } + // hsla(120,50%,50%,0.5) + var h = parseFloat( color[ 1 ] ); + var s = parseInt( color[ 2 ], 10 ) / 100; + var l = parseInt( color[ 3 ], 10 ) / 100; + parseAlpha( color[ 4 ] ); + + return this.setHSL( h, s, l ); + + } + + break; + + } + + } else if ( m = /^\#([A-Fa-f0-9]+)$/.exec( style ) ) { - // hex - if ( m = /^\#([A-Fa-f0-9]+)$/.exec( style ) ) { + // hex color var hex = m[ 1 ]; var size = hex.length; if ( size === 3 ) { - // # ff0 + // #ff0 this.r = parseInt( hex.charAt( 0 ) + hex.charAt( 0 ), 16 ) / 255; this.g = parseInt( hex.charAt( 1 ) + hex.charAt( 1 ), 16 ) / 255; this.b = parseInt( hex.charAt( 2 ) + hex.charAt( 2 ), 16 ) / 255; return this; - } - - if ( size === 6 ) { + } else if ( size === 6 ) { - // #fa11ac + // #ff0000 this.r = parseInt( hex.charAt( 0 ) + hex.charAt( 1 ), 16 ) / 255; this.g = parseInt( hex.charAt( 2 ) + hex.charAt( 3 ), 16 ) / 255; this.b = parseInt( hex.charAt( 4 ) + hex.charAt( 5 ), 16 ) / 255; @@ -194,22 +246,27 @@ THREE.Color.prototype = { } - // unknown color - return this; - } - // color keywords - if ( /^\w+$/i.test( style ) ) { + if ( style && style.length > 0 ) { - // red - this.setHex( THREE.ColorKeywords[ style ] ); + // color keywords + var hex = THREE.ColorKeywords[ style ]; - return this; + if ( hex !== undefined ) { + + // red + this.setHex( hex ); + + } else { + + // unknown color + console.warn( 'THREE.Color: Unknown color ' + style ); + + } } - // unknown color return this; }, -- GitLab