Có cách nào để đính kèm trình xử lý sự kiện vào đối tượng được vẽ trên Canvas HTML5 mà không theo dõi các điểm không? Chúc mừng, TôiSự kiện đối tượng canvas HTML5
Trả lời
Hãy thử Kinetic JS
http://www.html5canvastutorials.com/advanced/html5-canvas-path-mouseover/
Hãy xem Cake. Đó là một plug-in đồ thị cảnh cho các phần tử canvas. Bạn sẽ có thể đính kèm các trình xử lý sự kiện vào các đối tượng canvas với nó.
Bạn cũng có thể xem KineticJS - nó được thiết kế để gắn trình nghe sự kiện vào các hình dạng trên màn hình càng đơn giản càng tốt trong khi gắn bó với các mẫu Canvas API. Bạn có thể kiểm tra một ví dụ ở đây:
http://www.html5canvastutorials.com/advanced/html5-canvas-path-mouseover/
Tôi nghĩ rằng câu trả lời là (nhưng không có poster khác đang sử dụng thuật ngữ) mà không có hệ thứ nhất hỗ trợ lớp cho các sự kiện trên đồ họa nguyên thủy được vẽ trên canvas HTML5. Đó không phải là để nói rằng nó không phải là có thể viết một người biết lắng nghe, chỉ đơn thuần rằng nếu bạn muốn làm điều đó bạn phải sử dụng một API như Kinetic JS như có thể thấy ở
http://www.html5canvastutorials.com/advanced/html5-canvas-path-mouseover/
Tôi nghĩ rằng, KineticJS đủ cho hầu hết các nhu cầu của bạn. Nhưng hãy đảm bảo rằng bạn giữ các sự kiện có nguồn gốc HTML5 từ các sự kiện KineticJS. Tôi đang đối mặt với một số vấn đề trên những dòng này. sẽ cập nhật cho bạn nếu tôi tìm thấy thứ gì đó. Kính trọng
- 1. Sự kiện di chuột qua canvas HTML5
- 2. HTML5 canvas nhấp chuột kiện
- 3. Canvas HTML5: Nhận sự kiện khi vẽ xong
- 4. đính kèm các sự kiện bàn phím vào html5 canvas
- 5. HTML5 Xóa đối tượng được vẽ trước đó trong canvas
- 6. Vẽ mũi tên trên Canvas HTML5 giữa hai đối tượng
- 7. HTML5 Canvas: Biểu tượng độ
- 8. Tạo đối tượng "trong suốt" cho các sự kiện chuột?
- 9. HTML5 canvas khung tiên tiến
- 10. Xác định đối tượng nào trên màn hình được nhấp trong html5 canvas javascript?
- 11. Tìm hiểu đối tượng nào đã được nhấp vào một html5 Canvas
- 12. HTML5 Canvas set z-index
- 13. Sự kiện video HTML5 jQuery
- 14. "Xóa" trong html5 canvas
- 15. HTML5 Canvas: Phóng to
- 16. html5 canvas strokeStyle?
- 17. html5, thêm một trình xử lý sự kiện vào một hình ảnh được vẽ trên canvas
- 18. Tìm tọa độ của sự kiện HTML5 Canvas (nhấp), với đường viền
- 19. Tách trong canvas HTML5?
- 20. Html5 Canvas Limitations
- 21. Chèn từ trong HTML5 Canvas
- 22. HTML5 Canvas Creative Alpha-Blending
- 23. WPF canvas VisibilityThay đổi sự kiện
- 24. WPF: Canvas Sự kiện Không làm việc
- 25. HTML5 Canvas eraser
- 26. Html5 Phương thức Canvas isPointInPath chỉ xác định đối tượng cuối cùng
- 27. HTML5 Canvas: tốt hơn để vẽ lại các đối tượng hoặc sử dụng bitmap?
- 28. vẽ đối tượng/hình ảnh trên canvas
- 29. HTML5 Canvas - Strokes khác nhau
- 30. HTML5 Canvas filltext và font-face
Trong khi Kinetic sẽ cho phép bạn (dường như) gắn trình xử lý sự kiện vào các phần tử canvas, nó được thiết kế cho hoạt ảnh và kết quả là sẽ liên tục vẽ lại trang. Nếu bạn có canvas phức tạp (rất nhiều đối tượng), việc vẽ lại này có thể làm chậm khung hình của bạn xuống đến điểm không sử dụng được. – mikemaccana
Kể từ phiên bản 3, KineticJS hiện chỉ vẽ các đối tượng đã di chuyển một cách thông minh. Ngoài ra, nó nhanh hơn các phiên bản trước đó. Dưới đây là ví dụ về kiểm tra căng thẳng của chú giải công cụ sử dụng 10.000 hình dạng: http://www.html5canvastutorials.com/labs/html5-canvas-10000-shape-stress-test-with-kineticjs/ –