Разрешить событиям мыши проходить через экземпляр Fabrix js Canvas? - PullRequest
Новая
       58

Разрешить событиям мыши проходить через экземпляр Fabrix js Canvas?

0 голосов
/ 07 апреля 2020

Прошло несколько лет с тех пор, как я использовал Fabricjs, так что извините, если это базовый c вопрос

Я добавляю элемент Canvas размера окна поверх некоторых элементов кнопок, которые я также хочу, чтобы пользователь мог щелкать.

Есть ли в Fabricjs свойство, позволяющее событиям мыши проходить к базовым элементам? Я просматривал документы, но ничего не нашел

1 Ответ

0 голосов
/ 07 апреля 2020

Вы можете использовать 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>

Вы можете посмотреть, как вы будете проверять и другие случаи, я надеюсь.

...