В этом многого не было и не было никакого полезного подсказки/решения. У меня есть эта простая 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.observe с canvas.on), изменил версии jquery и jqueryui, но ничего не изменилось. Использование инструментов разработчика на Google Chrome не показывает многого. Нет z-индекса на html-элементах, заданных css, и я попытался отключить разные js и css, но это не решило проблему.
Я заметил, что проблема показывает также на демонстрационной странице Fabric.js (только что попробовал http://fabricjs.com/stickman/); рендеринг, эффекты, но не события мыши или выбор работы.
Это ошибка?