3 РИСОВАНИЕ В ОКНЕ АПЛЕТА

Microsoft Visual J++. Создание приложений и аплетов на языке Java. Часть 1

Приложение Painter

В этом разделе мы рассмотрим исходные тексты аплета Painter, в которых демонстрируется использование большинства только что описанных нами функций рисования.

Внешний вид окна аплета при просмотре соответствующего документа HTML навигатором Microsoft Internet Explorer показано на рис. 3.9.

Рис. 3.9. Окно аплета Painter

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

Исходные файлы приложения Painter

В листинге 3.1 мы привели исходный текст аплета Painter.

Листинг 3.1. Файл Painter\Painter.java


// =========================================================
// Аплет, демонстрирующий использование различных
// функций рисования
//
// (C) Фролов А.В, 1997
//
// E-mail: frolov@glas.apc.org
// WWW:    http://www.glasnet.ru/~frolov
//            или
//         http://www.dials.ccas.ru/frolov
// =========================================================

import java.applet.*;
import java.awt.*;

public class Painter extends Applet
{
  // -------------------------------------------------------
  // Painter
  // Конструктор не используется
  // -------------------------------------------------------
  public Painter()
  {
  }

  // -------------------------------------------------------
  // getAppletInfo
  // Метод, возвращающей строку информации об аплете
  // -------------------------------------------------------
  public String getAppletInfo()
  {
    return "Name: Painter\r\n" +
      "Author: Alexandr Frolov\r\n" +
      "E-mail: frolov@glas.apc.org" +
      "WWW:    http://www.glasnet.ru/~frolov" +
      "Created with Microsoft Visual J++ Version 1.0";
  }

  // -------------------------------------------------------
  // init
  // Вызывается во время инициализации аплета
  // -------------------------------------------------------
  public void init()
  {
    // Для того чтобы размеры окна аплета можно было
    // задавать в документе HTML, закрываем следующую
    // строку символом комментария

    // resize(320, 240);
  }

  // -------------------------------------------------------
  // destroy
  // Метод destroy не используется
  // -------------------------------------------------------
  public void destroy()
  {
  }

  // -------------------------------------------------------
  // paint
  // Метод paint, выполняющий рисование в окне аплета
  // -------------------------------------------------------
  public void paint(Graphics g)
  {
    // Определяем текущие размеры окна аплета
    Dimension dimAppWndDimension = size();

    // Эта строка будет удалена из окна аплета
    // методом clearRect
    g.drawString("Невидимая строка", 10, 20);
 
    // Стираем содержимое окна аплета. Цвет окна
    // становится таким же, как и цвет фона
    // окна навигатора
    g.clearRect(0, 0, 
      dimAppWndDimension.width  - 1, 
      dimAppWndDimension.height - 1);
    
    // Выбираем в контекст отображения желтый цвет
    g.setColor(Color.yellow);
    
    // Закрашиваем внутреннюю область окна аплета
    g.fillRect(0, 0, 
      dimAppWndDimension.width  - 1, 
      dimAppWndDimension.height - 1);

    // Выбираем в контекст отображения черный цвет
    g.setColor(Color.black);

    // Рисуем рамку вокруг окна аплета
    g.drawRect(0, 0, 
      dimAppWndDimension.width  - 1, 
      dimAppWndDimension.height - 1);

    // Пишем строку в верхнем левом углу окна аплета
    g.drawString("Привет из аплета!", 10, 20);

    // Рисуем в цикле пять горизонтальных линий
    for(int i = 0; i < 5; i++)
    {
      g.drawLine(10, 30 + (i * 10), 200, 30 + (i * 10));
    }

    // Копируем область окна, занятую 
    // нарисованными линиями
    g.copyArea(10, 30, 200, 50, 220, 0);

    // Выбираем в контекст отображения белый цвет
    g.setColor(Color.white);

    // Закрашиваем белвым цветом нижнюю часть окна
    g.fillRect(1, 80, 
      dimAppWndDimension.width  - 2, 
      dimAppWndDimension.height - 81);
    
    // Выбираем в контекст отображения черный цвет
    g.setColor(Color.black);

    // Рисуем два трехмерных прямоугольника
    g.draw3DRect(10,  100, 100, 20, true);
    g.draw3DRect(120, 100, 100, 20, false);
  
    // Выбираем в контекст отображения красный цвет
    g.setColor(Color.red);
    
    // Рисуем рамку, в которую будет вписан сегмент
    g.drawRect(10, 140, 200, 100);
    g.drawLine(10, 190, 210, 190);
    g.drawLine(110, 140, 110, 240);

    // Выбираем в контекст отображения черный цвет
    g.setColor(Color.black);

    // Рисуем сегмент
    g.drawArc(10, 140, 200, 100, -25, 320);

    // Создаем многоугольник
    Polygon p = new Polygon();
  
    // Добавляем в многоугольник несколько вершин
    p.addPoint(270, 239);
    p.addPoint(350, 230);
    p.addPoint(360, 180);
    p.addPoint(390, 160);
    p.addPoint(340, 130);
    p.addPoint(270, 239);

    // Рисуем многоугольник
    g.drawPolygon(p);

    // Рисуем прямоугольник с закругленными углами
    g.drawRoundRect(10, 250, 200, 100, 60, 40);

    // Выбираем в контекст отображения красный цвет
    g.setColor(Color.red);

    // Задаем область ограничения вывода
    g.clipRect(260, 250, 200, 100);
 
    // Рисуем круг, пересекающий область ограничения
    g.fillOval(300, 200, 170, 170);
  }

  // -------------------------------------------------------
  // start
  // Метод start не используется
  // -------------------------------------------------------
  public void start()
  {
  }
	
  // -------------------------------------------------------
  // stop
  // Метод stop не используется
  // -------------------------------------------------------
  public void stop()
  {
  }
}

Листинг 3.2 содержит исходный текст документа HTML, в который встроен данный аплет.

Листинг 3.2. Файл Painter\Painter.html


<html>
<head>
<title>Painter</title>
</head>
<body>
<hr>
<applet
    code=Painter.class
    id=Painter
    width=500
    height=400>
</applet>
<hr>
<a href="Painter.java">The source.</a>
</body>
</html>

Мы внесли небольшие изменения в файл Painter.html, подготовленный системой Java Applet Wizard. Эти изменения заключаются в увеличении размеров окна аплета, задаваемых параметрами WIDTH и HEIGHT оператора <APPLET>.

Метод init

Аплет Painter был создан с помощью системы Java Applet Wizard. Мы выполнили изменения методов init, getAppletInfo и paint.

Изменения метода init заключаются в том, что мы закрыли символом комментария строку установки размеров окна аплета:


public void init()
  {
    // resize(320, 240);
  }

Это позволяет задавать размеры окна аплета не в исходном тексте приложения, а в параметрах оператора <APPLET>, с помощью которого аплет встраивается в документ HTML.

Метод getAppletInfo

В методе getAppletInfo изменения невелики: в описание аплета был добавлен наш почтовый адрес E-mail и адрес нашего сервера WWW:


public String getAppletInfo()
{
  return "Name: Painter\r\n" +
    "Author: Alexandr Frolov\r\n" +
    "E-mail: frolov@glas.apc.org" +
    "WWW:    http://www.glasnet.ru/~frolov" +
    "Created with Microsoft Visual J++ Version 1.0";
}

Метод paint

В обработчик метода paint мы добавили функции рисования.

В самом начале своей работы метод определяет текущие размеры окна аплета, вызывая для этого метод size:


Dimension dimAppWndDimension = size();

Метод size определен в классе Component, от которого в конечном счете наследуется класс Applet и класс нашего приложения Painter. Этот метод возвращает ссылку на объект класса Dimension, хранящего высоту и ширину объекта:


public class java.awt.Dimension
  extends java.lang.Object 
{
  // -----------------------------------------------------
  // Поля класса
  // -----------------------------------------------------
  public int height; // высота
  public int width;  // ширина

  // -----------------------------------------------------
  // Конструкторы
  // -----------------------------------------------------
  public Dimension();
  public Dimension(Dimension  d);
  public Dimension(int  width, int  height);

  // -----------------------------------------------------
  // Метод
  // -----------------------------------------------------
  public String toString();
}

На следующем шаге после определения размеров окна наше приложение рисует в окне строку, а затем стирает содержимое всего окна:


g.drawString("Невидимая строка", 10, 20);
g.clearRect(0, 0, 
   dimAppWndDimension.width  - 1, 
   dimAppWndDimension.height - 1);

В качестве начальных координат стираемой области мы указали точку (0, 0) - это верхний левый угол окна аплета. Ширина и высота стираемой области задана исходя из размеров аплета, полученных от метода size.

Для того чтобы изменить цвет фона окна, ме его закрашиваем (хотя могли бы воспользоваться и методом setBackground). Это можно сделать методом fillRect. Вначале при помощи метода setColor мы выбираем в контекст отображения желтый цвет, а затем закрашиваем всю внутреннюю область окна аплета методом fillRect:


g.setColor(Color.yellow);
g.fillRect(0, 0, 
  dimAppWndDimension.width  - 1, 
  dimAppWndDimension.height - 1);

На следующем этапе метод paint выбирает в контекст отображения черный цвет и рисует черную рамку вокруг окна аплета, вызывая для этого метод drawRect:


g.setColor(Color.black);
g.drawRect(0, 0, 
  dimAppWndDimension.width  - 1, 
  dimAppWndDimension.height - 1);

Далее при помощи метода drawString обработчик метода paint пишет в верхней части окна аплета строку, которая останется на экране:


g.drawString("Привет из аплета!", 10, 20);

Для того чтобы продемонстрировать работу функции copyArea, копирующей прямоугольную область окна аплета, мы нарисовали в окне пять горизонтальных прямых линий, а затем скопировали результат в правый верхний угол окна аплета:


for(int i = 0; i < 5; i++)
{
  g.drawLine(10, 30 + (i * 10), 200, 30 + (i * 10));
}
g.copyArea(10, 30, 200, 50, 220, 0);

Для рисования линий мы здесь вызываем метод drawLine.

Далее вызывая метод fillRect после предварительного выбора в контекст отображения белого цвета мы закрашиваем белым цветом всю нижнюю часть окна аплета, подготавливая фон для дальнейших упражнений в рисовании:


g.setColor(Color.white);
g.fillRect(1, 80, 
  dimAppWndDimension.width  - 2, 
  dimAppWndDimension.height - 81);

Ширина и высота закрашиваемой области здесь указана с учетом наличия черной рамки толщиной в 1 пиксел вокруг окна аплета.

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


g.setColor(Color.black);
g.draw3DRect(10,  100, 100, 20, true);
g.draw3DRect(120, 100, 100, 20, false);

Затем мы приступаем к рисованию сегмента.

Вначале в контекст отображения выбирается красный цвет. Этим цветом мы рисуем прямоугольную рамку, в которую будет вписан сегмент:


g.setColor(Color.red);
g.drawRect(10, 140, 200, 100);
g.drawLine(10, 190, 210, 190);
g.drawLine(110, 140, 110, 240);

Рамка разделена по горизонтали и по вертикали красными линиями.

Далее мы выбираем в контекст отображения черный цвет и рисуем сегмент:


g.setColor(Color.black);
g.drawArc(10, 140, 200, 100, -25, 320);

Обратите внимание, что начальный угол сегмента имеет отрицательное значение. Угол сегмента составляет 320 градусов.

Следующий шаг - создание и рисование многоугольника.

Многоугольник создается как объект класса Polygon. К этому объекту с помощью метода addPoint мы добавляем несколько точек:


Polygon p = new Polygon();
p.addPoint(270, 239);
p.addPoint(350, 230);
p.addPoint(360, 180);
p.addPoint(390, 160);
p.addPoint(340, 130);
p.addPoint(270, 239);

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

После подготовки многоугольника он рисуется при помощи метода drawPolygon:


g.drawPolygon(p);

Наш аплет рисует также прямоугольник с закругленными углами, вызыая метод drawRoundRect:


g.drawRoundRect(10, 250, 200, 100, 60, 40);

Ширина и высота эллипсов закругления составляет, соответственно, 60 и 40 пикселов.

Для демонстрации действия области ограничения вывода мы создаем такую область, вызывая метод clipRect:


g.clipRect(260, 250, 200, 100);

Затем мы рисуем круг, пересекающий эту область ограничения, в результате чего будет нарисована только та часть круга, которая находится внутри области ограничения:


g.fillOval(300, 200, 170, 170);