WindowShape in java

 

Window Shape การสร้างเฟรมรูปร่างต่างๆในภาษาจาวา

ปัจจุบันมีโปรแกรมประยุกต์หลายโปรแกรมที่มีการออกแบบ GUI ของโปรแกรมที่ดูน่าใช้โดยเฉพาะรูปร่างของเฟรมซึ่งนอกจากจะดูสวยงามแล้วยังสื่อถึงความมีเอกลักษณ์ขององกรที่สร้างโปรแกรมขึ้นมา

ยกตัวอย่างโปรแกรมต่างๆเหล่านี้ได้แก่ winamp, google chrome, Windows live messenger, และโปรแกรมอื่นๆอีกมากมาย ซึ่งโปรแรมที่กล่าวมาเห็นว่าเฟรมหรือ GUI form ของโปรแกรม ไม่ได้จำกัดอยู่ที่ หน้าตาของเฟรมที่เป็น กรอบสีน้ำเงินเท่านั้นแต่โปรแกรมเหล่านี้ใช้เฟรมรูปร่างที่เป็นเอกลักษณ์ของตนเองที่ไม่เหมือนใคร ดังตัวอย่าง

clip_image002clip_image004clip_image006

 

แต่โปรแกรมเหล่านี้ถูกเขียนด้วยภาษาที่ต่างกัน สำหรับบทความนี้จะอ้างถึงภาษาจาวา ซึ่งการสร้างเฟรมก็จะมีขั้นตอนอยู่คร่าวดังต่อไปนี้

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

clip_image008

ลองแทรก เมธอด 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

clip_image010

จะเห็นได้ว่าหลังจากแทรกเมธอด 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 ในที่นี้ คือ

aa

ขนาด 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 พร้อมกับมีรูปหัวใจวางอยู่บนเฟรม

clip_image014

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);

}

}

clip_image016

จะเห็นได้ว่ามีรูปหัวใจเกิดขึ้นบนจอแล้ว

เพิ่มโค้ดลงไปดังนี้เพื่อให้สามารถแดรกเมาส์เคลื่อนย้ายเฟรมรูปหัวใจของเราได้

ประกาศฟิลด์ 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

ข้อความนี้ถูกเขียนใน ไม่มีหมวดหมู่ คั่นหน้า ลิงก์ถาวร

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s