Чтобы начать выполнять примеры, приведенные в этой статье, вам потребуется JDK 1.2 или выше ( http://java.sun.com ). Вам также понадобится веб-сервер, поддерживающий JSP. Я тестировал этот пример на Tomcat, где использовал класс com.sun.image.codec.jpeg (выпущенный в Sun Java 2 SDK) для кодирования графических данных.
Поскольку вы хотите иметь многоразовый фон, вам следует создать класс Java для управления макетом, включая область заголовка и внешние границы. Как показано на рисунке А.
Рисунок А
Как видите, я заштриховал как область заголовка, так и внешнюю границу. Заголовок имеет белую рамку шириной в один пиксель, а графическая область — тонкую черную рамку. Эти границы добавляют четкости теням.
Границы создать легко. Используйте метод Fill() объекта Graphics2D, чтобы заполнить синий прямоугольник заголовка, а затем используйте метод draw(), чтобы нарисовать границу другим цветом.
Создать эффект тени тоже очень просто. Сначала используйте метод fill(), чтобы нарисовать тень. Затем нарисуйте заголовок со смещением в семь пикселей. Это смещение создает трехмерный эффект, который приводит к эффекту тени.
Предположим, есть компания, которая продает сельскохозяйственную продукцию, и ей нужна гистограмма, чтобы показать продажи. В практическом приложении нам нужно будет получить эти данные из базы данных или XML-файла, но для простоты предположим, что данные о продажах хранятся в следующих двух массивах:
String datanames[] = {"яблоко", "апельсин", "персик", "лимон", "грейпфрут"};
int datavalues[] = {11, 62, 33, 102, 50};
В первом массиве хранятся товары для различных сельскохозяйственных продуктов, продаваемых компанией. Второй массив — объем продаж, соответствующий каждому сельскохозяйственному товару.
Гистограмма будет отображаться и сохраняться в формате JPEG, поэтому нам необходимо правильно установить MIME, тип контента. Браузеры используют типы MIME, чтобы решить, как реагировать. Следующий код устанавливает тип MIME:
response.setContentType("изображение/jpeg");
Далее нам нужен объект, представляющий изображение. API Java 2D поддерживает класс BufferedImage , который обеспечивает способ сохранения пиксельных данных и управления ими в памяти. Мы хотим, чтобы графика была цветной, поэтому используем тип графики TYPE_INT_RGB . Два целочисленных данных WIDTH и HEIGHT используются для указания ширины и высоты изображения в пикселях:
BufferedImage bi = новый BufferedImage(ШИРИНА, ВЫСОТА, BufferedImage.TYPE_INT_RGB);
Теперь, когда у нас есть объект BufferedImage, мы можем установить содержимое Graphics2D , вызвав метод createGraphics() объекта:
Graphics2D biContext = bi.createGraphics();
Программисту, создавшему график, необходимо установить параметр WIDTH исходя из важности графика и общего макета страницы. Графические элементы автоматически изменяют свой размер в соответствии с изменениями ширины изображения.
Ширину и ограничивающую область заголовка, а также самый длинный прямой квадрат изображения необходимо рассчитать на основе параметра WIDTH . Целью этого является обеспечение того, чтобы все графические элементы не превышали ширину изображения и не пересекали правую границу изображения.
Количество элементов данных, которые необходимо отобразить, определяет параметр ВЫСОТА графика. Если в массивы datavalues[] и datanames[] добавляются новые элементы, высота изображения должна соответственно увеличиться, чтобы соответствовать требуемому размеру области отображения.
Максимальный параметр используется для самого длинного прямого квадрата. Затем ширины других прямоугольных блоков вычисляются относительно максимума :
int barWidth = (innerWIDTH * currentValue) / максимум;
Приведенный выше алгоритм использует два значения: максимум и внутреннюю ШИРИНУ (графическую область) изображения, чтобы гарантировать, что прямоугольник будет автоматически расширяться и сжиматься при изменении значения ШИРИНЫ .
Чтобы отобразить графику, нам нужно создать фоновое изображение, а затем добавить графические данные. Сначала создайте объектgraphBG и вызовите его метод draw() :
GraphBG гр = новый GraphBG();
gr.draw(biContext, WIDTH, HEIGHT, "Сельскохозяйственная продукция", "Общий средний показатель: " + средний);
Параметры метода draw() включают графическое содержимое, biContext , WIDTH и HEIGHT , которые классgraphBG использует для определения ширины и высоты заголовка и графической области. Наконец, среднее значение данных рассчитывается и добавляется к тексту, отображаемому в заголовке.
Положение вертикальной координаты (ось Y) каждого прямоугольного блока рассчитывается по следующей формуле: y_pos = i * displayHeight + headerOffset . DisplayHeight равен высоте текста в прямом квадрате плюс высота прямого квадрата, а headerOffset представляет собой расстояние по вертикали от верхней части изображения, включая высоту области заголовка и тени.
Я создал эти прямоугольники и их границы, используя ту же технику, которую использовал ранее для создания границ заголовка. Я вычитал один пиксель из ширины и высоты границ прямоугольника, чтобы каждый прямоугольник имел красную рамку, и упростил эффект вычитания, нарисовав внутренние границы на белом фоне.
Мы создали изображение в памяти, теперь кодируем его и показываем пользователю. Мы не можем использовать поток вывода JSP по умолчанию для обработки JPEG, поэтому нам нужно использовать response.getOutputStream(), чтобы получить поток из объекта ответа. Мы можем использовать выходной поток для создания объекта JPEGImageEncoder и вызвать его encode() , передав объект BufferedImage , который мы создали ранее:
Кодер JPEGImageEncoder = JPEGCodec.createJPEGEncoder(выход);
encoder.encode(би);
Полученное изображение относительно небольшое, занимающее всего 13,7 килобайт. Рисунок B дает окончательный эффект:
Рисунок B
В любом случае выходные данные index.jsp представляют собой изображение JPEG. Вы можете сохранить его на свой рабочий стол или нажать клавишу PrintScreen, чтобы сделать снимок экрана. Если вам нужно отобразить несколько изображений на одной странице или добавить графику в другой контент, вы можете использовать HTML-тег img (< img src = ”index.jsp"> ), а затем разместить графику, когда это необходимо, например, Использовать форма.
Возможно, одна из старейших интернет-технологий динамически генерируемой графики способна выполнять и другие задачи, помимо отображения изображения. Представьте, что вам нужно записать количество зрителей этого изображения (аналогично записи количества кликов по рекламе), затем вам нужно реализовать такие задачи, как подсчет кликов, доступ к базе данных или файлу в index.jsp , и вы можете обработать эти задачи в фоновом режиме. Нет необходимости использовать буферизованное переключение страниц для пользователя.
В этой статье мы рассмотрели метод, позволяющий создавать аккуратные, приятные на вид гистограммы. Мы умело справились с изменением размера графики и кодированием ее в формат JPEG, а также обсудили модификацию HTML-кода для размещения полученных изображений в разных местах страницы.