Tạo đối tượng "trong suốt" cho các sự kiện chuột?

Question

Tôi đang làm việc trên một dự án có HTML5 Canvas và KineticJS. Một lớp phủ nửa trong suốt (một nhóm hoặc lớp KineticJS) được đặt trên toàn cảnh. Vấn đề là: Các sự kiện chuột được liên kết với các đối tượng KineticJS trong lớp phủ này không được xử lý.

Làm cách nào để tạo lớp phủ này (hoặc bất kỳ đối tượng nào khác) "trong suốt" cho sự kiện chuột?

LƯU Ý: Câu hỏi chỉ là về Canvas, không có yếu tố HTML nào khác can thiệp vào nó. (. Để làm gì rõ ràng được hỏi dưới đây)

Answer 1

Giả sử bạn có nghĩa là các phần tử HTML được đặt trên giá vẽ của bạn, hãy thử nhìn vào sự kiện con trỏ: pointer events at MDN

ví dụ

#foo { 
    pointer-events:none; 
} 

Answer 2

Có bạn có thể nhấp chuột qua các nút trên xuống các nút phía dưới tương tự như con trỏ-sự kiện: none

Bạn chỉ cần nói với đối tượng hàng đầu của bạn không lắng nghe sự kiện ... như thế này:

myTopObject.setListening(false); 

Bây giờ tất cả các sự kiện chuột sẽ bong bóng xuống đối tượng dưới cùng.

Xem này SO câu trả lời cho mã và Fiddle: pointer-events in Kineticjs

Answer 3

Thiết opacity ở mức lớp cũng đặt opacity vào mức độ đối tượng.

layer.setOpacity(0.1); 

"Sự kiện chuột bị ràng buộc với các đối tượng KineticJS trong lớp phủ này không được xử lý".

Hmm, sự kiện chuột được liên kết với đối tượng được xử lý mặc dù lớp phủ (lớp) của bạn có độ mờ là 0. điều này có vẻ hoạt động tốt, tôi không biết bạn đang làm gì.

"Làm cách nào để tạo lớp phủ này (hoặc bất kỳ đối tượng nào khác)" trong suốt "cho sự kiện chuột?" Đối với tôi, di chuột qua/cả hai đều hoạt động tốt ở cấp lớp để làm cho nó trong suốt một nửa.

layer.on('mouseover', function() { 
    this.setOpacity(0.5); 
    this.draw(); 
    }); 

    layer.on('mouseout', function() { 
    this.setOpacity(1); 
    this.draw(); 
    }); 

Bạn có thiếu layer.draw() không?