46
繪繪繪繪繪 Draw Paint & Animation

繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue

  • View
    293

  • Download
    0

Embed Size (px)

Citation preview

Page 1: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue

繪圖與動畫

Draw/ Paint & Animation

Page 2: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue

設定顏色顏色的設定有兩種方式

顏色常數常數 顏色 常數 顏色

Color.black 黑色 Color.magenta 洋紅色Color.blue 藍色 Color.orange 橙色Color.cyan 青綠色 Color.pink 粉紅色

Color.darkGray 暗灰色 Color.red 紅色Color.gray 灰色 Color.white 白色

Color.green 綠色 Color.yellow 黃色Color.lightGray 亮灰色

Page 3: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue

設定顏色 ( 續 )自行指定顏色

• 以 R(ed)G(reen)B(lue) 三原色自行配製• R 0~255• G 0~255• B 0~255

常數 RGB 常數 RGB

Color.black Color(0,0,0) Color.magenta Color(255,0,255)

Color.blue Color(0,0,255) Color.orange Color(255,200,0)

Color.cyan Color(0,255,255) Color.pink Color(255,175,175)

Color.darkGray Color(64,64,64) Color.red Color(255,0,0)

Color.gray Color(128,128,128) Color.white Color(255,255,255)

Color.green Color(0,255,0) Color.yellow Color(255,255,0)

Color.lightGray Color(192,192,192)

Page 4: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue
Page 5: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue

繪圖方法paint() 方法

定義於 Component 類別中要在容器上繪圖時,必須在程式中實作 paint() 方法,並提供一個 Graphics 類別的物件供繪圖之用當元件需要繪圖時, Graphics 物件 g 自動的傳給 paint() 方法語法

public void paint(Graphics g)

Page 6: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue

畫線、矩形畫線

drawLine(int x1, int y1, int x2, int y2)畫矩形

drawRect(int x, int y, int width, int height)畫實心矩形

fillRect(int x, int y, int width, int height)畫圓角矩形

drawRoundRect(int x, int y, int width, int height, int arcWidth, int arcHeight)畫實心圓角矩形

fillRoundRect(int x, int y, int width, int height, int arcWidth, int arcHeight)

Page 7: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue
Page 8: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue

畫弧、畫圓畫弧drawArc(int x1, int y1, int width, int height , int start

angle , int arcAngle)畫實心弧fillArc(int x1, int y1, int width, int height , int startan

gle , int arcAngle)畫圓drawOval(int x, int y, int width, int height)畫圓角矩形fillOval(int x, int y, int width, int height)

Page 9: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue
Page 10: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue

畫多邊形畫多邊線drawPolyline(int xPoints[], int ypoints[], int npoints)

畫多邊形drawPolygon(int xPoints[], int ypoints[], int npoint

s)

畫實心多邊形fillPolygon(int xPoints[], int ypoints[], int npoints)

Page 11: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue
Page 12: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue

畫文字drawString(String str, int x, int y)drawString(String str, float x, float y)

Page 13: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue

Graphics2D 類別Graphics2D 類別式一個抽象類別,繼承自 Graphics 類別,對幾何圖形提供「座標轉移」、「顏色控制」、「文字繪製」等等功能提供給 Graphics2D 類別物件的座標是一個與設備無關的座標體系,稱為「用戶空間 (user space) 」, Graphics2D 提供一個 AffineTransform物件可將用戶空間的座標轉換為與設備有關的座標體系,稱為設備空間每一個 Graphics2D 物件都結合一個 GraphicsConfiguration 物件,它定義繪製目標的特性,如繪點 (pixel) 的格式及解析度等特性

Page 14: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue

Graphics2D 的主要屬性 (1)paint 屬性public abstract void setPaint(Paint paint)提供繪製圖形線條的顏色

Page 15: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue

Graphics2D 的主要屬性 (2)stroke 屬性public abstract void setStroke(Stroke s)提供繪製圖形線條樣式

Page 16: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue

Graphics2D 的主要屬性 (2)線條的樣式可由 BasicStroke 類別予以設定虛線樣式

BasicStroke(float width, int cap, int join, float miterlimit, float dash[], float dash_phase)

參數 說明 參數 說明width 線條寬度 miterlimit 線界連接值cap 邊界的修飾 dash 虛線的 patternjoin 兩段間的修飾 dash_phase pattern 的起始位置

Page 17: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue
Page 18: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue

Graphics2D 的主要屬性 (3)font 屬性public abstract void setFont(Font font)提供繪製文字的字型

Page 19: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue

Graphics2D 的主要屬性 (4 、 5)transform 屬性

提供繪製圖形線條的座標轉換體系clip 屬性public abstract void setClip(int x, int y, int w, int h)提供繪製圖形的邊界(x, y) 左上角座標圖形寬為 w 、高為 h

Page 20: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue
Page 21: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue

Graphics2D 的主要屬性 (6)composite 屬性public abstract void setComposite(Composite comp)提供兩個繪製圖形的重疊屬性

Page 22: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue

圖形填充漸層色以 GradientPaint 類別設定漸層色

Page 23: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue

圖形重疊顯示模式setXORMode()

Page 24: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue

顯示圖形使用 drawImage() 方法

drawImage(Image img1, int x1, int y1, ImageObserver observer)

Page 25: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue

動畫動畫的原理是一系列的圖片依一定的時間間隔依序顯示出來javax.swing 的 Timer 介面即是用以控制時間間隔的類別當要建立一個 Timer 類別物件時,必須提供兩個引數

延遲時間(以毫秒計)處理該動作事件的委託物件 addActionListener() ,以 start() 方法啟動 Timer 物件

Page 26: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue

Timer 類別的建構子及常用方法建構子

public Timer(int delay, ActionListener listener)

傾聽物件public void addActionListener(ActionListener listener)

事件public int getDelay() // 傳回延遲時間public boolean isRepeats() // 傳回是否一直重複public boolean isRunning() // 傳回 Timer 物件是否正在執行public void restart() // 重新啟動 Timer 物件public void setDelay() // 設定延遲時間public void setRepeats() // 設定是否一直重複public void start() // 啟動 Timer 物件public void stop() // 停止 Timer 物件之執行

Page 27: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue
Page 28: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue
Page 29: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue

影像處理技巧放大與縮小影像

原始尺寸g.drawImage(img1,x,y,this)

img1 : 影像檔名x,y : 左上角座標位置this : 目前所屬視窗容器

調整影像尺寸g.drawImage(img1,x,y,w,h,this)

w : 影像寬度h : 影像長度

Page 30: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue
Page 31: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue

影像處理技巧 ( 續 )翻轉影像

原始影像g.drawImage(img1,x1,y1,x2,y2,0,0,ow,oh,this)

0,0,ow,oh : 原始影像左上角和右下角的相對影像位置x2=x1+ow y2=y1+oh

上下翻轉g.drawImage(img1,x1,y1,x2,y2,0,oh,ow,0,this)

將垂直座標交換左右翻轉

g.drawImage(img1,x1,y1,x2,y2,ow,0,0,oh,this)將水平座標交換

隨 0,0,ow 與 oh 值的變化可完成指定區域的局部翻轉

Page 32: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue
Page 33: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue

影像處理技巧 ( 續 )旋轉 ( rotate() 方法 )

Graphics2D g2;g2.rotate(math.toRadians(10));傾斜 ( shear() 方法 )

Graphics2D g2;g2.shear(shx, shy);

• shx : 水平方向的增量• shy : 垂直方向的增量

平移 ( translate() 方法 )Graphics2D g2;g2.translate(tx, ty);

• 目前的座標系統平移至 tx, ty ( 新的原點座標 )

Page 34: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue
Page 35: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue

影像處理技巧 ( 續 )影像裁減

首先利用 Graphics2D 繪製圖形的方法建立 Shape圖形物件 ( 必須匯入 java.awt.geom.*)

Shape sp1=new Ellipse2D.Double(100,100,250,150);g2.draw(sp1);

接著使用 setClip() 方法以 sp1 為裁減區域G2.setClip(sp1);

最後使用 drawImage() 方法根據 sp1 的區域範圍將影像顯示出來

Rectangle r1=sh1.getBounds();g2.drawImage(img1,r1.x,r1.y,r1.width,r1.height,this);

Page 36: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue
Page 37: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue

Graphics2D 圖形繪製主要方法draw()public abstract void draw(Shape s)

• 繪製目前 Graphics2D 物件的圖形 s輪廓fill()public abstract void fill(Shape s)

• 填滿目前 Graphics2D 物件的圖形drawString()

參考前面【畫文字】部分drawImage()

參考前面【顯示圖形】部分

Page 38: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue

Graphics2D 的幾何圖形定義於 java.awt.geom 程式套件中,因此程式必須匯入import java.awt.geom.*;點

Point2D.Float(x, y)Point2D.Float p1=new Point2D.Float(1.0f, 2.0f);

Point2D.Double(x, y)Point2D.Double p1=new Point2D.Double(3.0, 4.0);

Page 39: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue

Graphics2D 的幾何圖形 ( 續 )直線

Line2D.FloatLine2D.Double

矩形Rectangle2D.FloatRectangle2D.Double

圓角矩形RoundRectangle2D.FloatRoundRectangle2D.Double

Page 40: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue
Page 41: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue

Graphics2D 的幾何圖形 ( 續 )弧形

Arc2D.FloatArc2d.Double橢圓形

Ellipse2D.FloatEllipse2D.Double

Page 42: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue
Page 43: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue

選擇器 (chooser)色彩選擇器

javax.swing.JColorChooserJColorChooser cc1=new JColorChooser();getContentPane().add(cc1,BorderLayout.CENTER);

Orcolor1=showDialog(sample.this,“選取顏色” ,color1);

Page 44: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue
Page 45: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue

選擇器 (chooser)( 續 )檔案選擇器

javax.swing.JFileChooser必須匯入 import javax.swing.filechooser.*;JFileChooser fc1=new JFileChooser();fc1.showOpenDialog(new JFrame());開啟檔名的指定

File file1; // 必須匯入 java.io.*;file1=fc1.getSeletedFile();String fname;fname=file1.getName();

Page 46: 繪圖與動畫 Draw / Paint & Animation. 設定顏色 顏色的設定有兩種方式 顏色常數 常數顏色常數顏色 Color.black 黑色 Color.magenta 洋紅色 Color.blue