-1

我正在为游戏创建一个计划工具。想象一下两个具有不同射程和每秒伤害的 2D 静态炮台。我想根据损坏用不同颜色绘制这些范围，其比例类似于http://www.celtrio.com/support/documentation/coverazone/2.1.0/ui.viewmode.heatmapcolorscale.html

我得到了使用 CSS 边框半径的那部分。我的问题是，如果范围重叠，重叠区域不会显示综合伤害。

我发现 heatmap.js http://www.patrick-wied.at/static/heatmapjs/但它不允许您为每个点设置不同的半径。我也找不到关闭梯度的方法……这些枪在其最大射程的伤害与最小射程相同。我意识到这通常是热图的重点，哈哈，但我不太确定我应该在谷歌上搜索什么。

我想到了一个 PHP 解决方案，它可以使用不同级别的不透明度来创建灰度图像来表示不同的损坏。然后我会遍历所有像素并根据比例重新着色它们。但这太慢了。当用户在屏幕上拖动枪时，它需要尽可能接近实时地更新。

可能有一种非常简单的方法可以做到这一点，也许是 CSS 过滤器，但我找不到任何东西。有任何想法吗？谢谢！

4

2 回答 2

2

CSS 是这个工作的错误工具——你真的应该使用 SVG 或 Canvas 来做这样的事情。使用适当的图形系统来实现复杂的图形效果要比尝试用 CSS 创建的形状来破解它要容易得多。

例如，在 SVG 中，您只需要使用该fill功能用您想要的任何颜色填充每个区域。在此处查看示例 SVG 图像。这是一个 SVG 维恩图，其中重叠区域的颜色与父圆完全不同。Canvas 具有类似的功能。

您可能还想考虑使用诸如RaphaelJS或PaperJS 之类的 Javascript 库来帮助您解决此问题。（使用 Canvas 意味着您无论如何都在使用一些 Javascript，它也会使 SVG 更易于使用）。

但是，如果您必须使用 CSS 来完成，如果您希望元素显示出来以便颜色在它们相互叠加时合并，那么您将需要使用某种不透明效果。

要么opacity:0.5或 rgba 颜色作为背景。

这和 CSS 一样好；您将无法在重叠部分获得任意颜色；只是分层不透明度效果的颜色组合。

于 2013-06-06T13:26:17.887 回答
1

如果你查看 heatmap.js 的代码，你会发现它是这样工作的：

  1. 在画布上绘制圆圈，使用从透明到不透明百分比的径向渐变（取决于点的强度）。
  2. 对该灰度图像进行颜色映射（将每个灰度值转换为 256 种颜色数组中的一种）。

您的问题可以以相同的方式解决，但在步骤 1 中绘制一个恒定不透明度和可变半径的圆。

于 2013-06-06T13:24:48.777 回答