[英]Working with hex strings and hex values more easily in Javascript
我正在取代表十六进制数字(实际上是十六进制颜色)的字符串并将它们相加。 因此,添加aaaaaa
+ 010101
= ababab
。 我的方法似乎不必要地冗长和复杂:
var hexValue = "aaaaaa";
hexValue = "0x" + hexValue;
hexValue = parseInt(hexValue , 16);
hexValue = hexValue + 0x010101;
hexValue = hexValue.toString(16);
document.write(hexValue); // outputs 'ababab'
连接0x
后的十六进制值仍然是一个字符串,所以我必须将其更改为数字,然后才能添加,然后我必须将其更改回十六进制格式! 如果我添加的数字也是以十六进制字符串开头,或者您考虑到我在所有这些开始之前从十六进制颜色中删除了#
,则还有更多步骤。
当然有一种方法可以用更少的步骤做到这一点! (我的意思不是把它全部放在一行(parseInt("0x"+"aaaaaa",16)+0x010101).toString(16)
或使用速记,我的意思是实际上做的操作更少。)
有没有办法让Javascript停止使用十进制进行所有数学运算并使用十六进制代替? 或者是否有其他一些方法可以让 Javascript 更轻松地与 Hex 一起工作?
不,没有办法告诉 JavaScript 语言默认使用十六进制整数格式而不是十进制。 您的代码尽可能简洁,但请注意,当您将“parseInt”与基数一起使用时,您不需要预先添加“0x”基数指示符。
以下是我将如何解决您的问题:
function addHexColor(c1, c2) {
var hexStr = (parseInt(c1, 16) + parseInt(c2, 16)).toString(16);
while (hexStr.length < 6) { hexStr = '0' + hexStr; } // Zero pad.
return hexStr;
}
addHexColor('aaaaaa', '010101'); // => 'ababab'
addHexColor('010101', '010101'); // => '020202'
这个怎么样:
var hexValue = "aaaaaa"; hexValue = (parseInt(hexValue, 16) + 0x010101).toString(16); document.writeln(hexValue); // outputs 'ababab'
如果使用 parseInt,则无需添加 0x 前缀。
我认为接受的答案是错误的。 十六进制颜色表示不是线性的。 但是相反,给 R、G 和 B 分配了 3 组两个字符。
因此,您不能只添加一个整数并期望 RGB 正确添加。
For Example
n1 = '005500'; <--- green
n2 = '00ff00'; <--- brighter green
添加这些数字应该会产生更绿的绿色。 无论如何,添加绿色应该增加红色以增加。 但是通过做公认的答案正在做的事情,就像将整数视为一个数字一样,那么您将结转大于 f,f+1 = 10 的数字。
you get `015400` so by adding greens the RED increased .... WRONG
添加 005500 + 00ff00 应该导致 = 00ff00。 您不能在最大绿色中添加更多绿色。
对于正在寻找可以在不超出单个元组范围的情况下添加和减去 HEX 颜色的函数的人,我在几分钟前编写了这个函数来做到这一点:
export function shiftColor(base, change, direction) {
const colorRegEx = /^\#?[A-Fa-f0-9]{6}$/;
// Missing parameter(s)
if (!base || !change) {
return '000000';
}
// Invalid parameter(s)
if (!base.match(colorRegEx) || !change.match(colorRegEx)) {
return '000000';
}
// Remove any '#'s
base = base.replace(/\#/g, '');
change = change.replace(/\#/g, '');
// Build new color
let newColor = '';
for (let i = 0; i < 3; i++) {
const basePiece = parseInt(base.substring(i * 2, i * 2 + 2), 16);
const changePiece = parseInt(change.substring(i * 2, i * 2 + 2), 16);
let newPiece = '';
if (direction === 'add') {
newPiece = (basePiece + changePiece);
newPiece = newPiece > 255 ? 255 : newPiece;
}
if (direction === 'sub') {
newPiece = (basePiece - changePiece);
newPiece = newPiece < 0 ? 0 : newPiece;
}
newPiece = newPiece.toString(16);
newPiece = newPiece.length < 2 ? '0' + newPiece : newPiece;
newColor += newPiece;
}
return newColor;
}
您将基色作为参数 1 传递,将更改作为参数 2 传递,然后根据您的意图将“add”或“sub”作为最后一个参数传递。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.