7

この単純な html5 ファイルに問題があります。

 var canvas = window.__canvas = new fabric.Canvas('c');
 canvas.backgroundColor = '#efefef';
 canvas.freeDrawingBrush.width = 10;
 canvas.renderAll();

 document.getElementById('drawingMode').addEventListener('click', function(e) {
   e.target.innerHTML = canvas.isDrawingMode ? 'Start freedrawing' : 'End freedrawing';
   canvas.isDrawingMode = !canvas.isDrawingMode;
 });
canvas {
  border: 1px solid #ccc;
  padding: 20px;
}
/*.canvas-class {
    border-left: 20px solid black;
    padding: 20px;
}*/
<button id="drawingMode">Start freedrawing</button>
<div class="wrapper">
  <canvas id="c" class="canvas-class" width="400" height="300" style="border:1px solid #ccc;"></canvas>
</div>

これは、キャンバスに簡単に描画できる JavaScript 実装を備えた単純な html5 ファイルです。Windows 7 (私の古いラップトップ) のすべてのブラウザーで問題なく動作します。しかし、Windows 8 (私の新しいラップトップ) の Chrome と Firefox では、何も描画できません。

Windows 7 の描画モード:

  • クロム: わかりました
  • ファイアフォックス: OK
  • オペラ：OK
  • ie10: わかりました
  • サファリ: OK

Windows 8 の描画モード:

  • クロム:いいえ
  • ファイアフォックス:いいえ
  • オペラ：OK
  • ie10: わかりました
  • サファリ: OK

誰かが問題を教えてくれますか? DrawingMode が chrome と firefox では機能しないのに、Opera、IE10、および Windows 8 の Safari では正常に機能するのは奇妙です。

4

2 に答える 2

5

Fabric.js は、Chrome/Firefox でタッチが有効になっていると認識しているため、マウス イベントではなくタッチ イベントにアタッチされます。

これが Chrome/Firefox のバグなのか、fabric のバグなのか、あるいはその両方なのか、はっきりとはわかりません。

このhttps://github.com/kangax/fabric.js/issues/670と、このhttps://github.com/kangax/fabric.js/issues/450も参照してください。

于 2013-08-07T14:48:02.097 に答える
1

あなたのWindows 7ラップトップにはタッチ機能がなかったと思います。これは、すべてのブラウザがマウス/タッチパッド イベントをキャプチャする必要があることを意味していました。ただし、Windows 8 のタッチ ラップトップを使用している場合、ブラウザーは異なる入力ソース (タッチパッドやタッチスクリーンなど) を持つことができます。ブラウザーが異なれば、各入力を処理するための実装も異なる可能性があり、この不一致が発生する可能性があります。

于 2013-08-06T17:57:00.047 に答える