>現在，涉及圓形和正方形的演示很好，但是我想創建一個示例，展示了對矢量圖形的合法，實際使用的示例。那麼實時統計量如何呢？這是我當前的鏈輪使用線圖的屏幕截圖，該圖繪製了實時“鏈輪”使用級別。最重要的是，這是一個快點。
>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中文網其他相關文章！
