關於Graphics/Graphics2D以及簡單的幾何圖像制作（一個簡單鍾表的實現）

 

題外話：正好趕上OperatingSystem的作業要做一個模擬線程/進程調度的問題，決定用JAVA實現才發現這些內容和之前學過的GUI制作是兩碼事兒- -b

　　通過學習java.swing庫的ActionListener接口我們初步了解了一些關於java框體程序的各個部件JFrame,JPanel,JComponent和控件之間是如何聯系通訊的，然而這次我們要從另一個視角來看java程序框體。

　　從一個框體實現“表”的代碼我們來初步看一下java是如何在JFrame平台上制作出自己想要的圖案的吧！

　　（實現效果圖）

 

---

 

有幾個可能會比較陌生的類先篩選出來：

（1）GeneralPath：是java.awt.geom.Path2D的一個子類，path的設定過程主要用兩個函數moveTo（double x，double y）和linkTo（double x，double y），當然如果需要實現path的動態繪制的話需要的方法遠不止這兩個，可以自行去javadoc查閱。

（2）Ellipse2D:是java.awt.geom下的一個類，可以用來繪制理論上的橢圓構造參數為（double x，double y，double width，double height）意義不多贅述。

（3）AffineTransform：這個是整個代碼中最有分量的一個類，這個類的引用的獲取方法是用靜態方法AffineTransform.getInstance（double theta，double x，double y）這里的x和y指的是錨點也就是整個旋轉過程參照的旋轉中心，theta是要用弧度制表示的旋轉角度。具體使用方法下文中會詳細總結。

（4）Timer類是在我接觸到的新的控件，和JButton或者JLabel等等不同的是這個空間不要手動加上ActionListener的接口來進行事件驅動。使用方法在代碼中有詳述。

import java.awt.*;
import java.awt.event.*;
import java.awt.geom.*;
import java.util.Calendar;
import javax.swing.*;

public class Main extends JPanel implements ActionListener
{
    // Create a shape for the face of the clock
    protected static Ellipse2D face = new Ellipse2D.Float(3, 3, 94, 94);

    // Create a path that represents a tick mark
    protected static GeneralPath tick = new GeneralPath();
    static
    {
        tick.moveTo(100, 100);
        tick.moveTo(49, 0);
        tick.lineTo(51, 0);
        tick.lineTo(51, 6);
        tick.lineTo(49, 6);
        tick.lineTo(49, 0);

    }

    // Create a cool hour hand
    protected static GeneralPath hourHand = new GeneralPath();
    static
    {
        hourHand.moveTo(50, 15);
        hourHand.lineTo(53, 50);
        hourHand.lineTo(50, 53);
        hourHand.lineTo(47, 50);
        hourHand.lineTo(50, 15);
    }

    // Create a cool minute hand
    protected static GeneralPath minuteHand = new GeneralPath();
    static
    {
        minuteHand.moveTo(50, 2);
        minuteHand.lineTo(53, 50);
        minuteHand.lineTo(50, 58);
        minuteHand.lineTo(47, 50);
        minuteHand.lineTo(50, 2);
    }

    // And a cool second hand
    protected static GeneralPath secondHand = new GeneralPath();
    static
    {
        secondHand.moveTo(49, 5);
        secondHand.lineTo(51, 5);
        secondHand.lineTo(51, 62);
        secondHand.lineTo(49, 62);
        secondHand.lineTo(49, 5);
    }

    // Create some colors for the pieces of the clock
    protected static Color faceColor = new Color(220, 220, 220);
    protected static Color hourColor = Color.red.darker();
    protected static Color minuteColor = Color.blue.darker();
    protected static Color secondColor = new Color(180, 180, 0);
    protected static Color pinColor = Color.gray.brighter();

    // Create circles for the pivot and center pin
    protected Ellipse2D pivot = new Ellipse2D.Float(47, 47, 6, 6);
    protected Ellipse2D centerPin = new Ellipse2D.Float(49, 49, 2, 2);


    // Create three transforms that center around the pivot point
    protected AffineTransform hourTransform =
            AffineTransform.getRotateInstance(0, 50, 50);
    protected AffineTransform minuteTransform =
            AffineTransform.getRotateInstance(0, 50, 50);
    protected AffineTransform secondTransform =
            AffineTransform.getRotateInstance(0,50,50);

    // Create a timer that fires once a second and a Calendar
    // instance for getting the time values
    protected Timer timer = new Timer(1000, this);
    protected Calendar calendar = Calendar.getInstance();

    // Constructor - hardcode a preferred size of 100x100
    public Main()
    {
        setPreferredSize(new Dimension(100, 100));
    }

    // Invoked when panel is added to a container
    public void addNotify()
    {
// Call the superclass and start the timer
        super.addNotify();
        timer.start();
    }

    // Invoked when panel is removed from a container
    public void removeNotify()
    {
// Call the superclass and stop the timer
        timer.stop();
        super.removeNotify();
    }

    //
    public void actionPerformed(ActionEvent event)
    {
        // Update the calendar's time
        this.calendar.setTime(new java.util.Date());

        // Extract the hours minutes and seconds
        int hours = this.calendar.get(Calendar.HOUR);
        int minutes = this.calendar.get(Calendar.MINUTE);
        int seconds = this.calendar.get(Calendar.SECOND);

        // Using a little trigonometry, set the transforms to rotate
        // each hand into the proper position.  Center the rotation
        // around the pivot point (50, 50) instead of the origin
        hourTransform.setToRotation(((double) hours) *
                (Math.PI / 6.0), 50, 50);
        minuteTransform.setToRotation(((double) minutes) *
                (Math.PI / 30.0), 50, 50);
        secondTransform.setToRotation(((double) seconds) *
                (Math.PI / 30.0), 50, 50);

        // Force the component to repaint ASAP
        repaint();
    }

    // This is an alternative to creating a UI delegate.  Since JPanel's
    // paint() method only paints the border and backgound, we can just
    // override the paint method of the component to do the graphics.
    public void paint(Graphics g)
    {
        // Call the superclass first to paint the border (if one is assigned)
        super.paint(g);

        // Get the graphics context and turn on anti-aliasing
        Graphics2D g2 = (Graphics2D) g;
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                RenderingHints.VALUE_ANTIALIAS_ON);

        // Set the paint for the clock face and fill it in
        g2.setPaint(faceColor);
        g2.fill(face);

        // Set the paint to black and draw the clock's outline
        g2.setPaint(Color.black);
        g2.draw(face);

        // Fill in the 12 ticks around the face of the clock
        for (double p = 0.0; p < 12.0; p += 1.0)
        {
            // This is probably terribly inefficient and should be
            // done statically or in the constructor - draw the
            // tick as a transformed shape that is rotated.
            g2.fill(tick.createTransformedShape(
                    AffineTransform.getRotateInstance((Math.PI / 6.0)  * p,
                            50, 50)));
        }

        // Set the paint and draw the hour hand.  It is lowest in the
        // 'z-order' so will appear underneath the other hands.  Notice
        // how each hand is transformed by a different <AffineTransform>.
        g2.setPaint(hourColor);
        g2.fill(hourHand.createTransformedShape(hourTransform));

        // Set the paint and draw the minute hand, the second hand,
        // the pivot and the center pin
        g2.setPaint(minuteColor);
        g2.fill(minuteHand.createTransformedShape(minuteTransform));
        g2.setPaint(secondColor);
        g2.fill(secondHand.createTransformedShape(secondTransform));
        g2.fill(pivot);
        g2.setPaint(pinColor);
        g2.fill(centerPin);
    }

    // A little test frame to show off our fancy clock
    public static void main(String[] args)
    {
        JFrame frame = new JFrame();
        frame.setLocation(700, 400);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.getContentPane().add(new Main());
        frame.pack();
        frame.show();
    }
}

 

---

 

Okay，Here are the points :-P
下面進階深入探究一下這段代碼：

 

#1#關於每次圖形變換之后，變化前圖形的擦除？

Ans：是這樣的，一般來講有兩種辦法實現所謂的擦除效果以完成動畫：

1.手動擦除，直接對這個paint出來的geom下的類調用clear**方法，或者直接使用新的顏色/畫布將需要擦除的形狀刪除/覆蓋。

2.super.paint（g）這個方法有點神奇，以后需要進一步探討一下，直接在子類的paint方法之中調用父類的paint的方法來實現“擦除”。

代碼中方法其實是第一種，在每次repaint過程中，都會有一次將整個表盤“覆蓋”重畫的過程，但是不得不說，這么實現的話每秒鍾都需要對整個表盤全部的空間進行重畫，是很浪費時間/空間的。

 

#2#怎么遞推實現的表盤圓周上的12個標記的繪制？

Ans：這里用了一個新的類叫做AffineTransform。使用這個類的方法是在geom下的幾何類中直接調用createTransformedShape（AffineTransform at）返回一個Shape類型，這時匿名調用這個類進行draw（勾勒輪廓）/fill（填充顏色）方法可以完成對轉換完成之后的幾何體的繪制。關於AffineTransform類的更多用法和數學解釋：

http://www.apihome.cn/api/java/AffineTransform.html

 

#3#怎么實現消除斜線的鋸齒狀？

Ans：這個我真的不懂，但是我知道是下面這段神奇的代碼起到的作用,至於這個“渲染提示”具體的用法還得慢慢學..

g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,RenderingHints.VALUE_ANTIALIAS_ON);

#4#阿西巴，addNotify方法到底有沒有用？
Ans：addNotify方法是在JPanel添加到JComponent上的時候用的，本例中是在添加pane的直接啟動計時器（Timer），關於代碼最后那個若有若無的getContentPane（）為什么會出現，其實還要從JFrame的四層結構開始說起（傳送門見下）：

http://tieba.baidu.com/p/2004216123