ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add support for hex colors with alpha

Browse Source
This commit is contained in:
Tim Schaub
2017-11-07 16:16:37 -07:00
parent 3a6fc7a1f2
commit 6668d03122
2 changed files with 37 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/ol/color.js
View File

@@ -5,12 +5,12 @@ goog.require('ol.math');
/**
* This RegExp matches # followed by 3 or 6 hex digits.
* This RegExp matches # followed by 3, 4, 6, or 8 hex digits.
* @const
* @type {RegExp}
* @private
*/
ol.color.HEX_COLOR_RE_ = /^#(?:[0-9a-f]{3}){1,2}$/i;
ol.color.HEX_COLOR_RE_ = /^#(?:[0-9a-f]{3,4}){1,2}$/i;
/**
@@ -138,18 +138,30 @@ ol.color.fromStringInternal_ = function(s) {
if (ol.color.HEX_COLOR_RE_.exec(s)) { // hex
var n = s.length - 1; // number of hex digits
ol.asserts.assert(n == 3 || n == 6, 54); // Hex color should have 3 or 6 digits
var d = n == 3 ? 1 : 2; // number of digits per channel
var d; // number of digits per channel
if (n <= 4) {
d = 1;
} else {
d = 2;
}
var hasAlpha = n === 4 || n === 8;
r = parseInt(s.substr(1 + 0 * d, d), 16);
g = parseInt(s.substr(1 + 1 * d, d), 16);
b = parseInt(s.substr(1 + 2 * d, d), 16);
if (hasAlpha) {
a = parseInt(s.substr(1 + 3 * d, d), 16);
} else {
a = 255;
}
if (d == 1) {
r = (r << 4) + r;
g = (g << 4) + g;
b = (b << 4) + b;
if (hasAlpha) {
a = (a << 4) + a;
}
}
a = 1;
color = [r, g, b, a];
color = [r, g, b, a / 255];
} else if (s.indexOf('rgba(') == 0) { // rgba()
parts = s.slice(5, -1).split(',').map(Number);
color = ol.color.normalize(parts);

27
test/spec/ol/color.test.js
View File

@@ -1,12 +1,10 @@
goog.require('ol.color');
goog.require('ol');
describe('ol.color', function() {
describe('ol.color.asArray()', function() {
describe('asArray()', function() {
it('returns the same for an array', function() {
var color = [1, 2, 3, 0.4];
@@ -29,9 +27,14 @@ describe('ol.color', function() {
expect(color).to.eql([0, 204, 255, 1]);
});
it('returns an array given a hex string with alpha', function() {
var color = ol.color.asArray('#00ccffb0');
expect(color).to.eql([0, 204, 255, 176 / 255]);
});
});
describe('ol.color.asString()', function() {
describe('asString()', function() {
it('returns the same for a string', function() {
var color = 'rgba(0,1,2,0.3)';
@@ -51,7 +54,7 @@ describe('ol.color', function() {
});
describe('ol.color.fromString', function() {
describe('fromString()', function() {
before(function() {
sinon.spy(ol.color, 'fromStringInternal_');
@@ -72,10 +75,18 @@ describe('ol.color', function() {
expect(ol.color.fromString('#087')).to.eql([0, 136, 119, 1]);
});
it('can parse 4-digit hex colors', function() {
expect(ol.color.fromString('#0876')).to.eql([0, 136, 119, 102 / 255]);
});
it('can parse 6-digit hex colors', function() {
expect(ol.color.fromString('#56789a')).to.eql([86, 120, 154, 1]);
});
it('can parse 8-digit hex colors', function() {
expect(ol.color.fromString('#56789acc')).to.eql([86, 120, 154, 204 / 255]);
});
it('can parse rgb colors', function() {
expect(ol.color.fromString('rgb(0, 0, 255)')).to.eql([0, 0, 255, 1]);
});
@@ -130,7 +141,7 @@ describe('ol.color', function() {
});
it('throws an error on invalid colors', function() {
var invalidColors = ['tuesday', '#1234567', 'rgb(255.0,0,0)'];
var invalidColors = ['tuesday', '#12345', '#1234567', 'rgb(255.0,0,0)'];
var i, ii;
for (i = 0, ii < invalidColors.length; i < ii; ++i) {
expect(function() {
@@ -141,7 +152,7 @@ describe('ol.color', function() {
});
describe('ol.color.normalize', function() {
describe('normalize()', function() {
it('clamps out-of-range channels', function() {
expect(ol.color.normalize([-1, 256, 0, 2])).to.eql([0, 255, 0, 1]);
@@ -153,7 +164,7 @@ describe('ol.color', function() {
});
describe('ol.color.toString', function() {
describe('toString()', function() {
it('converts valid colors', function() {
expect(ol.color.toString([1, 2, 3, 0.4])).to.be('rgba(1,2,3,0.4)');