如何使用RaphaelJS繪製現有的矢量圖像

Question

我開始學習RaphaelJS，但它似乎確實是一個陡峭的學習曲線，因爲我不熟悉JavaScript。但它似乎是一個很好的圖書館，我願意花時間學習它。

我想知道的是：

1. 怎麼能夠在RaphaelJS使用現有的矢量圖像

   （如果我下載一個「載體」的形象，我可以告訴RaphaelJS繪製座標？）

2. 有沒有辦法將圖像（jpg，gif或其他）轉換成RaphaelJS可以使用的矢量圖形。

我的困惑是，在示例頁面上，圖像繪製在座標中，對我來說很有意義。但是，如果從網上下載一個矢量圖像，座標在哪裏？

我的目標是在我的網頁上製作可點擊的圖像，就像Australia的地圖上的RaphaelJS示例，該地圖上有一個懸停事件。

Answer 1

要讀取的最簡單的矢量圖像格式是svg，因爲svg是XML，XML只是純文本。

使用類似Illustrator或Inkscape的東西將您的矢量圖像轉換爲svg，然後在文本編輯器中打開它。你會發現大多數形狀像<path />和<rect />在Raphael中有直接的等價關係。例如，<path />對象定義其d屬性路徑的座標，它有在拉斐爾的語法相同的路徑：

<path 
    style="fill:none;stroke:#000000;stroke-width:12" 
    d="m 116.6,832.4 c 0,0 5.8,85.5 127.6,87.0 121.8,1.4 137.7,-79.7244" 
/> 

您可以在轉換到拉斐爾的：

var path = paper.path(
    "m 116.6,832.4 c 0,0 5.8,85.5 127.6,87.0 121.8,1.4 137.7,-79.7244" 
); 
path.attr({fill:'none',stroke:'#000000';'stroke-width':12}); 

採取注意到，雖然任何應用於對象和組的變換（<g />元素），您必須在Raphael中重複它們。例如說，你看到以下內容：

<path 
    style="fill:none;stroke:#000000;stroke-width:12" 
    d="m 116.6,832.4 c 0,0 5.8,85.5 127.6,87.0 121.8,1.4 137.7,-79.7244" 
    transform="translate(-124,370)" 
/> 

然後創建在拉斐爾的路徑後，你需要應用translate()：

path.translate(-124,370); 

你或許可以編寫一個腳本來SVG文件轉換爲拉斐爾語法或將svg文件作爲文本加載到瀏覽器中，並使用瀏覽器的XML DOM解析器來處理它並使用Raphael進行繪製。