2013-06-17 3 views
7

Ho un problema con questo semplice file HTML5:HTML5/JavaScript File con Canvas non funziona con Chrome e Firefox su Windows 8 ma funziona con tutti i browser su Windows 7. perché?

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>

Si tratta di un file HTML5 semplice con JavaScript implementazioni in cui si può semplicemente disegnare su una tela. Funziona bene con tutti i browser su Windows 7 (il mio vecchio portatile). Ma con Chrome & Firefox su Windows 8 (il mio nuovo laptop) non si può disegnare nulla, non funziona!

modalità Disegno su Windows 7:

  • chrome: OK
  • firefox: OK
  • opera: OK
  • IE10: OK
  • safari: OK

Disegno modalità su Windows 8:

  • chrome: NO
  • firefox: NO
  • opera: OK
  • IE10: OK
  • safari: OK

Qualcuno può piacere qual è il problema? È strano, che DrawingMode non funzioni su Chrome e Firefox ma funzioni bene su Opera, IE10 e Safari su Windows 8.

+1

Hai un touchpad collegato al computer? – kangax

+3

Mi sembra a posto su Chrome 28.0.1500.72/FF 22 + Win 8 – Rannnn

+0

Hai gli stessi problemi in Win8 sia in modalità desktop sia in modalità metropolitana? – Spudley

risposta

1

Suppongo che il tuo laptop Windows 7 non abbia avuto il contatto. Ciò significava che tutti i browser dovevano acquisire eventi mouse/touchpad. Tuttavia, se disponi di un laptop touch Windows 8, i browser possono avere diverse origini di input (ad esempio touchpad o touchscreen). Browser diversi possono utilizzare diverse implementazioni di gestione di ogni input che causano questa discrepanza che stai vedendo.

5

Fabric.js pensa che il tuo Chrome/Firefox abbia il touch abilitato in modo che si attenga agli eventi touch invece degli eventi del mouse.

Non è chiaro per me se si tratti di un bug in Chrome/Firefox o in fabric o entrambi.

Vai a questa https://github.com/kangax/fabric.js/issues/670 e anche questo https://github.com/kangax/fabric.js/issues/450

+0

È qualcosa di cui pensiamo di occuparci molto presto. Proverò a risolverlo nella prossima versione 1.4 alla fine di ottobre. – kangax

+1

Questo è già stato risolto, btw – kangax