Question

我有一个想要以任意十六进制数显示的图标。图标样本位于下方，但由于颜色可以是任何颜色，我如何通过输入HTML颜色为其着色？背景必须是透明的，因为它将成为地图上的精确点。关于如何做到这一点的任何想法？

enter image description here

Answer 1

Here是我会使用的方法。

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

问题是，这会溢出别针的边框，你将失去覆盖地图的能力，所以你需要找到一种方法来剪裁背景项，使其成为精确的形状。针和透明超出其边缘。

您可以尝试创建一个形状相同的简单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边框四舍五入和旋转创建该形状，具体取决于您的浏览器支持。这是一个css生成的引脚，它接近你需要的形状，但还没有完全出现:(显然，代码是特定于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/

Answer 2

我不认为这可以使用CSS在客户端完成 - 我使用服务器端函数创建具有指定颜色的位图（可能缓存结果），然后从HTML调用它：

<img src="createicon.ashx?name=truck&color=0xff0000">

原始位图应该使用预定义的背景颜色 - 让我们说是红色，而非背景区域中没有任何红色部分，那么您的代码应该查找所有红色像素并将其替换为百分比新背景颜色与原始像素中红色的百分比相对应 - 例如如果原始像素为50％红色且新颜色为蓝绿色，则像素应为50％青色。

有关如何更改位图颜色的一些信息，请参阅here。

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

2 个答案: