html5, thêm một trình xử lý sự kiện vào một hình ảnh được vẽ trên canvas

Question

Tôi đang thử nghiệm với html5 và tôi có một hình ảnh nhỏ thả xuống, người dùng chọn và hình ảnh và nó vẽ nó vào canvas bằng cách sử dụng drawImage();

Tôi không thể tìm ra cách thêm trình xử lý sự kiện vào hình ảnh mới được vẽ trên canvas.

Tôi đã thử đặt nó trong một biến như sau:

var newImg = ctx.drawImage(myImage, 200, 200); 

và sau đó thêm một eventlistener đó, nhưng nó dường như không làm việc.

newImg.addEventListener('mousedown', onImgClick, false); 

Cách chính xác để thực hiện điều này là gì.

Answer 1

Canvas không phải là retained-mode bề mặt vẽ. Nó chỉ là một hình ảnh phẳng; không có đối tượng bên trong nó để ràng buộc các sự kiện, và drawImage không trả về gì cả.

Bạn sẽ phải phát hiện các nhấp chuột trên <canvas> và kiểm tra xem chúng có nằm trong hình chữ nhật [200, 200, 200 + w, 200 + h] theo cách thủ công hay không. Hoặc, nếu bạn muốn vẽ chế độ được giữ lại, hãy xem xét sử dụng SVG thay vì canvas.

Answer 2

Nếu bạn đang tìm kiếm loại tương tác này, <canvas> có lẽ không phải là những gì bạn muốn. Bạn đang tìm kiếm SVG. Có một thư viện tuyệt vời được gọi là Raphaël mà làm việc với SVG một miếng bánh trên tất cả các trình duyệt, ngay cả trên IE6. Nó cũng hoàn toàn tương thích với jQuery, vì vậy bạn có thể làm:

var paper = Raphael(10, 50, 320, 200); 
var img = paper.image("/path/to/img.png", 10, 10, 80, 80); 
$(img).click(onImgClick); 

tôi khá chắc chắn điều này sẽ đối xử với bạn tốt hơn và dễ dàng hơn để sử dụng hơn <canvas>.

Lưu ý: Raphaël đi kèm với một số người trợ giúp cho các sự kiện cơ bản như "nhấp" và "mousedown", chỉ cần img.click(onImgClick), nhưng nếu bạn đã sử dụng thư viện như jQuery, bạn có thể nhất quán và sử dụng xử lý sự kiện của thư viện.

Answer 3

Để thực hiện điều này mà không cần sự giúp đỡ của JS:

Mặc dù bạn không thể đính kèm một event listener với bối cảnh mà bạn gọi drawImage(); bạn CÓ THỂ đính kèm người nghe sự kiện vào Canvas chính nó.

myCanvasElement = document.getElementById('canvasElement'); 
myCanvasElement.addEventListener("click", someFunction, false); 

Nếu bạn cần có hình ảnh này mà bạn vẽ, bạn có thể chồng các đối tượng canvas và tạo đối tượng mới cho mỗi hình ảnh bạn vẽ.