Dòng động JavaScript vẽ

Question

Tôi đang tìm mã Javascript để cho phép người dùng vẽ một đường kẻ (trên hình ảnh).

Cũng giống như các công cụ dòng trong Photoshop (ví dụ):

Người dùng nhấp chuột vào hình ảnh, kéo chuột (trong khi ranh giới giữa điểm bắt đầu và điểm chuột là tự động vẽ trên kéo chuột).

Tôi cũng sẽ cần một hàm có thể gọi để gửi trang tọa độ bắt đầu và kết thúc.

tôi đã tìm thấy này kịch bản rất đẹp để lựa chọn diện tích: http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/

và tôi đã tìm thấy nhiều kịch bản cho vẽ đường (và hình dạng khác trong JS), nhưng không thể tìm thấy những gì tôi đang tìm kiếm .

Cảm ơn

Answer 1

Vì không có phương pháp vẽ tiêu chuẩn, nếu bạn muốn hỗ trợ các trình duyệt cũ hơn và IE, , bạn sẽ cần sử dụng thư viện. Thư viện sẽ xử lý các vấn đề nền tảng của bản vẽ với SVG hoặc của Microsoft VML

Tôi khuyên bạn nên Raphael JS

Answer 2

Xem xét sử dụng phần tử canvas để hiển thị hình ảnh. Sau đó, vẽ một đường thẳng (hoặc bất kỳ thứ gì khác) trên đó là tầm thường.

Answer 3

Nếu toán học của bạn là đủ tốt, nó có thể (mặc dù điên) để làm điều đó mà không có thẻ canvas cho hiện đại nhất trình duyệt sử dụng một trong (nếu thích hợp):

• -webkit-transform: rotate
• -moz-transform: rotate
• -o-transform-rotate
• The Trident Matrix Filter

Bằng cách tạo ví dụ: một div cao 1px, ví dụ: một đường viền trên cùng cho 'đường kẻ' của bạn và sử dụng sự kiện kéo chuột đến vị trí và xoay nó.

Điên cuồng nằm theo cách này nhưng đó sẽ là một bài tập khá thú vị. (Bạn nên sử dụng một cái gì đó như Raphael JS, mà là qua trình duyệt và lành mạnh - xem ở trên)

Answer 4

raphael.js là một công cụ vẽ gọn nhẹ cho javascript (MIT được cấp phép) hoạt động trong FF, Safari, Chrome và IE6 +.

Nó sử dụng SVG cho 3 và VML đầu tiên cho IE nhưng API giống hệt nhau trên các trình duyệt và rất ngọt.

http://raphaeljs.com/

ví dụ:

// 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"); 

Tôi đã sử dụng nó để vẽ một đường trong khi kéo và có thể xác minh cho dễ sử dụng

Answer 5

tôi đang làm việc trên một cái gì đó tương tự. Vẽ một đường trên vải là khá đơn giản. Bạn có thể lấy từ mã của tôi ở đây.

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

Chỉ cần theo dõi người nghe.

Mặc dù tôi đã tìm thấy, khi muốn tải hình ảnh, thư viện raphael có thể tốt hơn để sử dụng. Tôi thấy điều này vì Canvas dường như hoạt động như một hình ảnh phẳng. Vì vậy, nếu tôi muốn thêm một mục tiêu vào nó, sau đó cho phép người dùng thao tác hình ảnh đó, nó sẽ không cho phép tôi (trừ khi có cái gì đó mà tôi đang thiếu).

Raphael cho phép bạn vẽ và vẫn sử dụng các bản vẽ và hình ảnh đó làm đối tượng.

Answer 6

Một giải pháp qua trình duyệt cho việc vẽ đường trong javascript, mà không đòi hỏi bất kỳ thư viện bên ngoài, có thể được tìm thấy ở đây: http://bytes.com/topic/javascript/answers/88771-drawing-vector-lines-javascript

này hoạt động trong tất cả các trình duyệt, bao gồm IE.

Answer 7

Khi được hỗ trợ, bạn có thể sử dụng canvas, trong IE bạn sử dụng chức năng xoay bộ lọc. Như ở đây hoạt động trên cả:

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