Fabric.js画布不能捕捉Google Chrome上的鼠标事件

谷歌搜索了很多并没有得到任何有用的提示/解决方案。我有这个简单的HTML页面，包括一些CSS样式，jQuery的，jQuery的UI和显然Fabric.js;在document.ready上，我启动了一个ajax调用并在画布上呈现了一些东西。到现在为止一切似乎都很好，但是当我需要捕捉一些鼠标事件时，我什么也得不到。此行为仅在Chrome上显示（当前版本为25.0.1364.97）;在Firefox或Internet Explorer中一切正常（第9节）。下面是一些JS代码的：Fabric.js画布不能捕捉Google Chrome上的鼠标事件

$(document).ready(function() { 
    //setup canvas etc. 
    eCanvas = new fabric.Canvas('EViewport', { 
      backgroundColor: 'rgba(255, 50, 50, .3)', 
      selection: true, 
      selectionColor: 'blue', 
      selectionLineWidth: 2 
     }); 
    EViewport = $("#CanvasContainer"); 
    viewW = EViewport.width(); 
    viewH = EViewport.height(); 
    eCanvas.setWidth(viewW); 
    eCanvas.setHeight(viewH); 

    eCanvas.observe('object:selected', function(options) { 
      if (options.target) { 
      console.log('an object was selected! ', options.target.type); 
      } 
     }); 
    eCanvas.observe('mouse:down', function() { 
      console.log('mouse click! '); 
     }); 
    eCanvas.on('mouse:down', function() { 
      console.log('mouse click! '); 
     }); 
    eCanvas.on('mousedown', function() { 
      console.log('mouse click! '); 
     }); 

    //... render some rectangles and stuff... 
});

而这里的HTML结构（注意，Eviewport.js文件包含以前粘贴代码）：

<!DOCTYPE html> 
<html> 
<head> 
     <link rel="stylesheet" href="baseCss/jquery-ui.css" type="text/css"> 

     <script type="text/javascript" src="baseJs/jquery.js"></script> 
     <script type="text/javascript" src="baseJs/jquery-ui.js"></script> 

     <script type="text/javascript" src="Eviewport.js"></script> 
     <link type="text/css" rel="stylesheet" href="Eviewport.css"> 
     <script type="text/javascript" src="baseJs/Fabric.js"></script> 
</head> 

<body> 

    <div id="MainContainer"> 
     <div id="CanvasContainer"> 
      <canvas id="EViewport"> 
       Canvas is not supported 
      </canvas> 
     </div> 
    </div> 
</body> 
</html>

选择功能不镀铬或者工作一段时间他们在IE和Firefox上工作。我尝试了很多事情（正如你可以看到我试图用canvas.on更改canvas.observe），更改了jquery和jqueryui版本，但没有任何更改。在谷歌浏览器上使用开发人员工具不会显示太多内容。 css给出的html元素没有z-index，我尝试禁用不同的js和css，但是这并没有解决问题。

我注意到问题也显示在Fabric.js的演示页面上（刚刚试过http://fabricjs.com/stickman/）;渲染作品，效果也没有鼠标事件或选择工作。

这是一个错误？

来源

2013-02-28 CaNNaDaRk

好吧，终于找到了什么不工作。我有一个Wacom设备连接，看起来像最新的Chrome版本设置了一个关于“启用触摸设备”的标志，这是打破我的代码。

的简单解决方案可以被改变铬标志（铬：//标志/）

来源

2013-02-28 15:41:58 CaNNaDaRk

Fabric.js画布不能捕捉Google Chrome上的鼠标事件

回答

相关问题