Отображаем значения

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

1. Возьмем «снимок» («snapshot») предыдущего изображения на дисплее, захватывая текущее изображение с PictureBox’а в котором создана диаграмма. 2. Растягиваем направляющие линии в правой части изображения. (Зачем – мы увидим через минуту). 3. «Вставляем» снимок предыдущего дисплея обратно в объект Graphics Bitmap’а, НО помещаем его немного левее так, чтобы часть снимка выпадала из обзора PictureBox’а. (Теперь в правой части появился пустой промежуток, если мы не продлили направляющие линии в предыдущем шаге.) 4. Вычисляем точку Y (вертикальная ось), в которой должно быть отмечено выбранное значение. Заметьте, что мы должны пересчитывать его, чтобы использовать всю доступную высоту PictureBox’а. В нашем примере, в котором мы заботливо установили высоту PictureBox’а равным 400 и максимальное значение ScrollBar’а равным 100, нам придется учитывать масштаб 4:1 (т.е. каждое повышение на 1 значения в ScrollBar, будет представлено 4 вертикальными пикселями PictureBox’а). 5. Перемещаем начальную точку от начального положения в верхнем левом углу PictureBox’а, чтобы теперь начинать рисование в нижнем левом углу PictureBox’а. Важно понимать, что когда вы рисуете линию в PictureBox’е, исходная точка – точка со значением (0, 0) – всегда находится в верхнем левом углу. Затем, когда вы рисуете линию из этой точки – в точку (50, 100), к примеру – перо перемещается на 50 пикселей в сторону и на 100 пикселей вниз. Это хорошо для большинства задач в рисовании, но в диаграмме мы ожидаем, что линия будет двигаться вверх, при росте значения, а не вниз. Мы хотим, поэтому, чтобы линия нашей диаграммы начиналась в нижнем левом углу, чтобы представлять значение нуль (Точка 0, 0) и повышающиеся значения были представлены движением линии вверх. 6. Рисуем следующий сегмент. Эта линия будет тянуться от точки, где было отмечено последнее значение в точку, которая должна будет представлять текущее значение. Имея в виду то, что было сказано выше о линиях, идущих сверху вниз, мы также должны перевернуть линию, чтобы она стала нарисованной снизу вверх (иначе она будет нарисована за пределами видимости). В этом примере, это достигается очень просто, вычерчивая отрицательные эквиваленты значений. 7. Все задачи рисования для последнего значения теперь выполнены, так что мы можем присвоить наш только что нарисованный Bitmap свойству Image PictureBox’а. Это обновит экран, и пользователь увидит результаты наших предыдущих действий. 8. Наконец, хорошей практикой считается устранение объекта Graphics и мы должны закончить этим цикл действий. Следующий код делает эту работу: - Мы должны установить несколько переменных. Первая представляет длину каждого сегмента графика – т.е. число пикселей, используемых горизонтально на экране, для каждой новой рисуемой части графика. Добавьте нижележащий код вверху кода формы:

Dim Xmove As Integer = 3

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

Private OldValue As Single = 0

Private NewValue As Single = 0

Теперь фактическая процедура, которая производит данные. Она называется DrawGuidelinesAndChart:

Private Sub DrawGuidelinesAndChart(ByVal PicBox As PictureBox)

' Шаг 1

' Захватываем текущее изображение (последняя версия диаграммы)

Dim bm As New Bitmap(PicBox.Width, PicBox.Height)

Dim gr As Graphics = Graphics.FromImage(bm) ' Шаг 2

' Отмечаем пропущенные направляющие линии в правой стороне объекта Graphics.

For i As Integer = 40 To 400 Step 40

gr.DrawLine(Pens.WhiteSmoke, PicBox.Width - Xmove, i, PicBox.Width, i)

Next i

' Шаг 3

' Рисуем это захваченное изображение, помещая его в Xmove пикселей в левой

' части рисунка. (т.е., первые несколько пикселей будут невидимы из-за

' того, что они теперь находятся вне видимой области picturebox'а)

gr.DrawImage(PicBox.Image, -Xmove, 0)

' Заметьте, что мы все еще рисуем на объекте Graphics.

' На PictureBox еще не появилось никаких изменений.

' Шаг 4

' Отображаем новое значение. Т.е. вычисляем, где на оси Y

' (вертикальной плоскости) должно быть отмечено это новое значение.

' Это вычисление принимает во внимание масштаб значений min/max

' в диапазоне относительно общей высоты PictureBox.

' В этом примере он составляет 4:1 (Высота PictureBox 400:Max значение ScrollBar - 100)

' поэтому мы умножаем выбранное значение на 4

NewValue = SBUserValue.Value * 4 ' Step 5

' Перемещаем начальную точку с верхней левой точки в нижнюю левую.

gr.TranslateTransform(0, picGraph.Height)

' Шаг 6

' Рисуем следующий сегмент линии на объекте Graphics.

' Заметьте, что ОТРИЦАТЕЛЬНЫЕ значения OldValue и NewValue

' используются для позиций Y.

' Это будет обратная позиция этих точек и заставит их

' появится в PictureBox. Если вы не сделаете этого, они будут

' нарисованы ниже нижнего края PictureBox и поэтому

' вне видимости пользователем.

gr.DrawLine(Pens.Black, _

picGraph.Width - 1 - Xmove, -OldValue, _

picGraph.Width - 1, -NewValue)

OldValue = NewValue

' Шаг 7

' Отображаем результаты, присваивая этот редактированный Bitmap в качестве

' Image PictureBox’а.

picGraph.Image = bm

' Шаг 8

' Все сделано

gr.Dispose()

' Для подтверждения целей отображаем текущее выбранное значение в label

lblValue.Text = SBUserValue.Value.ToString

End Sub