Question

我想在Less中计算cubehelix颜色方案，这样我就可以调整一些变量。我认为这需要CIE L * a * b颜色系统。我遇到了Chroma.js，这似乎可以用于计算颜色，但现在我想把它整合到Less中。

Answer 1

Mike Bostock已在JavaScript中实现并扩展了cubehelix，作为D3.js可视化库的plugin（请参阅examples）。

您可以使用Bostock插件的代码为Less编写custom function。

从github下载并解压缩源代码：https://github.com/less/less.js/archive/master.zip
运行npm install

创建一个名为lib/less/functions/cubehelix.js的文件，并将以下内容写入其中：

var Color = require("../tree/color"),
functionRegistry = require("./function-registry");

function d3_interpolate(y) {
return function(a, b) {
      a = a.toHSL();
      b = b.toHSL();
      var radians = Math.PI / 180;
      var ah = (a.h + 120) * radians,
          bh = (b.h + 120) * radians - ah,
          as = a.s,
          bs = b.s - as,
          al = a.l,
          bl = b.l - al;

      if (isNaN(bs)) bs = 0, as = isNaN(as) ? b.s : as;
      if (isNaN(bh)) bh = 0, ah = isNaN(ah) ? b.h : ah;

      return function(t) {
        var h = ah + bh * t,
            l = Math.pow(al + bl * t, y),
            a = (as + bs * t) * l * (1 - l),
            cosh = Math.cos(h),
            sinh = Math.sin(h);
        return "#"
            + hex(l + a * (-0.14861 * cosh + 1.78277 * sinh))
            + hex(l + a * (-0.29227 * cosh - 0.90649 * sinh))
            + hex(l + a * (+1.97294 * cosh));
      };
    };
  }

function hex(v) {
    var s = (v = v <= 0 ? 0 : v >= 1 ? 255 : v * 255 | 0).toString(16);
    return v < 0x10 ? "0" + s : s;
}

functionRegistry.addMultiple({
cubehelix: function(y,a,b,t) {
return new Color(d3_interpolate(y.value)(a,b)(t.value).slice(1),1);
}   
});

打开lib/less/function/index.js文件，并在require("./cubehelix");

return functions;

运行grunt dist（以创建less.js的新版本）

现在提供以下Less代码：

p{color: cubehelix(1,red,blue,1);}
p{color: cubehelix(1,red,blue,0.5);}
p{color: cubehelix(1, hsl(300,50%,0%), hsl(-240,50%,100%), 0.3);}

输出：

p {
  color: #766cfd;
}
p {
  color: #21ba40;
}
p {
  color: #4c4c4c;
}

如何在Less.js中计算cubehelix颜色方案？

1 个答案: