Каким способом реализовать на канвасе «зум» например от года к конкретному дню недели?

Question

[Pavel K]

И снова здравствуйте!
Делаю что-то типо тайм-лайна / календарной сетки

тут в столбцы - дни для каждого месяца
в этих днях должна быть разбивка по часам и минутам.

Нужно сделать "зум" т.е. что бы столбцы становились больше и в них можно было увидеть часы, потом в часах минуты.

До этого у меня было сделано просто полной перерисовкой канваса на текущий день с отображением разбивки времени без соседних дней.

Заказчик теперь так вообще не хочет, а хочет что бы был "зум"

что бы без переключения сразу на поминутное мог видеть часы, когда минуты не важны, а когда важны, ещё отзумировать и прямо в таком зуме пролистать на другие дни.

Как к этому правильно и с какой стороны подойти?

Comments

[Vitaly]

А причём тут C++?

[Pavel K]

Vitaly: при том, что canvas у меня на QML в Qt =)

[Vitaly]

Pavel K: Следовательно C++ тут не при чём. А почему бы не сделать всё это добро на обычных элементах QML? Там же можно удобно и события вращения колёсика обрабатывать и всё что угодно вообще делать. Сцена QML сама по себе большая канва)

[Pavel K]

Тут смерть кащея - с помощью c++ я рисую на канве :DDD
ну как на канве, точнее через pain унаследовавшись QQuickPaintedItem.
Думал зайдёт кто c C++ скажет, что я мудак, рисуй напрямую через GL и даст направление.
QML компоненты будут адцки тормозить, мне даже просто Rectangle уже перебор - мне просто линии рисовать =)

Answer 1

[Юрий]

помоему для такого лучше svg
посмотри d3js - фреймворк довольно сложный но у них миллион примеров и готовых заготовок + доки, еще и с красивой анимацией сможешь сделать.

Comments

[Pavel K]

svg ничуть не лучше, ещё и тормознутее будет с моими-то руками.
Мне ведь только линии рисовать да текст выводить - с размытостью проблем не будет.

За наводочку на d3js спасибо.
Есть интересный примерчик: bl.ocks.org/mbostock/1005873
но у меня не JavaScript, к сожалению =( и такой движок я не перепишу

Answer 2

[Станислав Макаров]

А чего тут думать. Ну введите некое условное обозначение зума, например 1 - это минимальное увеличение, как сейчас. Также введите точку - центр viewport-а, куда смотрит пользователь. В зависимости от значения масштаба, отрисовывать дни/часы или минуты. Отрисовывать только то, что видно через вьюпорт. Таким образом у вас получится длинный-предлинный календарь, в каждый момент времени вы будете видеть лишь его фрагмент. Ну как тайловых картах сделано.

Answer 3

[trushka]

Может, вообще на обычном html сделать, по принципу из предыдущего ответа? Чтоб не утяжелять, при недостаточном зуме скрывать более мелкие элементы с помощью display:none, а показывать только в пределах вьюпорта.