绘制形状

Java 编程
绘制形状

绘制复杂形状

导航 用户界面 主题：( )

图形简介

在本章中，我们将使用代码创建图形内容的过程称为绘制或绘画。但是，Java 正式将后者作为该过程的正确术语，我们将在后面区分这两个术语。

现在，您需要的主要类毫无疑问是 Graphics 类。如果您仔细查看我们在代码中用来识别获取 Graphics 类的代码。

代码清单 9.3：基本画布import java.awt.*;
import javax.swing.*;
public class MyCanvas extends Canvas {
    public MyCanvas() {
    }

    public void paint(Graphics graphics) {
        /* We would be using this method only for the sake
         * of brevity throughout the current section. Note
         * that the Graphics class has been acquired along
         * with the method that we overrode. */
    }

    public static void main(String[] args) {
        MyCanvas canvas = new MyCanvas();
        JFrame frame = new JFrame();
        frame.setSize(400, 400);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.getContentPane().add(canvas);
        frame.setVisible(true);
    }
}

要查看 Graphics 类的内容，请查看页面底部的外部链接以获取指向在线 API 的链接。

在画布上刻画一条线

了解坐标

开始你的绘画体验，可以考虑绘制最基本的形状——一条线。从绘制例程的角度来看，画布可以表示为一个倒置的笛卡尔坐标系。由 x 轴和 y 轴表示的平面。原点或 $(0,0)$ 是画布的左上角，画布的可视区域是 笛卡尔第一象限 或正正 (+,+) 象限。从顶部向下移动，y 轴上的 y 坐标值越大，反之亦然，从左侧向右侧移动，x 轴上的 x 坐标值越大。与普通图形上的值不同，这些值似乎都是正值。因此，位于 $(10,20)$ 的点距离左侧 10 个像素，距离顶部 20 个像素，因此格式为 $(x,y)$ 。

在屏幕上绘制一条简单的线

现在，我们已经知道，线是画布上两个离散点的连接。所以，如果一个点位于 $(x1,y1)$ ，另一个点位于 $(x2,y2)$ ，绘制一条线将需要您编写如下代码语法。为了简洁起见，我们将省略示例中未使用的其他方法。

代码部分 9.4：绘制简单的线形

...
public class MyCanvas extends Canvas {
    ...
    public void paint(Graphics graphics) {
        graphics.setColor(Color.black);
        graphics.drawLine(40, 30, 330, 380);
        
    }
    ...
}

在上面的示例中，使用一个简单的方法来精确地定义在线的画布的笛卡尔尺度上的放置位置。 drawLine(int,int,int,int) 要求您输入四个参数，依次出现，x1 坐标、y1 坐标、x2 坐标和y2 坐标。运行程序将显示一条简单的黑色直线斜穿过画布。

绘制一个简单的矩形

我们现在继续进行第二个绘制。一个简单的矩形就可以满足要求，请参阅下面的代码。

代码部分 9.5：绘制一个简单的矩形

...
public class MyCanvas extends Canvas {
    ...
    public void paint(Graphics graphics) {
        graphics.drawRect(10, 10, 100, 100);
    }
    ...
}

在上面的示例中，您可以看到使用 drawRect(int, int, int, int) 方法在 Graphics 实例中绘制一个简单的矩形是多么容易。运行程序，您将看到一个简单的黑色矩形轮廓出现在曾经空白的画布上。

传递给该方法的四个参数是，按照出现的顺序，x 坐标、y 坐标、宽度和高度。因此，生成的矩形将从屏幕上距离左侧 10 个像素，距离顶部 10 个像素的点开始绘制，宽度为 100 个像素，高度为 100 个像素。为了保存这里的参数，上面的绘制是一个等边正方形，但正方形使用相同的方法绘制，没有 drawSquare(int, int, int) 这样的方法。

玩转颜色

您可以通过告诉 Graphics 实例您想要的颜色来更改轮廓的颜色。这可以通过以下方式完成

代码部分 9.6：更改矩形轮廓的颜色

...
public class MyCanvas extends Canvas {
    ...
    public void paint(Graphics graphics) {
        graphics.setColor(Color.red);
        graphics.drawRect(100, 100, 500, 500);
    }
    ...
}

运行程序将呈现同一个矩形，但轮廓为红色。

为了给我们的绘图添加颜色，我们使用了一个方法，即 setColor(Color) 方法。此方法对在其调用之后进行的所有绘制有效，直到设置另一种颜色。它需要一个类型为 Color 的参数。由于您不知道如何实际实例化一个 Color 类，因此该类本身具有几种内置颜色。以下列出了一些您可以使用的内置颜色。

Color.red
Color.blue
Color.green
Color.yellow
Color.pink
Color.black
Color.white

尝试在对颜色进行编码更改时运行程序，以便每次都获得不同的颜色轮廓。用更多颜色玩耍一下。在页面底部的外部链接中查找 Color 类的 API 文档。

填充矩形区域

到目前为止，您已经能够为自己绘制一个简单的矩形，同时默默地问自己，“为什么绘制的是矩形的轮廓，而不是整个区域？”答案很简单。任何以 drawXxxx(...) 开头的函数只会绘制轮廓。要绘制轮廓内的区域，我们使用 fillXxxx(...) 方法。例如，下面的代码将用黄色填充矩形，并带有红色轮廓。请注意，参数保持不变。

代码部分 9.7：绘制一个带红色轮廓的黄色矩形

...
public class MyCanvas extends Canvas {
    ...
    public void paint(Graphics graphics) {
        graphics.setColor(Color.yellow);
        graphics.fillRect(10, 10, 100, 100);
        graphics.setColor(Color.red);
        graphics.drawRect(10, 10, 100, 100);
    }
    ...
}

圆圈呢？

绘制圆圈非常容易？它与上面的语法相同，只是将 Rect 替换为 Oval。不要问我为什么是椭圆？您没有 drawCircle(int, int, int) 这样的方法，因为您没有 drawSquare(int, int, int) 这样的方法。下面是使用 Graphics 代码绘制圆圈的应用，只是为了吊起您的胃口。

代码部分 9.8：绘制一个带有蓝色轮廓的白色圆圈

...
public class MyCanvas extends Canvas {
    ...
    public void paint(Graphics graphics) {
        graphics.setColor(new Color(0,0,255));
        graphics.drawOval(50, 50, 100, 100);
    }
    ...
}

矩形的新形式

到目前为止很简单，不是吗？在所有这些形状中，只有这两种形状是您目前需要构建的形状。需要复杂的图形例程来构建菱形、三角形、梯形或平行四边形等形状。我们将在另一节中讨论这些形状。但是，最后，我将为您留下另一个有趣的形状——椭圆形和矩形的组合。想象一个带圆角的矩形，一个圆角矩形（RoundRect）。

代码部分 9.9：绘制一个带有红色轮廓的粉红色圆角矩形

...
public class MyCanvas extends Canvas {
    ...
    public void paint(Graphics graphics) {
        graphics.setColor(Color.pink);
        graphics.fillRoundRect(10, 10, 100, 100, 5, 5);
        graphics.setColor(Color.red);
        graphics.drawRoundRect(10, 10, 100, 100, 5, 5);
    }
    ...
}

请注意，drawRoundRect(int, int, int, int, int, int) 方法的语法与简单矩形绘制例程 drawRect(int, int, int, int) 的语法略有不同。最后添加的两个新参数分别是 **圆弧的宽度（以像素为单位）** 和 **圆弧的高度（以像素为单位）**。运行程序时，效果相当惊人。您无需眯起眼睛就能看出矩形的角略微圆润。圆弧宽度和高度的值越大，角周围的圆润度越明显。

嗯，一切都完美，但是...

有时人们在创建了像上面这样的简单程序后会问类似这样的问题

为什么我必须在每次绘制例程之前告诉 Graphics 实例颜色？ 为什么它不能记住我为轮廓和填充颜色选择的颜色？答案比看起来更简单。但是，要完全理解它，我们需要关注一个叫做 **图形上下文** 的小东西。图形上下文是附加到 Graphics 类单个实例的信息。这样的实例一次只记住一种颜色，这就是为什么我们需要使用 setColor(Color) 方法确保上下文知道我们需要使用的颜色。
我可以操作这些形状，例如倾斜和裁剪它们吗？ 等等，牛仔！在 Java 中一切皆有可能，甚至包括倾斜和裁剪图形。我们将在后面的部分中重点介绍这些问题。
制作三角形、菱形和其他复杂形状很麻烦吗？ 说实话，你需要回到尘土飞扬的书柜里，拿出那本高中几何书，因为我们在处理这些形状时会涉及一些几何基础知识。为什么不阅读一本关于几何的维基教科书？

测试您的知识

问题 9.3：在上面的练习清单中，我们一直先填充形状，然后再绘制它们的轮廓。如果我们反过来做会怎样？请考虑以下代码。

...
public void paint(Graphics graphics) {
    graphics.setColor(Color.red);
    graphics.drawRect(10, 10, 100, 100);
    graphics.setColor(Color.yellow);
    graphics.fillRect(10, 10, 100, 100);
}
...

左边和上面的轮廓消失了。
右边和下面的轮廓消失了。
轮廓的颜色变成了填充区域的颜色。
所有轮廓都消失了。

答案

所有轮廓都消失了。

问题 9.4：drawLine(10, 100, 100, 100) 会给你什么？

一条水平线。
一条垂直线。
一条对角线。

答案

一条水平线。

如果您对这里提供的內容有任何疑问，请随时在本页的讨论中发表评论。

外部链接

Java 编程
绘制形状

绘制复杂形状