- •Давайте не будем изобретать колесо.
- •Прежде всего: Данные
- •Рисование и Упорство
- •Объект Graphics
- •Начинаем
- •Расположение и Размер
- •Вычислите Общее значение
- •Вычислите Доли и Нарисуйте Диаграмму
- •Рисуем диаграмму
- •Улучшите диаграмму
- •Заголовок
- •Пули (Bullets) и Информация о Компании
- •Расположите После Использования
- •Все сделано!
- •Нарисуем это!
- •Давайте начнем
- •Шаг 1: генерация данных
- •Шаг 2: Получаем элемент управления
- •Повторно используемые значения
- •Шаг 3: Установка полей, промежутки и размеры
- •Шаг 4а: Объекты Graphics и Bitmap
- •Шаг 4b: Вертикальная ось
- •Шаг 4c: Отметки и текст
- •Шаг 4d: Время для проверки
- •Шаг 5: Горизонтальная ось и панели
- •5B. Панели
- •5C. Названия стран
- •Шаг 6: Все показано!
- •Удачные диаграммы: Вторая помощь в круговых диаграммах. Часть 3
- •Разметка формы
- •Давайте начнем писать код
- •Временные переменные
- •Элементы пользовательского ввода
- •Получение данных
- •Создание диаграммы
- •Рисуем Panel
- •Финальное домоводство
- •Опция «Уппс!»
- •Настройка
- •Создаем данные
- •Элементы управления
- •Вертикальная ось
- •Точечные отметки шкалы
- •Проверяем 1, 2, 3
- •Базовая линия (ось X)
- •3D Панели
- •Последние штрихи
- •Удачные диаграммы. Часть 5 - Линейные графики
- •Данные для образца
- •Переменные
- •Внешние границы диаграммы
- •Объект Graphics
- •Вертикальная ось
- •Отметки
- •Горизонтальная ось (a.K.A. Базовая линия)
- •Рисование Линии (Линий)
- •Расчет вертикальной шкалы
- •Создаем и рисуем первый сегмент линии
- •Превращающаяся и исчезающая проблема линий
- •Первый сегмент линии
- •Остающиеся сегменты линии
- •Преобразования
- •Рисуем преобразованную линию
- •Проверяем
- •Отображаем месяцы
- •Отображаем результат
- •Соединения линий
- •Линии сетки
- •Горизонтальные линии сетки
- •Вертикальные линии сетки
- •Последнее отображение
- •Удачные диаграммы. Часть 6 - Динамическая линейная диаграмма
- •Элементы управления формы
- •Инициирующий код
- •Рисование направляющих линий диаграммы
- •Как это работает
- •Отображаем значения
- •Использование Vertical ScrollBar
- •Проверяем
- •Итоги первой демонстрации
- •Затененный график
- •Значения вертикальной оси
- •Код Вертикальных Значений
- •Подвижные направляющие линии
- •Отображаем направляющие линии
- •Направляющие линии и отображенные значения
- •Вертикальные значения
- •Возможные улучшения
- •Охваченные темы
Рисование и Упорство
Одна из распространенных проблем для новичков в рисовании в .NET - это хитрость постоянства. Пока вы не получите правильный рисующий код сразу размещенным в правильном месте, рисунок может исчезнуть полностью или частично при перемещении или если другое окно помещено выше него и, фактически, в некоторых других ситуациях. Разные сценарии призывают к решению этой проблемы. При рисовании непосредственно на форме, вы часто сможете избегать проблемы «исчезновения графики» просто помещая свой код в событии формы OnPaint. Этот подход мы будем использовать для демонстрации нашей круговой диаграммы. Если вы еще не достигли OnPaint, вы можете найти его, выбирая «(Overrides)» слева в открывающемся списке в Окне Кода и перемещаясь вниз, довольно долго, пока не найдете OnPaint. В этой серии статей мы будем много раз обращаться к теме рисования и обновления. Пока же мы просто оставим все простым.
Объект Graphics
У формы есть объект Graphics, связанный с ней. Некоторые люди любят думать об этом объекте, как о холсте, на котором нарисовано все то, что появляется на поверхности формы. Возможно, как к покрывалу на форме. И для наших целей в этой статье это описание подходит достаточно точно. Мы пишем код для этого объекта Graphics, который открывает для нас широкий диапазон методов и свойств рисования, которые впоследствии станут доступны нам. Вскоре вы увидите пару примеров этого.
Начинаем
Во-первых, мы создаем переменную и присваиваем ей объект формы Graphics:
Protected Overrides Sub OnPaint(ByVal e As System.Windows.Forms.PaintEventArgs)
Dim g As Graphics = e.Graphics
Если вы проходите этот код, шаг за шагом, с помощью Visual Studio, при чтении этой статьи, то попробуйте начать новую строку кода и напечатать “g.”. Intellisense немедленно покажет вам внушительный диапазон методов и свойств под рукой, для использования и удовольствия. Однако мы, пока, собираемся ограничиться установкой свойства SmoothingMode. Выбор значения SmoothingMode равным HighQuality уменьшит зубчатый эффект линий до минимума. Улучшения до высшего качества приходят с повышением их стоимости, и очень часто эта цена уменьшает скорость отображения. Однако наш пример не требователен к ресурсам, так что это вряд ли будет фактором, о котором вам придется беспокоиться. Добавьте эту строку в событие OnPaint:
g.SmoothingMode = Drawing2D.SmoothingMode.HighQuality
Расположение и Размер
Сначала мы должны решить две вещи: 1.Где на форме мы хотим расположить нашу диаграмму 2.Какого размера диаграмму мы хотим. Как только эти решения будут приняты, мы задействуем еще один объект .NET класса Graphics, чтобы использовать эту информацию. Этот объект – Rectangle (Прямоугольник). Здесь необходимо иметь в виду ключевое понятие – Rectangle является фактическим объектом, а не просто формой, которую он представляет. Легко запутаться с такими объектами, как Rectangle, Point, Size (Прямоугольники, Точки, Размеры) и т.д., потому что часто мы имеем тенденцию видеть их взглядом нашего ума, скорее абстрактно, чем физически. Но объект Rectangle класса Graphics является таким же реальным объектом, как и любой другой в .NET Framework. Передача нашего выбора местоположения и размера объекта Rectangle требует только одной строки:
Dim rect As Rectangle = New Rectangle(100, 105, 150, 150)
В вышеуказанном коде четыре значения представляют: 100 – Позиция X Прямоугольника, т.е. количество пикселей от левого края формы до левого края Прямоугольника 105 – Позиция Y Прямоугольника. Количество пикселей от верхнего края формы до верхнего края Прямоугольника. 150 – Width (Ширина) Прямоугольника. Поскольку круговая диаграмма займет все доступное пространство в этом Прямоугольнике, следует вывод, что это также будет ширина диаграммы. 150 – Height (Высота) Прямоугольника. Поэтому также высота диаграммы. Хотя традиционно для круговой диаграммы используют круг, это не обязательно. Вы можете предпочесть, например, создать овальную диаграмму, в этом случае вам нужно изменить только значения Width и Height по вашему предпочтению.