带有RaphaëlJavaScript库的Easy Vector图形

Raphaël是由Atlassian的Dmitry Baranovskiy撰写的小型JavaScript库，可让您在网页中创建和操纵向量图形。它的使用非常简单，并且跨浏览器兼容；支持Internet Explorer 6.0，Safari 3.0，Firefox 3.0和Opera 9.5。内部Raphaël在其他浏览器中使用IE和SVG中的VML。

>现在，涉及圆形和正方形的演示很好，但是我想创建一个示例，展示了对矢量图形的合法，实际使用的示例。那么实时统计量如何呢？这是我当前的链轮使用线图的屏幕截图，该图绘制了实时“链轮”使用级别。最重要的是，这是一个快点。

>

html很简单； 我们只需要一个标题和容器来容纳我们的画布 - div元素：

开始，我们必须生成一个新的图形画布。我一直喜欢将所有代码放在对象定义中以创建一个单独的名称空间，因此我们将从以下代码开始：>

<h1>Current Sprocket Usage: <span ></span></h1>
<div ></div>

>使用窗口.onload事件，我们调用我们的spgraph.init方法。在此方法中，我们使用Raphael（“ Graph”，400，200）创建画布。第一个参数是我们的容器元素的ID，其他两个代表宽度和高度。我们将返回的帆布对象存储在我们的spgraph.graph属性中。 使用下一行，我们创建一个矩形并设置一些属性：

>

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();
};

RECT方法允许我们绘制一个指定X坐标，Y坐标，宽度，高度和可选的角半径的矩形。请注意，我们还将呼叫呼叫ATTAD方法来设置填充颜色。所有Raphaël图形对象都支持ATTAD方法，并且您可以设置一系列属性。 Raphaël支持链接所有方法，我们将尽快利用这一方法。到目前为止，我们的努力导致了这个可爱的黑色矩形，并带有圆角。

现在让我们添加条纹！为此，我们将以下循环添加到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>

每个更新，我们都会使用类似的lineto方法扩展了行

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");

不要忘记看到它在演示中工作。好的，所以也许链轮使用图并不是我承诺的合法，实用的例子，但至少您只需付出一点努力就可以看到Raphaël可以实现的目标。网站上的文档尚未完成，但是无论如何要锻炼并不难。你为什么不去自己？快速，简单，跨浏览器兼容，网络上的向量图形从未如此简单。

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库是什么？

Raphael JavaScript库是一种强大的工具，可让开发人员在Web上使用矢量图形。它简化了创建，操纵和动画矢量图形的过程，对于想要在其网站或Web应用程序中添加视觉吸引力元素的开发人员来说，它是一个绝佳的选择。该库是跨浏览器兼容的，并使用SVG W3C建议和VML作为创建图形的基础，这意味着它几乎可以在任何浏览器中工作。

>

>我如何开始使用Raphael JavaScript库？

可以使用Raphael Javabael Javascript librals启动，您需要启动raphael javascript Library，以便将库包括在内。您可以通过从官方网站下载库并将其链接在HTML文件中来做到这一点。包含库后，您可以通过调用Raphael函数来开始创建矢量图形，并指定将绘制图形的纸张对象的宽度和高度。该库提供了几种动画方法，包括动画方法，使您可以在指定的持续时间内对对象的转换进行动画化。您还可以控制动画的放松，并指定动画完成后要执行的回调函数。

>如何使用Raphael JavaScript库来创建形状？例如，您可以使用RECT方法来创建矩形，创建圆圈的圆方法以及创建椭圆的椭圆方法。每种方法都需要特定的参数，例如左上角的坐标以及circle方法的中心坐标和半径的宽度和高度。

>

>我如何将样式应用于raphael Javascript库中的形状？此方法使您可以设置形状的各种属性，例如其填充颜色，笔触颜色，纵向宽度和不透明度。您还可以使用atter方法将转换应用于形状，例如缩放，旋转和翻译。

>我可以与Raphael JavaScript库中的形状交互吗？例如，您可以使用单击方法将单击事件处理程序连接到形状，或者悬停方法连接鼠标和鼠标out事件处理程序。这些方法允许您创建响应用户操作的交互式图形。

如何在Raphael JavaScript库中分组形状？

>

您可以使用SET方法在Raphael Javascript库中分组形状。此方法会创建一组可以作为单个单元操纵的形状。您可以使用按下方法将形状添加到集合中，并立即将转换或动画应用于集合中的所有形状。

>

>我可以使用Raphael Javascript库创建复杂的图形吗？除了基本形状外，该库还提供了创建路径的方法，该方法可用于创建复杂的形状和设计。您还可以组合多个形状和路径来创建复杂的图形。

>如何用Raphael JavaScript库创建的图形？

>

图形图形用Raphael Javascript创建的图形在浏览器中呈现并可以作为SVG或VML导出，并在browser上导出。您可以通过调用纸质对象上的ToString方法来访问图形的SVG或VML源代码。此方法返回一串SVG或VML代码，该字符串代表论文的当前状态。

>

>在Raphael JavaScript库上我可以在哪里找到更多资源？

>在Raphael JavaScript库上的更多资源，您可以访问官方网站，该网站可以访问该库的全面文档。您还可以查看各种在线教程和博客文章，这些文章提供有关如何使用库的分步指南。此外，您可以在github和codepen等代码共享平台上找到许多示例和演示。

。

以上是带有RaphaëlJavaScript库的Easy Vector图形的详细内容。更多信息请关注PHP中文网其他相关文章！