小编CaN*_*aRk的帖子

Fabric.js画布未在Google Chrome上捕获鼠标事件

谷歌搜索了很多,没有得到任何有用的提示/解决方案.我有这个简单的html页面,包括一些css样式,jquery,jquery-ui和很明显的Fabric.js; 在document.ready上我启动了一个ajax调用并在画布上呈现了一些内容.到目前为止一切似乎都很好但是当我需要捕捉一些鼠标事件时我什么也得不到.此行为仅在Chrome上显示(当前版本25.0.1364.97); 一切正常在Firefox或Internet Explorer上使用(v.9).这是一些js代码:

$(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...
});
Run Code Online (Sandbox Code Playgroud)

这是html结构(注意Eviewport.js文件包含以前粘贴的代码): …

events google-chrome canvas javascript-events fabricjs

4
推荐指数
1
解决办法
2709
查看次数