4

これをたくさんグーグルで検索しましたが、有用なヒントや解決策は得られませんでした。いくつかのCSSスタイル、jQuery、jQuery-ui、そして明らかにFabric.jsを含むこの単純なhtmlページがあります。on document.readyajax呼び出しを起動し、キャンバスに何かをレンダリングします。今まではすべて問題ないようですが、マウスイベントをキャッチする必要がある場合は何も得られません。この動作は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/を試してみました)。レンダリングは機能し、エフェクトも機能しますが、マウスイベントや選択は機能しません。

これはバグですか?

4

1 に答える 1

6

わかりました、ついに機能していないものが見つかりました。Wacom デバイスが接続されており、最新の Chrome バージョンが「タッチ対応デバイス」に関するフラグを設定しているようで、コードが壊れています。

簡単な解決策は、クロムフラグを変更することです(chrome://flags/)

関連記事: https ://github.com/kangax/fabric.js/issues/450

于 2013-02-28T15:41:58.700 に答える