Theo dõi Canvas HTML

Question

Tôi đang cố gắng tạo thứ gì đó trong HTML5/Canvas để cho phép truy tìm hình ảnh và cảnh báo nếu bị lệch khỏi đường dẫn được xác định trước.

Tôi đã tìm ra cách tải hình ảnh bên ngoài vào canvas và cho phép các sự kiện chuột rút/di chuột qua nó để vẽ hình ảnh, nhưng những gì tôi gặp khó khăn khi quay đầu là so sánh hai.

Hình ảnh đều có màu đen đơn giản trên viền trắng, vì vậy từ những gì tôi có thể nói một sự kiện kiểu getPixel có thể biết nếu có màu đen bên dưới nơi đã được vẽ hoặc bên dưới nơi con chuột đang bật.

tôi có thể làm điều đó chỉ với vị trí chuột, nhưng điều đó sẽ đòi hỏi việc xác định con đường của mỗi phác thảo hình ảnh (và có một số công bằng, vì thế lý tưởng muốn làm điều đó bằng cách phân tích các hình ảnh bên dưới) ..

Tôi đã nói rằng nó có thể với Flash, nhưng muốn tránh điều đó nếu có thể để tương thích với các nền tảng không flash (cụ thể là ipad) có thể được duy trì vì chúng là mục tiêu chính cho trang chạy.

Bất kỳ thông tin chi tiết hoặc hỗ trợ nào sẽ được đánh giá cao!

Answer 1

Tôi nghĩ bạn đã xúc động khi tiếp cận thẳng tiến nhất để giải quyết vấn đề này.

Với hình ảnh đen trắng trên canvas, bạn có thể đính kèm một trình xử lý sự kiện mousemove vào phần tử để theo dõi vị trí con trỏ. Nếu người dùng đang giảm xuống left-mouse, bạn muốn xác định xem họ có đang theo dõi đường dẫn được xác định trước hay không. Để làm cho mọi thứ ít gây phiền nhiễu cho người dùng, tôi sẽ tiếp cận phần này của vấn đề bằng cách lấy mẫu một cửa sổ nhỏ pixel. Một cái gì đó xung quanh 9x9 pixels có lẽ sẽ là một kích thước tốt. Lưu ý rằng bạn muốn kích thước cửa sổ của mình là odd ở cả hai chiều để bạn có lấy mẫu đối xứng theo cả hai hướng.

Sử dụng vị trí của con trỏ, gọi getImageData() trên canvas. Cuộc gọi chức năng của bạn sẽ trông giống như sau: getImageData(center_x - Math.floor(window_size/2), center_y - Math.floor(window_size/2), window_size, window_size) để bạn có được một cửa sổ mẫu pixel có tâm nằm ngay trên con trỏ. Từ đó, bạn có thể thực hiện kiểm tra đơn giản để xem có bất kỳ pixel không phải màu trắng nào trong cửa sổ hay bạn có thể nghiêm ngặt hơn và yêu cầu một số pixel không phải màu trắng nhất định để khai báo người dùng trên đường dẫn. Điều quan trọng để làm cho công việc này tốt, tôi nghĩ rằng, là đảm bảo rằng người dùng không nhận được phản hồi tiêu cực khi họ đi chệch bit nhỏ nhất từ ​​đường dẫn (trừ khi đó là những gì bạn muốn). Tại thời điểm đó, bạn có nguy cơ làm cho người dùng khó chịu và thất vọng.

Cuối cùng, nó đến một trong hai cách tiếp cận. Hoặc bạn tải đường dẫn vector thực tế cho ứng dụng để so sánh con trỏ của người dùng với (ví dụ: point-in-path kiểm tra) hoặc bạn lấy mẫu dữ liệu pixel từ hình ảnh. Nếu bạn không yêu cầu độ chính xác hoàn hảo của việc kiểm tra point-in-path, tôi nghĩ rằng lấy mẫu pixel sẽ hoạt động tốt.

---

Edit: Tôi chỉ đọc lại câu hỏi của bạn và nhận ra rằng, dựa trên các bạn tham khảo để getPixel(), bạn có thể sử dụng WebGL cho việc này. Cách tiếp cận cho WebGL sẽ giống nhau, ngoại trừ bạn tất nhiên sẽ sử dụng các chức năng khác nhau. Tôi không nghĩ rằng bạn cần phải yêu cầu WebGL, tuy nhiên, như một bối cảnh 2D nên cung cấp cho bạn đủ tính linh hoạt (trừ khi các ứng dụng có liên quan nhiều hơn nó có vẻ).