JavaScript的HTML圖形（帶頂點）

Question

有沒有什麼方法可以用HTML創建基本的2D形狀，除了矩形和圓形，使用JavaScript？

例如，假設我們有一個<canvas></canvas>（因爲任何其他元素不能被修改，我想，還是？的方式）元素，width:100px，height:300px和background:black。 如何將它的右上角（右上頂點）移動到不同的位置以創建不同的形狀，然後是矩形？

來源：

point one: x: 0px /y: 0px 
point two: x: 100px/y: 0px 
point three: x: 100px/y: 300px 
point four: x: 0px /y: 300px 

要：

point one: x: 0px /y: 0px 
point two: x: 120px/y: -20px 
point three: x: 100px/y: 300px 
point four: x: 0 /y:300px 

（point two是一個改變）

是否有任何JavaScript的圖形庫，HTML，將使這是一個簡單的任務？沿着drawable.vertices[1].move(20, -20)這條線移動第二個頂點20px在x上和-20px在y上。

Answer 1

你看過pixi.js嗎？ （http://www.pixijs.com/）它是一個使用WebGL的二維庫，但如果瀏覽器不支持WebGL，則會回退到畫布。如果你想去3D庫還考慮three.js所（http://threejs.org/）

專門爲畫布另一個相當受歡迎的圖形庫是拉斐爾庫（http://raphaeljs.com/）

更新：

初始化一個帶拉斐爾的畫布，一個偏移量爲100px，尺寸爲300x300px的元素。請注意，我在這裏依賴於JQuery來獲取「mycanvas」元素。

var paper = Raphael($("#mycanvas"), 100, 300,300); 

吸引你需要使用路徑功能是通過在SVG路徑字符串拉斐爾的「紙」對象（如果你有興趣閱讀更多關於SVG路徑標準，你可以找到一個任意多邊形一些信息在這裏：http://www.w3.org/TR/SVG/paths.html#PathData）

paper.path("M150,0L200,100L100,100Z").attr("fill","#F00"); 

末離開路徑屬性填充多邊形紅色。

在兩行中，我使用SVG路徑生成了一個紅色三角形。比我想象的更輕巧。

現在基於您的最後一條評論，您希望這是互動的。這不會像你想象的那麼簡單。

你正在努力實現將要求你什麼粗略的方法：

1）保持頂點數組，你要變成一個SVG字符串。

2）您將不得不跟蹤畫布上的鼠標按下事件。每次找到鼠標停止事件時，您都必須檢查它是否位於頂點列表中的頂點上，因此爲錯誤添加一個ε是明智的，以便用戶不必精確點擊一個像素，而是在靠近頂點的區域。您可以使用裝箱方法爲您提供某種圍繞頂點的box epsilon。創建對鼠標向下的頂點的引用。

3）當鼠標移動事件，同時鼠標按鈕也向下，並且有一個活動頂點時，您想根據鼠標座標修改該頂點的位置。

4）在鼠標上移事件中，根據您在多邊形中有多少個頂點，您可以使用paper.clear（）清除紙張，然後通過從您的圖像生成新的SVG路徑字符串來重繪路徑頂點列表並使用paper.path（...）添加新的SVG字符串。

這裏是對plnkr一個鏈接，我創建畫出你三角的多邊形：http://plnkr.co/edit/AK5zO1ZqBTerMf9AzS88?p=preview

最後獎勵更新：

所以我決定在plnkr做到這一點給你，讓你可以瞭解如何操作路徑並強制重繪。本質上，JavaScript爲三角形繪製兩條路徑，並在每個三角形頂點的末端繪製藍色圓點。我在控制路徑元素的拖動中註冊了兩個委託函數，以便它們中的每一個都可以更新它們的X和Y值以及相應的三角形頂點。看看這個plnkr，讓我知道是否沒有任何意義。

http://plnkr.co/edit/o5QHap7NV1SYIbsS76f5

享受！ :)