我目前被分配了一个项目来使用 javascript 创建以下内容,您可以在此处查看最终产品:http://i1245.photobucket.com/albums/gg583/leetpete1994/Infografic-TrafficSources_zpsf50dfa6d.png
我的工作基本上是获取提供的 PDF 并创建一种动态显示图像所传达的数据的方法。数据本身将在别处计算,所以我只需担心接受每个烧杯的值,并适本地填充它们。
我现在的想法:
现在我的想法是使用 Canvas 。我创建了一个烧杯类,然后将 5 个烧杯作为该类的一个实例。这非常有效,我坐在一 block Canvas 上, Canvas 的正确位置有 5 个空烧杯。我将每个烧杯除以 100;然后我可以正确地填充每个像素所需的像素数量,无论它恰好是多少百分比,但这是我遇到问题的地方。每个烧杯都是不同的形状,随着每个烧杯被装满,形状也会发生变化。因此,我很难真正吸取烧杯中的液体。其次,如果我确实设法正确吸入液体,它将覆盖烧杯的细节。如果我先做液体然后再做烧杯,那将是相反的问题。我也尝试过使用两个堆叠的 Canvas 并控制液体的不透明度,但没有运气得到我想要达到的效果。
那么,是否有更好的方法来执行此操作,或轻松地将奇怪的形状绘制到 Canvas 上?我开始认为使用 Canvas 不会是最好的方法。我知道我可以为每个不同液位的图像制作几张图像,但我想避免在最终产品中使用那么多图像。
最佳答案
我认为您应该使用揭示方法来解决问题...
每个空烧杯一张图片,每个装满液体的一张图片以及烧杯的细节。
然后将液体图像放置在底部并向上显示尽可能多的像素..
<div class="beaker">
<div class="liquid"></div>
</div>
和
.beaker, .liquid {
background: url('path-to-sprite-image.png') 0 100% no-repeat;
width:130px;
}
.beaker {
height:280px;
position:relative;
}
.liquid {
background-position: right 100%;
bottom:0;
left:0;
position:absolute;
}
关于javascript - 使用 javascript 处理动态信息图的好方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19203044/