Fahren Sie mit dem vorherigen Artikel Canvas Line Drawing Tutorial fort
Als wir das letzte Mal erwähnten, dass Leinwand manchmal 1 Pixellinien haben, die verschwommen sind und breiter zu sein scheinen, wie in der folgenden Abbildung gezeigt:
Solche Linien sind offensichtlich nicht das, was wir wollen.
Der Zweck dieses Artikels ist es, die Prinzipien herauszufinden und sie zu lösen.
Jeder weiß, dass die kleinste Anzeigegröße auf dem Bildschirm 1 Pixel ist. Obwohl Dinge weniger als 1 Pixel möglicherweise nicht angezeigt werden, kümmert sich der Computer nicht und er wird versuchen, ihn zu zeichnen.
Tatsächlich sind Pixel schließlich auch ein Gerät. Wenn wir die Leinwand in eine ausreichend große Größe vergrößern, um jedes Pixel klar zu sehen, was würde dann passieren? Es ist wahrscheinlich so:
Jedes Pixel hat einen Start- und Endbereich, wie in der Abbildung gezeigt, sein Bereich beginnt links, erstreckt sich über 1 Pixel und stoppt rechts.
Wenn wir beim Zeichnen von 1 Pixel -Linien den Start- und Endbereich des Pixels folgen, erhalten wir definitiv eine sehr Standard -Dünnlinie. wie folgt:
Leider werden die Leinwandlinien unterschiedlich gezeichnet. Im vorherigen Artikel haben wir bereits gesagt, dass jede Leinwandlinie eine unendlich dünne Mittellinie hat und die Breite der Linie von der Mittellinie bis zu beiden Seiten erstreckt. Wenn wir immer noch eine Linie aus dem zweiten Pixelpunkt zeichnen, liegt die Mittellinie der Linie in der Nähe des Startpunkts des zweiten Pixels, und dann beginnen wir zu zeichnen, und das Problem kommt: Die Canvas -Linie erstreckt sich auf beide Seiten mit der Mittellinie, anstatt auf einer Seite (zum Beispiel hier, wenn es sich nur nach rechts erstreckt, ist unser Problem nicht mehr ein Problem. Nach der Erweiterung ist unsere Linie tatsächlich wie folgt:
Zu diesem Zeitpunkt gibt es ein weiteres Problem: Der Computer lässt Grafiken nicht weniger als 1px zu, daher hat er einen Kompromiss gemacht: beide Pixel zeichnen.
Auf diese Weise wird die ursprüngliche 1PX -Linie zu einer Linie, die 2px breit aussieht.
Der Grund für den Fehler wird gefunden: Die Linie in Leinwand übereinstimmt die Mittellinie mit dem Startpunkt des Pixels, nicht dem Mittelpunkt des Pixels.
Wie lösen wir dieses schmerzhafte Problem? Vielleicht haben einige Leute bereits gedacht: Da die beiden Ausgangspunkte unterschiedlich sind, lassen Sie uns ihre Ausgangspunkte gleich machen!
Wir müssen nur die mittlere Linie der Linie mit dem Mittelpunkt des Pixels ausrichten!
Der Zwischenpunkt des Pixels ist leicht zu finden. Beispielsweise ist der Zwischenpunkt des zweiten Pixels die Position von 1,5 Pixel gemäß der Erklärung der Abbildung, so dass der Zwischenpunkt des X-Pixels (x-0,5) px ist.
Natürlich können Sie in weniger strengen Anlässen x+0,5 verwenden.
Versuchen wir nun unsere Ergebnisse auf Leinwand.
ctx.moveto (100,5.100,5);
ctx.lineto (200.5.100,5);
ctx.lineto (200,5.200,5);
ctx.lineto (100,5.200,5);
ctx.lineto (100,5.100,5);
ctx.closepath ();
ctx.linewidth = 1;
ctx.strokestyle = 'rgba (255,0,0,0,5)';
ctx.stroke ();
Es sieht richtig aus?
Aber es scheint, dass wir, wenn wir Linien zeichnen, sehr verwirrt sind. Fügen wir diese deprimierende 0,5 immer hinzu? Natürlich nicht, da wir Variablen verwenden, um die meiste Zeit Werte zu speichern, sodass wir nicht jedem Wert 0,5 hinzufügen müssen
Darüber hinaus müssen wir für Linien mit Linienbreite> 1 keine Sorgen darüber machen: Da dieses Problem das offensichtlichste ist, wenn die Linie 1px breit ist.