Javascript繪制動態線

Question

我正在尋找允許用戶繪制一條線（在圖像上）的Javascript代碼。

就像Photoshop中的線條工具一樣（例如）：

用戶單擊圖像，拖動鼠標（在鼠標拖動時動態繪制起點和鼠標點之間的線）。

我還需要一個可調用的函數來發送頁面的開始和結束坐標。

我發現這個非常好的區域選擇腳本： http ： //www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/

我發現了許多繪制線條的腳本（以及JS中的其他形狀），但找不到我要找的東西。

謝謝

Answer 1

由於沒有標准的繪圖方法，如果要支持舊瀏覽器和IE，則需要使用庫。 該庫將處理使用SVG或Microsoft的VML繪圖的跨平台問題

我推薦Raphael JS

Answer 2

raphael.js是一個用於javascript（MIT許可）的輕量級渲染工具，適用於FF，Safari，Chrome和IE6 +。

它使用SVG作為前3和VML用於IE，但API在瀏覽器中是相同的並且非常甜。

http://raphaeljs.com/

例如

// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);

// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");

// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff"); 

我用它來拖動畫線，可以保證它的易用性

Answer 3

可以在此處找到用於在javascript中繪制線條而不需要任何外部庫的跨瀏覽器解決方案： http ： //bytes.com/topic/javascript/answers/88771-drawing-vector-lines-javascript

這適用於所有瀏覽器，包括IE。

Answer 4

考慮使用canvas元素來顯示圖像。 然后，在其上繪制一條線（或其他任何東西）是微不足道的。

Answer 5

如果你的數學足夠好，可以（盡管很瘋狂）在沒有canvas標簽的情況下使用（根據需要）使用其中一個的大多數現代瀏覽器：

• -webkit-transform：旋轉
• -moz-transform：旋轉
• -o-變換旋轉
• 三叉戟矩陣濾波器

通過創建例如。 一個1px高的div，例如。 您的“線”的邊框頂部，並使用鼠標拖動事件來定位和旋轉它。

瘋狂就是這樣，但這將是一個非常有趣的運動。 （你應該使用類似Raphael JS的東西，這是跨瀏覽器和理智的 - 見上文）

Answer 6

我正在做類似的事情。 在畫布上畫一條線非常簡單。 您可以從我的代碼處獲取。

http://p-func.com/html5_test/test2.html

只需按照mousedown監聽器。

雖然我發現，當想要加載圖像時，raphael庫可能更好用。 我看到了這一點，因為Canvas似乎就像一個平面圖像。 因此，如果我想為它添加一個目標，那么允許用戶操縱該圖像，它不會讓我（除非有我遺漏的東西）。

Raphael允許您繪制並仍然使用這些繪圖和圖像作為對象。

Answer 7

支持時你可以使用canvas，在IE中使用濾鏡旋轉功能。 這里適用於：

http://www.gatekeeperel.co.uk/interactives/web.html