帶有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中文網其他相關文章！