Увеличить или нарезать раздел холста HTML5 - PullRequest
2 голосов
/ 28 января 2011

Я работаю над библиотекой HTML Canvas для создания "Круговой диаграммы" Теперь, чтобы закончить, мне нужно данный раздел PIE Chart to Zoom или Slice один раз щелкните по разделу.

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

Пожалуйста, не рекомендуйте мне использовать любую доступную библиотеку графиков

1 Ответ

3 голосов
/ 29 января 2011

То, что вы хотите, не может быть сделано напрямую: когда вы рисуете на холсте, вы рисуете пиксели, которые мгновенно высыхают на холсте. Если вы хотите увеличить масштаб, вам придется стереть холст (ctx.clearRect(...)) и перекрасить круговую диаграмму, используя больше пикселей. Это то, чего требует графический интерфейс без сохранения (или режим немедленного рисования ), такой как Canvas.

Сравните это с SVG, режим рисования с сохранением графическая система, где команды для рисования контента приводят к созданию элементов, для которых вы можете отслеживать события, настраивать свойства и видеть визуальные результаты, обновленные для вы.

Вы можете «увеличить» - перерисовать круговую диаграмму больше - либо изменив свои команды рисования (больший arc радиус, lineWidth и т. Д.), Либо изменив свой контекст ( изменение масштаба и перевода), а затем снова введите те же команды рисования.

Существует также одна опция: если вы оставите атрибуты width и height холста без изменений, но измените свойства CSS на height и width, которые можно увеличить на вашем холсте без перерисовки. Однако это приведет к росту каждого виртуального пикселя на холсте на экране, что приведет к пикселизации.

...