Come posso disegnare un cerchio su una tela?

Sto usando javascript e una tela per disegnare una scala dal punto di vista matematico (per misurare la coppia, include newton-metri e piedi-libbre). Stavo posizionando le mie zecche usando la trigonometria, e disegnando linee ad arco usando arc, naturalmente. Il problema si presentava quando avevano bisogno di allinearsi, ma c'era una strana distorsione. Ho quindi disegnato un cerchio molto grande e l'ho confrontato con una selezione circolare in GIMP e c'era una distorsione. I cerchi sono coerenti ogni 45 gradi attorno ai cerchi, ma tra questi nodi il cerchio disegnato dalla tela devia verso l'esterno, proprio come un ottagono che può essere arrotondato troppo verso l'esterno per approssimare un cerchio.Come posso disegnare un cerchio su una tela?

Perché si verificano queste distorsioni? Come posso disegnare un cerchio veramente circolare su una tela?

Questo è il codice che ho utilizzato per generare il mio cerchio distorto.

<!DOCTYPE html> 
<html> 
    <body> 
    <canvas width=8000 height=8000 id='myCanvas'></canvas> 
    <script> 
     var canvas = document.getElementById('myCanvas'); 
     var context = canvas.getContext('2d'); 
     context.beginPath(); 
     context.arc(4000, 4000, 3200, 0, Math.PI*2, false); 
     context.lineWidth = 1; 
     context.strokeStyle = '#ff0000'; 
     context.lineCap = 'square'; 
     context.stroke(); 
    </script> 
    </body> 
</html>

Questo non può essere minimo, non so della rilevanza delle context.lineCap, ma è un residuo del codice di questo si basa su. La figura seguente mostra la differenza tra il cerchio disegnato da GIMP e il cerchio disegnato da Chrome screenshot

fonte

2015-07-14 Robbie Mckennie

hai qualche codice di esempio? –

@ JonSaw Sicuro. Aggiungerò il codice che ho usato per generare la mia cerchia. –

Esegui il tuo codice su Safari (8.0.6), Chrome (43.0.2357.132) e Firefox (36.0.4) - sembrava buono per il mio. JS Bin [qui] (https://jsbin.com/pogehixibu/edit?html,output). Solo per curiosità, quale browser stai usando? –

Questo è Chromium Bug #164241 (dichiarato risolto, anche se la correzione non può aver fatto fuori ancora). La risposta breve è: Chrome è approximating circles with composite Bezier curves.

Non ero in grado di replicare questo me stesso su Chromium (43.0.2357.130, Ubuntu) ma si verifica su Firefox 39, anche se non sono riuscito a trovare un rapporto bug simile per Firefox. Il fatto che sia corretto ogni 90 gradi (non 45, almeno non per me) indica che i cerchi sono approssimati da 4 curve, poiché gli endpoint della curva sono garantiti come corretti.

Per fortuna c'è una soluzione semplice: creare un percorso composto da più di 4 curve. 8 o anche 6 dovrebbero essere sufficienti per i raggi che stai usando, ma puoi usarne di più se vuoi giocare sul sicuro. Oppure potresti aumentare il numero di curve in funzione del raggio, sebbene il calcolo della funzione ottimale (il minimo n che produrrà un cerchio accurato per un dato raggio r) non sia banale.

context.beginPath(); 
var n=8; // 4 is the default behaviour. higher is better, also slower 
for (var i=0; i<n; i++) { 
    context.arc(4000, 4000, 3200, Math.PI*2*i/n, Math.PI*2*(i+1)/n, false); 
} 
context.stroke();

Vedi anche this question.

(E sì, Linecap è una falsa pista.)

fonte

2015-07-17 06:08:19 hexwab

Quanto profondamente deludente. Credo che dovrò solo scrivere la mia, migliore approssimazione. –

Come posso disegnare un cerchio su una tela?

risposta

Problemi correlati