2

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

在此处输入图像描述 在此处输入图像描述 在此处输入图像描述

4

2 回答 2

1

这是我将使用的方法。

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

问题是这会溢出图钉的边界，并且您将失去让它覆盖地图的能力，因此您需要找到一种方法来剪辑背景项目，使其与图钉的形状完全相同，并且是透明的边缘之外。

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

<?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 或诸如此类的东西将文本从“填充：橙色”更改为任何颜色你要。

另一种类似的方法是使用 canvas 元素来绘制该形状。您还可以尝试使用 CSS 边框圆角和旋转来制作该形状，具体取决于您的浏览器支持的内容。这是一个 css 生成的图钉，它接近您需要的形状，虽然还没有：（显然，代码是特定于 webkit 的）

​&lt;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/

于 2012-05-14T23:36:35.803 回答
0

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

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

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

有关如何更改位图颜色的信息，请参见此处。

于 2012-05-14T20:49:43.920 回答