Продолжить с предыдущей статьей на рисование Canvas Line
В прошлый раз мы упоминали, что у холста иногда есть 1 пиксельные линии, которые размыты и, кажется, шире, как показано на рисунке ниже:
Такие линии, очевидно, не то, что мы хотим.
Цель этой статьи - выяснить принципы и решить их.
Все знают, что самый маленький размер дисплея на экране - 1 пиксель. Хотя вещи менее 1 пикселя не могут быть отображены, компьютеру все равно, и он попытается нарисовать его.
На самом деле, пиксели также являются единицей в конце концов. Если мы увеличим холст до достаточно большого размера, чтобы ясно увидеть каждый пиксель, что произойдет? Это, наверное, так:
Каждый пиксель имеет диапазон начала и конечности, как показано на рисунке, их диапазон начинается слева, охватывает 1 пиксель и останавливается вправо.
Если мы следуем за началом и конечным диапазоном пикселя при рисунке 1 пиксельных линий, то мы обязательно получим очень стандартную тонкую линию. следующее:
Но, к сожалению, линии холста нарисованы по -разному. В предыдущей статье мы уже говорили, что каждая линия холста имеет бесконечно тонкую среднюю линию, а ширина линии простирается от средней линии до обеих сторон. Если мы все еще нарисуем линию со второй точки пикселя, то средняя линия линии будет близка к начальной точке второго пикселя, а затем мы начнем рисовать, и проблема возникает: линия холста распространяется на обе стороны с средней линией, а не с одной стороны (например, здесь, если она только распространяется на правую, то наша проблема больше не является проблемой). После расширения наша линия на самом деле такая:
В настоящее время есть еще одна проблема: компьютер не разрешает графику менее 1PX, поэтому он сделал компромисс: нарисуйте оба пикселя.
Таким образом, исходная линия 1PX становится линией, которая выглядит шириной 2px.
Причина сбоя обнаружена: линия в холсте выравнивает среднюю линию с начальной точкой пикселя, а не средней точкой пикселя.
Итак, как мы решаем эту болезненную проблему? Возможно, некоторые люди уже думали: поскольку две отправные точки разные, давайте сделаем их отправные точки одинаковыми!
Нам просто нужно выровнять среднюю линию линии со средней точкой пикселя!
Промежуточная точка пикселя легко найти. Например, промежуточная точка второго пикселя представляет собой положение 1,5 пикселя в соответствии с объяснением на рисунке, поэтому промежуточная точка X Pixel составляет (x-0,5) px.
Конечно, в менее строгих случаях вы можете использовать x+0,5.
Теперь давайте попробуем наши результаты на холсте.
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 ();
Это выглядит правильно?
Но кажется, что когда мы рисуем линии, мы очень смущены. Мы всегда добавляем это удручающее 0,5? Конечно, нет, потому что мы используем переменные для экономии значений большую часть времени, поэтому нам не нужно добавлять 0,5 к каждому значению
Более того, для линий с шириной линии> 1 нам не нужно беспокоиться об этом: потому что эта проблема наиболее очевидна, когда линия шириной 1px.