Kéo và thả trong khung hình mozilla

Question

Tôi muốn triển khai một ngăn vẽ (tương tự nhưng phiên bản nhỏ hơn với những gì mà Visio cung cấp cho biểu đồ luồng) trong canvas mozilla.

Có hỗ trợ cho điều này không?

Tôi đã sử dụng jQuery cho đến bây giờ để tạo hình chữ nhật và di chuyển chúng xung quanh. Trong khi điều này là dễ dàng ở đây .. các đường xử lý (kết nối giữa các đối tượng) là một nỗi đau thực sự. Tôi đang sử dụng một số cách thô để màu pixel bằng pixel trong javascript và nó không phải là tìm kiếm tốt cũng không thể mở rộng và tôi cũng cần phải xây dựng rất nhiều chức năng để làm cho các kết nối dính vào một tập hợp các đối tượng, vv

Có ai biết nếu canvas và các chức năng có sẵn ở đó sẽ làm cho cuộc sống của tôi dễ dàng hơn.

Mọi gợi ý cho giải pháp tốt hơn trong trường hợp này là gì. (Tôi hy vọng nó không phải là applet)

Xin cảm ơn trước.

Answer 1

Hãy làm theo liên kết này: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

LMK nếu nó giúp!

bước sau có thể giúp:
1. Tạo và thêm một tấm vải vào DOM:
var myCanvas = document.createElement('canvas'); document.body.appendChild(myCanvas);
2. Thiết lập chiều rộng chiều cao của canvas:
myCanvas.width=200; myCanvas.height=200;
3. Lấy bối cảnh của vải và bắt đầu vẽ trên đó:
var gc = myCanvas.getContext('2d');
4. Mã để vẽ hình chữ nhật:
gc.strokeRect(50,50,50,50);
5. Sau đó, thêm mousehandlers (mo được sử dụng, mousemove, mouseup)/touchhandlers (touchdown, touchmove, touchup) trên canvas và xử lý chuyển động cho phù hợp.

Answer 2

Có, bạn có thể sử dụng canvas cho điều đó. Vẽ các hình dạng đơn giản và mở rộng chúng khá đơn giản.

Nhưng nếu bạn cần chỉnh sửa hình dạng sau khi vẽ, bạn sẽ phải đầu tư thêm một số công việc. Canvas vẽ trong một cái gọi là "chế độ ngay lập tức", có nghĩa là, rằng nó không biết những gì bạn đã vẽ ngay sau khi bạn đã vẽ nó. Nó không theo dõi các hình vẽ. Nếu bạn cần rằng bạn sẽ phải thực hiện điều đó một mình.

Tôi đã thực hiện việc này bằng chức năng isPointInPath() có thể được sử dụng để kiểm tra xem người dùng có nhấp vào một điểm cụ thể hay không. Tôi theo dõi các đối tượng đã vẽ của mình bằng cách sử dụng mẫu MVC (Model-View-Controller), để tôi có thể tìm ra Shape đã được nhấp vào.

Một giải pháp thay thế khác có thể là fabrics.js phải rất gần với những gì bạn cần.

Answer 3

Một trong những jQuery plugin là tuyệt vời cho panes vẽ:

jCanvas Đối với bản vẽ bất kỳ hình dạng đơn giản và thậm chí phức tạp

sketch.js để vẽ nói chung.

Chúng vừa phản hồi vừa tương thích.