css - 通过 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 中。

Answer 1

Alon，您尝试实现的目标可以通过 jQuery + CSS 来完成，或者尝试使用 Kineticjs javascript 库来处理 HTML Canvas 可能会更好。如果您需要将实时数据绑定(bind)到您的图形，那么您应该将 Angularjs 与 Kineticjs 或 jQuery 结合使用(如果您无法避免)。

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