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上的鼠標事件

回答

相關問題