Window Shape การสร้างเฟรมรูปร่างต่างๆในภาษาจาวา
ปัจจุบันมีโปรแกรมประยุกต์หลายโปรแกรมที่มีการออกแบบ GUI ของโปรแกรมที่ดูน่าใช้โดยเฉพาะรูปร่างของเฟรมซึ่งนอกจากจะดูสวยงามแล้วยังสื่อถึงความมีเอกลักษณ์ขององกรที่สร้างโปรแกรมขึ้นมา
ยกตัวอย่างโปรแกรมต่างๆเหล่านี้ได้แก่ winamp, google chrome, Windows live messenger, และโปรแกรมอื่นๆอีกมากมาย ซึ่งโปรแรมที่กล่าวมาเห็นว่าเฟรมหรือ GUI form ของโปรแกรม ไม่ได้จำกัดอยู่ที่ หน้าตาของเฟรมที่เป็น กรอบสีน้ำเงินเท่านั้นแต่โปรแกรมเหล่านี้ใช้เฟรมรูปร่างที่เป็นเอกลักษณ์ของตนเองที่ไม่เหมือนใคร ดังตัวอย่าง
แต่โปรแกรมเหล่านี้ถูกเขียนด้วยภาษาที่ต่างกัน สำหรับบทความนี้จะอ้างถึงภาษาจาวา ซึ่งการสร้างเฟรมก็จะมีขั้นตอนอยู่คร่าวดังต่อไปนี้
1. import com.sun.awt.AWTUtilities;
2.สร้าง instance variable JFrame ขึ้นมา 1 ตัว หรืออาจสร้างคลาสใหม่แล้วสืบทอด(extends)คลาส JFrame พร้อมกับกำนหดคุณสมบัติต่างๆตามต้องการ
ตัวอย่าง
import com.sun.awt.AWTUtilities;
import javax.swing.JFrame;
public class FancyFrames extends JFrame{
public FancyFrames() {
setDefaultCloseOperation(EXIT_ON_CLOSE);
setMinimumSize(new Dimension(500, 400));
setLayout(null);
}
public static void main(String args[]){
new FancyFrames().setVisible(true);
}
}
จากโค้ดข้างบนจะได้เฟรมสี่เหลี่ยมดังรูป ขนาด 500,400
ลองแทรก เมธอด setUndecorated(true); ลงไปใน constructor ดังนี้
import com.sun.awt.AWTUtilities;
import javax.swing.JFrame;
public class FancyFrames extends JFrame{
public FancyFrames() {
setDefaultCloseOperation(EXIT_ON_CLOSE);
setMinimumSize(new Dimension(500, 400));
setLayout(null);
setUndecorated(true);
}
public static void main(String args[]){
new FancyFrames().setVisible(true);
}
}
จากโค้ดข้างบนจะได้เฟรมสี่เหลี่ยมดังรูป ขนาด 500,400
จะเห็นได้ว่าหลังจากแทรกเมธอด setUndecorated(true); ลงไปในโค้ดโปรแกรมเมื่อรันโปรแกรมจะเฟรมที่ไม่มีกรอบ(กรอบสีน้ำเงินหายไปปุ่ม operation bar ก็หายไปด้วย)
3.สร้าง instance variable JLabel ขึ้นมา 1 ตัว พร้อมกับกำหนดคุณสมบัติและ ไอคอนให้กับ JLabel และวางลงไปในเฟรมดังนี้
สร้าง imageIcon
ImageIcon icon=new ImageIcon("aa.png");
JLabel l=new JLabel(icon);
l.setBounds(5, 50, icon.getIconWidth(),icon.getIconHeight());
add(l);
*หมายเหตุ : อย่าลืม import javax.swing.ImageIcon; ต้องมีรูปภาพ ชื่อ aa.png อยู่ในโฟล์เดอร์เดียวกันกับไฟล์โปรแกรม
สำหรับรูปภาพ aa.png ในที่นี้ คือ
ขนาด 300×292 พิกเซล
จากข้อ 3 จะได้โค้ดเป็นดังนี้
import com.sun.awt.AWTUtilities;
import javax.swing.JFrame;
import javax.swing.ImageIcon;
public class FancyFrames extends JFrame{
public FancyFrames() {
setDefaultCloseOperation(EXIT_ON_CLOSE);
setMinimumSize(new Dimension(500, 400));
setLayout(null);
setUndecorated(true);
ImageIcon icon=new ImageIcon("aa.png");
JLabel l=new JLabel(icon);
l.setBounds(5, 50, icon.getIconWidth(),icon.getIconHeight());
add(l);
}
public static void main(String args[]){
new FancyFrames().setVisible(true);
}
}
จากโค้ดข้างบนจะได้เฟรมสี่เหลี่ยมดังรูป ขนาด 500,400 พร้อมกับมีรูปหัวใจวางอยู่บนเฟรม
4. สร้าง shape เพื่อวาดเฟรมให้มีรูปร่างเหมือนรูปหัวใจดังต่อไปนี้
int xpoints[] = {151,158,166,176,187,197,214,232,245,262,274,285,296,301,303,301,295,286,273,258,239,219,
200,187,176,168,162,160,155,154,150,148,147,137,124,109,92,70,49,29,16,7,5,4,4,5,10,19,28,37,50,66,87,108,
125,135,143,149};
int ypoints[] = {94,82,72,63,56,51,50,49,49,57,66,79,94,107,126,143,167,189,209,227,246,263,282,296,312,324,
335,340,333,336,337,336,332,317,298,280,263,244,225,200,174,147,139,129,117,105,88,74,64,58,51,49,48,
54,63,73,82,90};
Shape shape = new Polygon(xpoints, ypoints, xpoints.length);
Shape จะมีรูปร่างเทียบเท่ารูปหัวใจ
*หมายเหตุ : อย่าลืม import java.awt.Shape;
จากนั้น เรียกใช้ AWTUtilities.setWindowShape(this, shape); เพื่อวาดเฟรมใหม่ จะได้โค้ดดังต่อไปนี้
import com.sun.awt.AWTUtilities;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class FancyFrames extends JFrame{
public FancyFrames() {
setDefaultCloseOperation(EXIT_ON_CLOSE);
setMinimumSize(new Dimension(500, 400));
setLayout(null);
setUndecorated(true);
ImageIcon icon=new ImageIcon("aa.png");
JLabel l=new JLabel(icon);
l.setBounds(5, 50, icon.getIconWidth(),icon.getIconHeight());
add(l);
int xpoints[] = {151,158,166,176,187,197,214,232,245,262,274,285,296,301,303,301,
295,286,273,258,239,219,200,187,176,168,162,160,155,154,150,148,147,137,124,109,
92,70,49,29,16,7,5,4,4,5,10,19,28,37,50,66,87,108,125,135,143,149};
int ypoints[] = {94,82,72,63,56,51,50,49,49,57,66,79,94,107,126,143,167,189,
209,227,246,263,282,296,312,324,335,340,333,336,337,336,332,317,298,280,263,244,
225,200,174,147,139,129,117,105,88,74,64,58,51,49,48,54,63,73,82,90};
Shape shape = new Polygon(xpoints, ypoints, xpoints.length);
AWTUtilities.setWindowShape(this, shape);
}
public static void main(String args[]){
new FancyFrames().setVisible(true);
}
}
จะเห็นได้ว่ามีรูปหัวใจเกิดขึ้นบนจอแล้ว
เพิ่มโค้ดลงไปดังนี้เพื่อให้สามารถแดรกเมาส์เคลื่อนย้ายเฟรมรูปหัวใจของเราได้
ประกาศฟิลด์ private int x, y;
addMouseListener(new MouseAdapter() {
public void mousePressed(MouseEvent e) {
x = e.getX();
y = e.getY();
}
});
addMouseMotionListener(new MouseMotionAdapter() {
public void mouseDragged(MouseEvent e) {
setLocation(e.getXOnScreen() – x, e.getYOnScreen() – y);
}
});
จะได้ดังนี้
import com.sun.awt.AWTUtilities;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class FancyFrames extends JFrame{
private int x, y;
public FancyFrames() {
setDefaultCloseOperation(EXIT_ON_CLOSE);
setMinimumSize(new Dimension(500, 400));
setLayout(null);
setUndecorated(true);
ImageIcon icon=new ImageIcon("aa.png");
JLabel l=new JLabel(icon);
l.setBounds(5, 50, icon.getIconWidth(),icon.getIconHeight());
add(l);
int xpoints[] = {151,158,166,176,187,197,214,232,245,262,274,285,296,301,303,301,
295,286,273,258,239,219,200,187,176,168,162,160,155,154,150,148,147,137,124,109,
92,70,49,29,16,7,5,4,4,5,10,19,28,37,50,66,87,108,125,135,143,149};
int ypoints[] = {94,82,72,63,56,51,50,49,49,57,66,79,94,107,126,143,167,189,
209,227,246,263,282,296,312,324,335,340,333,336,337,336,332,317,298,280,263,244,
225,200,174,147,139,129,117,105,88,74,64,58,51,49,48,54,63,73,82,90};
Shape shape = new Polygon(xpoints, ypoints, xpoints.length);
AWTUtilities.setWindowShape(this, shape);
addMouseListener(new MouseAdapter() {
public void mousePressed(MouseEvent e) {
x = e.getX();
y = e.getY();
}
});
addMouseMotionListener(new MouseMotionAdapter() {
public void mouseDragged(MouseEvent e) {
setLocation(e.getXOnScreen() – x, e.getYOnScreen() – y);
}
});
}
public static void main(String args[]){
new FancyFrames().setVisible(true);
}
}
นี่คือตัวอย่างเบื้องต้นครับวันหลังจะนำมาฝากอีกวันนี้พอแค่นี้
วันนี้ผมขอกลับบ้านก่อนนะครับ
อ้อ ถ้าใครจะเอาโค้ดไปทำตามนะครับเอาไปได้ครับผมแนะนำว่าให้ใช้ netbeans นะครับไม่งั้นคอมไพล์ไม่ผ่านแน่เพราะมันจะฟ้องว่า หา com.sun.awt.AWTUtilities ไม่เจอ จะต้องไปเซ็ตค่าอะไรยุ่งยากไปหมด
บทความนี้เขียนขึ้นวันที่ 11 มีนาคม 53 โดย วิเชียร โตโส ชื่อออนไลน์ CCHIAN E-Mail Dr.chian (at) hotmail dot com
My Style 