允许鼠标事件通过 Fabrixjs Canvas 实例？

Question

我已经使用了几年Fabricjs了，如果这是一个基本问题，请原谅我

我Canvas在一些按钮元素上添加了一个窗口大小的元素，我还希望用户能够单击这些元素。

是否有Fabricjs允许鼠标事件传递到底层元素的属性？我一直在查看文档，但没有找到任何东西

Answer 1

我最终使用“指针事件：无”作为内联样式应用于 2 个画布元素（第一个类名为“lower-canvas”，第二个类名为“upper-canvas”）和包装 div .Canvas(...) 从我提供的画布元素创建的构造函数。这让鼠标事件传递到下面的元素。// Setting up the vanilla canvas to pass to FabricJSconst canvasEl = document.createElement("canvas");...canvasEl.style.pointerEvents = "none"; // This gets copied onto the 2 canvas elements that FabricJS will create belowdocument.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

Answer 2

你可以使用document.elementsFromPoint. 点击左上角：let doc, html, bod, M, I, mobile, S, Q, aC, rC; // for use on other loadsaddEventListener('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)=>{&nbsp; var w = within || doc;&nbsp; return w.querySelector(selector);}Q = (selector, within)=>{&nbsp; var w = within || doc;&nbsp; return w.querySelectorAll(selector);}aC = function(){&nbsp; const a = [].slice.call(arguments);&nbsp; a.shift().classList.add(...a);&nbsp; return aC;}rC = function(){&nbsp; const a = [].slice.call(arguments);&nbsp; a.shift().classList.remove(...a);&nbsp; return rC;}// can do below on another page except end loadconst canvas = I('canvas'), ctx = canvas.getContext('2d'), test = I('test');ctx.fillStyle = '#070'; ctx.fillRect(0, 0, canvas.width, canvas.height);test.onclick = ()=>{&nbsp; console.log('test worked');}canvas.onclick = function(e){&nbsp; const all = doc.elementsFromPoint(e.clientX, e.clientY);&nbsp; for(let q of all){&nbsp; &nbsp; switch(q){&nbsp; &nbsp; &nbsp; case test:&nbsp; &nbsp; &nbsp; &nbsp; test.click();&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; }&nbsp; }}canvas.onmousemove = function(e){&nbsp; const all = doc.elementsFromPoint(e.clientX, e.clientY);&nbsp; for(let q of all){&nbsp; &nbsp; switch(q){&nbsp; &nbsp; &nbsp; case test:&nbsp; &nbsp; &nbsp; &nbsp; aC(this, 'pointer');&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; case this:&nbsp; &nbsp; &nbsp; &nbsp; rC(this, 'pointer');&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; }&nbsp; }}}); // end load*{&nbsp; box-sizing:border-box;}html,body{&nbsp;padding:0; margin:0;}html,body,#outer,#canvas{&nbsp; width:100%; height:100%;}#outer{&nbsp; position:relative;}#outer>*{&nbsp; position:absolute;}.pointer{&nbsp; cursor:pointer;}<div id='outer'>&nbsp; <input id='test' type='button' value='test' />&nbsp; <canvas id='canvas'></canvas></div>我希望您也可以看到如何测试其他情况。