Как решить проблему при рисовании на канвасе с координатами пикселей, когда получаются дробные значения?

Question

[Pavel K]

Приветствую!
Упрощённое описание:
делаю что-то типо календарной сетки
рисую пямоугольник шириной 400 пикселей - месяц Февраль
в нём 29 дней и нужно что бы они по ширине были равны, т.е.
400/29 = 13.79
рисую 29 вертикальных линий
и вот тут то как раз облом - т.к. значения могут быть только целочисленные,
после последнего столбца куча пустого места, хотя его быть не должно =(


На рисунке все линии шириной 1 пиксель.

Подскажите, пожалуйста, как можно по элегантнее решить эту проблему?

Answer 1

[Ivanq]

...
var w = 400 / 29; // или 28
var x1, x2;
for(var i=0;i<29;i++) {
  x1 = Math.floor(i * w);
  x2 = Math.floor(x1 + w);
  // И тут рисуете прямоугольник от (x1, y1) до (x2, y2), где y1 - где заканчивается "февраль", а y2 - конец экрана.
}

Answer 2

[Дмитрий Беляев]

Как вариант, округлять значения в разную сторону по признаку четности номера линии, например четные округлять вниз, нечетные вверх
Разница в 1 пиксель на глаз не будет заметна

Если нужна еще больше точность, то нужно из дробной части вычислять оьношение, в Вашем примере будет 79% полос по 14 пикселей и 21% по 13 пикселей

Comments

[Pavel K]

Адцкий расколбас получается.
Нужно компенсировать всего 6 (29*14 =406; 406-400=6 ) пикселей на 30 линий...

[Pavel K]

Да, так и сделал (про отношения).
а именно:
//-- узнаем, сколько у нас по ширине погрешность округления получилась по всем дням в пикс.
int e = monthRect.width() - dayRect.width()*dmCount;

//-- сдвигаем каждую линию по горизонтали. Также каждую Энную линию (j%5==0) нужно ещё сдвинуть для учёта ошибки. Ошибка может быть как в большую сторону так и в меньшую ( e / abs(e) ).
dayRect.translate(dayRect.width()+ ( (e!=0 && j%(int)round(dmCount/e)==0)? e / abs(e) : 0 ), 0);

[AtomKrieg]

Pavel K: вы как то сложно делаете. У IvanQ ниже написано решение. Надо делать так: x = round( I * 13.79);

Answer 3

[Иван]

Такое впечатление, что у вас там не один столбец, а 2.