Tìm hiểu đối tượng nào đã được nhấp vào một html5 Canvas

Question

Giả sử tôi có một ứng dụng html5/canvas trong đó tôi có thể đặt các đối tượng trên một khung vẽ. Một số loại trình soạn thảo biểu đồ, giống như Visio (nhưng đơn giản hơn nhiều)

Có khung nào giúp tôi tìm đối tượng nào được nhấp/kéo không?

Một lựa chọn là để nắm bắt những sự kiện nhấp vấn và duyệt qua tất cả các đối tượng của tôi (một cách bán thông minh) và kiểm tra xem nó được nhấp/draged, nhưng Tôi ghét phải phát minh lại bánh xe :)

Answer 1

Thật không may là không có mô hình đối tượng cho những thứ bạn vẽ vào canvas. Bạn sẽ cần phải theo dõi mọi thứ bạn đã vẽ và kích hoạt các sự kiện riêng biệt khi bạn phát hiện các nhấp chuột, mouseup, mousedown, kéo. Điều đó có nghĩa là tạo một trình bao bọc cho tất cả các phương thức ngữ cảnh, lưu trữ các dòng/hình ảnh và các thuộc tính của chúng thành một COM (Mô hình đối tượng Canvas :) và các sự kiện kích hoạt cho mỗi dòng/hình ảnh

Tôi chưa thấy bất cứ điều gì có điều đó. Đây có thể là lô công việc, tôi đã cố gắng viết mã tùy chỉnh mỗi khi tôi cần thêm tương tác vào Canvas

Answer 2

Đối với ứng dụng kiểu Visio hoặc bất kỳ điều gì tương tác với đối tượng được vẽ là quan trọng, bạn ' tốt hơn với SVG. Đã có some open source projects mà bạn có thể sử dụng làm điểm bắt đầu. Vấn đề với SVG là, giống như với bất kỳ công cụ nặng nào của DOM, hiệu năng có thể làm giảm mạnh khi bạn có một số lượng lớn các đối tượng để thao tác.

Answer 3

Phiên bản ngắn gọn là bản thân Canvas không theo dõi được điều đó.

Nếu bạn không muốn phát minh lại bánh xe, hãy bắt đầu với mã mẫu của tôi từ hướng dẫn "Making and Moving Selectable Shapes on an HTML5 Canvas: A Simple Example." Nó cung cấp phần giới thiệu và nền tảng tốt để nhấp và kéo.

Answer 4

KineticJS là bạn của bạn: http://www.kineticjs.com

Nhìn vào cách dễ dàng này là: http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-tutorial/