gpt4 book ai didi

google-chrome - Fabric.js Canvas 无法在 Google Chrome 上捕捉鼠标事件

转载 作者:行者123 更新时间:2023-12-03 08:13:22 25 4
gpt4 key购买 nike

在谷歌上搜索了很多,但没有得到任何有用的提示/解决方案。
我有这个简单的 html 页面,包括一些 CSS 样式、jQuery、jQuery-ui 和显然 Fabric.js;在 document.ready我启动了一个 ajax 调用并在 Canvas 上渲染了一些东西。到目前为止,一切似乎都很好,但是当我需要捕捉一些鼠标事件时,我什么也得不到。此行为仅在 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...
});

这是 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 上工作时也不适用于 chrome。
我尝试了很多东西(如您所见,我尝试将 canvas.observe 更改为 canvas.on ),更改了 jQuery 和 jQueryui 版本,但没有任何改变。
在 Google Chrome 上使用开发人员工具并没有显示太多。
CSS 给出的 html 元素上没有 z-index,我尝试禁用不同的 js 和 CSS,但这并没有解决问题。

我注意到问题显示也显示在 Fabric.js 的演示页面上(刚刚尝试了 http://fabricjs.com/stickman/ );渲染工作,效果也一样,但没有鼠标事件或选择工作。

这是一个错误吗?

最佳答案

好的,终于找到了不起作用的地方。
我有一个 Wacom 设备,看起来最新的 Chrome 版本设置了一个关于“启用触摸的设备”的标志,这破坏了我的代码。

一个简单的解决方案是更改 chrome 标志 (chrome://flags/)

相关文章:
https://github.com/kangax/fabric.js/issues/450

关于google-chrome - Fabric.js Canvas 无法在 Google Chrome 上捕捉鼠标事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15138777/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com