通过CSS创建图像

Question

我正在尝试在CSS中做下一步：

当用户用鼠标悬停在所有图像上时，CSS 将被更改为：

在第2和第3张图片中，我需要让他能够按下小圆圈。我已经启用了它。

我没有成功地从小圆圈开始绘制蓝线（如图1所示）：

这条蓝线可以通过给定的输入向左或向右移动（100会将所有右侧的灰色形状着色，-100会将所有左侧的灰色形状着色。在此示例中，我假设用户插入参数：25。然后右侧灰色形状的四分之一被涂色）

请问有人能帮我吗？

蓝线在类PersonaCanvasMini中，与PersonaCanvas完全相同

非常感谢任何帮助！

这是我的jsfiddle：

http://jsfiddle.net/kyfha/74/

这是我的 HTML：

<div id="goalDetails" onmouseOver="addDetails();" onmouseout="removeDetails();">

    <div class="PersonaCanvas">
        <div class="smallCircle" onclick="showProjection();"></div>
        <div id="smallestCircle" style="display: none" onclick="showBurnRate();"></div>
    </div>

    <div id="details" style="display: none">
        <div id="dolarsDetails">77$</div>
        <div id="projOrBurn">Projection</div>
    </div>

    <div id="mainShape" class="bigCircle">
        <div id="cpaDetails">7.03</div>
    </div>

    <div class="PersonaCanvasMini"></div>
    <div id="mainLine" style="display:none"></div>
    <div id="secondaryLine" style="display:none"></div>
</div>

我的CSS在JSFiddle中。

- Alon Shmiel

---

你的代码编辑器没有 JavaScript。我认为你需要结合 CSS 和 JavaScript 才能获得你所要求的效果。 - DrCord

@DrCord 我把它放在了HTML的区域。谢谢。 - Alon Shmiel

你为什么认为CSS是最适合的技术呢？CSS不是一种图形语言，而是一种布局语言。你是否考虑过像SVG这样的替代方案？我可以肯定地说，在SVG中实现这个功能比在CSS中容易得多，特别是鼠标控制方面。HTML画布也是另一个你应该考虑的选项。有许多JS库可以用于SVG和Canvas，将使这个过程变得非常容易。 - Spudley

好的，谢谢。我正在使用Canvas进行工作。谢谢。 - Alon Shmiel

Answer 1

阿隆，你想要实现的目标可以使用jQuery + CSS或尝试使用Kineticjs JavaScript库来处理HTML画布。如果需要将实时数据绑定到图形上，则应该结合使用Angularjs和Kineticjs，或者与jQuery（如果无法避免）一起使用。

注意，Kineticjs非常容易学习和使用，我建议你从它开始： http://www.html5canvastutorials.com/kineticjs/html5-canvas-events-tutorials-introduction-with-kineticjs/

- GRowing