これをたくさんグーグルで検索しましたが、有用なヒントや解決策は得られませんでした。いくつかのCSSスタイル、jQuery、jQuery-ui、そして明らかにFabric.jsを含むこの単純なhtmlページがあります。on document.ready
ajax呼び出しを起動し、キャンバスに何かをレンダリングします。今まではすべて問題ないようですが、マウスイベントをキャッチする必要がある場合は何も得られません。この動作はChrome(現在のバージョン25.0.1364.97)でのみ表示されます。FirefoxまたはInternetExplorer(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のバージョンを変更しましたが、何も変更されていません。GoogleChromeで開発者ツールを使用してもあまり表示されません。CSSによって提供されたhtml要素にz-indexがないので、別のjsとCSSを無効にしてみましたが、問題は解決しませんでした。
問題がFabric.jsのデモページにも表示されていることに気づきました(http://fabricjs.com/stickman/を試してみました)。レンダリングは機能し、エフェクトも機能しますが、マウスイベントや選択は機能しません。
これはバグですか?