TA貢獻1836條經驗 獲得超13個贊
我最終使用“指針事件：無”作為內聯樣式應用于 2 個畫布元素（第一個類名為“lower-canvas”，第二個類名為“upper-canvas”）和包裝 div .Canvas(...) 從我提供的畫布元素創建的構造函數。
這讓鼠標事件傳遞到下面的元素。
// Setting up the vanilla canvas to pass to FabricJS
const canvasEl = document.createElement("canvas");
...
canvasEl.style.pointerEvents = "none"; // This gets copied onto the 2 canvas elements that FabricJS will create below
document.body.appendChild(canvasEl);
// Start of FabricJS part
const canvas = new fabric.Canvas(canvasEl); // Creates the div and 2 canvas elements and replaces what was passed in with them (in the DOM)
canvas.wrapperEl.style.pointerEvents = "none"; //"wrapperEl" refers to the div. I found it by looking through https://github.com/fabricjs/fabric.js/blob/master/dist/fabric.js to see where the upperCanvasEl & lowerCanvasEl were attached
TA貢獻1752條經驗 獲得超4個贊
你可以使用document.elementsFromPoint. 點擊左上角：
let doc, html, bod, M, I, mobile, S, Q, aC, rC; // for use on other loads
addEventListener('load', ()=>{
doc = document; html = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id);
mobile = nav.userAgent.match(/Mobi/i) ? true : false;
S = (selector, within)=>{
var w = within || doc;
return w.querySelector(selector);
}
Q = (selector, within)=>{
var w = within || doc;
return w.querySelectorAll(selector);
}
aC = function(){
const a = [].slice.call(arguments);
a.shift().classList.add(...a);
return aC;
}
rC = function(){
const a = [].slice.call(arguments);
a.shift().classList.remove(...a);
return rC;
}
// can do below on another page except end load
const canvas = I('canvas'), ctx = canvas.getContext('2d'), test = I('test');
ctx.fillStyle = '#070'; ctx.fillRect(0, 0, canvas.width, canvas.height);
test.onclick = ()=>{
console.log('test worked');
}
canvas.onclick = function(e){
const all = doc.elementsFromPoint(e.clientX, e.clientY);
for(let q of all){
switch(q){
case test:
test.click();
break;
}
}
}
canvas.onmousemove = function(e){
const all = doc.elementsFromPoint(e.clientX, e.clientY);
for(let q of all){
switch(q){
case test:
aC(this, 'pointer');
break;
case this:
rC(this, 'pointer');
break;
}
}
}
}); // end load
*{
box-sizing:border-box;
}
html,body{
padding:0; margin:0;
}
html,body,#outer,#canvas{
width:100%; height:100%;
}
#outer{
position:relative;
}
#outer>*{
position:absolute;
}
.pointer{
cursor:pointer;
}
<div id='outer'>
<input id='test' type='button' value='test' />
<canvas id='canvas'></canvas>
</div>
我希望您也可以看到如何測試其他情況。
舉報