Question

我正在开发一个树控件，用户可以在其中设置树项目的背景颜色。为了指示当前选择的树项目，我正在其周围绘制边框。

我要解决的问题是为边框选择一种对比色。当仅涉及一种颜色并且您需要适当的对比色时，这很容易做到。但是，在这种情况下，您需要树本身的背景色和所选树项目的背景色，并且您希望它们的颜色都与之相反。

此屏幕快照显示了选定的树项目及其边框。相反，如果选择了“蝙蝠”项目，则不会看到边框。请记住，树背景颜色不一定是白色，如图所示。

我也一直在尝试其他方法，而不是使用边框来指示所选项目，但到目前为止还没有任何想法。欢迎提出建议。

Answer 1

chroma.js可能有一些有用的方法。例如，https://vis4.net/chromajs/#chroma-scale可用于获得介于两种颜色中间的颜色。

var midColor = chroma.scale([colorA, colorB])(0.5);

根据其工作原理，您还可以考虑通过在结果上使用https://vis4.net/chromajs/#color-set将色相从该中点旋转180度。

或者，其https://vis4.net/chromajs/#quick-start文档中的第一个示例从两种颜色生成调色板。

chroma.scale(['#fafa6e','#2A4858']).mode('lch').colors(6)

Answer 2

通常情况下，笔会想到一个解决方案。我已经对标记进行了重构，以使边框和所选项目的树状项目之间保持一定距离。这看起来比原始实现更好，并且可以处理所有背景颜色用例。这是更新的用户界面。