>现在，涉及圆形和正方形的演示很好，但是我想创建一个示例，展示了对矢量图形的合法，实际使用的示例。那么实时统计量如何呢？这是我当前的链轮使用线图的屏幕截图，该图绘制了实时“链轮”使用级别。最重要的是，这是一个快点。
>html很简单； 我们只需要一个标题和容器来容纳我们的画布 - div元素：
开始，我们必须生成一个新的图形画布。我一直喜欢将所有代码放在对象定义中以创建一个单独的名称空间，因此我们将从以下代码开始：
<h1>Current Sprocket Usage: <span ></span></h1> <div ></div>
>
var SpGraph = {
init : function(){
SpGraph.graph = Raphael("graph", 400, 200);
SpGraph.graph.rect(0, 0, 390, 110, 10).attr("fill", "#000");
}
}
window.onload = function () {
SpGraph.init();
};现在让我们添加条纹！为此，我们将以下循环添加到spgraph.init方法：
SpGraph.graph.rect(0, 0, 390, 110, 10).attr("fill", "#000");循环每次执行10次绘制一条线；第一个红线和其他线的灰线。 Raphaël路径方法初始化了绘图的路径模式，返回路径对象。它实际上并没有自我绘制任何东西；您必须使用可链的路径对象方法。 Moveto方法将图形光标移动到指定的X和Y坐标，Lineto方法从光标点绘制了一条线到指定的点。结果是下面的条纹背景：
>现在，我们必须绘制实际的图形线。垂直轴（由条纹表示）是使用率的百分比。水平轴将以10像素增量表示时间。在现实世界中，图表的每个更新都将通过AJAX调用获得每5秒钟，但是在这里我只创建随机值并每秒更新图形。再次，我们使用路径方法绘制5像素宽线。
>我们初始化路径并将其引用存储在spgraph.path属性中：
<h1>Current Sprocket Usage: <span ></span></h1> <div ></div>
var SpGraph = {
init : function(){
SpGraph.graph = Raphael("graph", 400, 200);
SpGraph.graph.rect(0, 0, 390, 110, 10).attr("fill", "#000");
}
}
window.onload = function () {
SpGraph.init();
};SpGraph.graph.rect(0, 0, 390, 110, 10).attr("fill", "#000");for(var x = 10; x < 110; x += 10) {
var c = (x > 10) ? "#333" : "#f00";
SpGraph.graph.path({stroke: c}).moveTo(0, x).lineTo(390,x);
}的经常询问有关简易矢量图形的问题
> Raphael JavaScript库是什么？Raphael JavaScript库是一种强大的工具，可让开发人员在Web上使用矢量图形。它简化了创建，操纵和动画矢量图形的过程，对于想要在其网站或Web应用程序中添加视觉吸引力元素的开发人员来说，它是一个绝佳的选择。该库是跨浏览器兼容的，并使用SVG W3C建议和VML作为创建图形的基础，这意味着它几乎可以在任何浏览器中工作。>我如何将样式应用于raphael Javascript库中的形状？此方法使您可以设置形状的各种属性，例如其填充颜色，笔触颜色，纵向宽度和不透明度。您还可以使用atter方法将转换应用于形状，例如缩放，旋转和翻译。
如何在Raphael JavaScript库中分组形状？
>我可以使用Raphael Javascript库创建复杂的图形吗？除了基本形状外，该库还提供了创建路径的方法，该方法可用于创建复杂的形状和设计。您还可以组合多个形状和路径来创建复杂的图形。
>在Raphael JavaScript库上我可以在哪里找到更多资源？
以上是带有RaphaëlJavaScript库的Easy Vector图形的详细内容。更多信息请关注PHP中文网其他相关文章！
