c# - 如何使用十六进制为图像着色？

Question

我有一个图标，我想以任意十六进制数显示它。图标示例如下，但由于颜色可以是任何颜色，我如何通过提供 HTML 颜色来为其着色？背景必须是透明的，因为它将成为 map 上的一个精确点。关于如何实现这一目标的任何想法？

Answer 1

Here是我会使用的方法。

您需要从该图像的一个没有颜色的版本开始——只有轮廓、总线和渐变所需的黑色和白色。您需要渐变具有 alpha 透明度，以便某些像素比其他像素更透明——然后您可以将任何颜色放在图像后面，颜色将会改变。成功!

问题是这会溢出 pin 的边界，你会失去让它覆盖 map 的能力，所以你需要找到一种方法来裁剪背景元素，使其成为 pin 的确切形状引脚并且超出其边缘是透明的。

您可以尝试创建一个形状相同的简单 SVG 图像并将其放在后面。我用了this tool创建这个橙色圆圈:

<?xml version="1.0" standalone="no"?>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="200" cy="190" rx="30" ry="30" style="fill:orange"/>
</svg>

通过一些工作，您可能能够获得与图钉相匹配的形状，然后当您将其放在透明图像后面时，您需要做的就是使用 Javascript 或诸如此类的东西将文本从“fill:orange”更改为到你想要的任何颜色。

另一种类似的方法是使用 Canvas 元素绘制该形状。您还可以尝试通过 CSS 边框圆 Angular 和旋转来获得创意，以制作该形状，具体取决于您的浏览器支持的内容。这是一个 css 生成的 pin，它接近您需要的形状，但还不够:(显然，代码是特定于 webkit 的)

​<div style="background-color: blue; -webkit-transform: rotate(-45deg); width:100px; height:100px; border-radius: 50px 60px 50px 0;"></div>

如果您想做一些可以在旧浏览器中工作的东西，您可以创建一堆 1px 高的不同长度的 div，以创建与透明图钉大小完全相同的东西。

<div class="constructedPin">
    <div style="width: 8px"></div>
    <div style="width: 12px"></div>
    <div style="width: 30px"></div>
    <div style="width: 35px"></div>
    <div style="width: 38px"></div>
    <div style="width: 40px"></div>
    <div style="width: 41px"></div>
                 (etc...)
</div>

<style>
 div.constructedPin div { height: 1px; background-color:whatever; margin: auto;}
</style>

然后就是简单的改变div的背景色了。这种方法听起来很复杂，但不会太难，而且实际上加载速度非常快，因为您可以对 div 进行硬编码，无需即时生成，而且 CSS 更新会快如闪电。

[编辑:] 我被带走了，做了一个小演示。显然，如果你有一张真实的图像，效果会更好——我只是快速地擦掉了它的颜色，以传达这个想法。

http://jsfiddle.net/eNfak/8/