Cách Vẽ Trong Eclipse: Hướng Dẫn Chi Tiết Từ Cơ Bản Đến Nâng Cao

1. Giới thiệu chung về Eclipse và tính năng vẽ

Eclipse không chỉ là một môi trường phát triển tích hợp (IDE) mạnh mẽ cho Java, C++, Python và nhiều ngôn ngữ khác, mà còn cung cấp một loạt các plugin và công cụ hỗ trợ việc vẽ đồ họa, tạo giao diện người dùng (UI), và thiết kế sơ đồ. Khi nói tới “cách vẽ trong Eclipse”, chúng ta thường nhắc tới hai khía cạnh chính:

1. Vẽ giao diện người dùng (UI) bằng WindowBuilder – một plugin cho phép tạo các thành phần giao diện (Swing, SWT, GWT) bằng cách kéo‑thả và chỉnh sửa trực quan.
2. Vẽ đồ họa 2D/3D trong Java – sử dụng thư viện Java2D, JavaFX, hoặc các thư viện bên thứ ba (Processing, LWJGL) trong dự án Eclipse để thực hiện các bản vẽ, game, mô phỏng.

Bài viết này sẽ đưa bạn qua từng bước, từ cài đặt môi trường, tạo dự án, đến cách sử dụng các công cụ vẽ trong Eclipse một cách hiệu quả. Mỗi phần đều kèm theo ví dụ thực tế, mã nguồn mẫu và mẹo tối ưu hoá.

2. Chuẩn bị môi trường Eclipse

2.1. Tải và cài đặt Eclipse IDE

1. Truy cập trang chính thức: https://www.eclipse.org/downloads/.
2. Chọn Eclipse IDE for Java Developers (đối với Java) hoặc Eclipse IDE for Enterprise Java and Web Developers nếu bạn cần các công cụ web.
3. Giải nén và chạy file eclipse.exe (Windows) hoặc Eclipse.app (macOS). Đối với Linux, chạy ./eclipse.

2.2. Cài đặt Java Development Kit (JDK)

Eclipse yêu cầu JDK để biên dịch và chạy mã Java.

• Tải JDK mới nhất (ví dụ JDK 21) từ Oracle hoặc OpenJDK.
• Thiết lập biến môi trường JAVA_HOME và thêm %JAVA_HOME%\bin vào PATH.

2.3. Cài đặt plugin hỗ trợ vẽ

Có thể bạn quan tâm: Cách Vẽ Trong Ảnh: Hướng Dẫn Chi Tiết Từ Cơ Bản Đến Nâng Cao

2.3.1. WindowBuilder

WindowBuilder là công cụ kéo‑thả để tạo UI Swing, SWT, GWT.

1. Mở Eclipse → Help → Eclipse Marketplace.
2. Tìm “WindowBuilder” và nhấn Install.
3. Chọn WindowBuilder (Swing, SWT, GWT Designer) → Next → Finish.
4. Khởi động lại Eclipse.

2.3.2. Eclipse Graphical Editing Framework (GEF)

GEF giúp tạo các editor đồ họa tùy chỉnh (ví dụ diagram editor).

1. Help → Install New Software…
2. Nhập URL: http://download.eclipse.org/tools/gef/updates/releases/ (đối với phiên bản mới nhất).
3. Chọn GEF SDK → Next → Finish.

2.3.3. Plugin cho JavaFX

Nếu muốn vẽ bằng JavaFX:

• e(fx)clipse: hỗ trợ thiết kế UI JavaFX trong Eclipse.
• Install: Help → Eclipse Marketplace → Search “e(fx)clipse” → Install.

3. Vẽ giao diện người dùng bằng WindowBuilder

3.1. Tạo dự án Swing

1. File → New → Java Project → Đặt tên SwingDrawingDemo.
2. Click Finish.
3. Nhấn File → New → Other… → WindowBuilder → Swing Designer → JFrame.
4. Đặt tên lớp MainFrame.

3.2. Giao diện kéo‑thả

Khi mở file MainFrame.java, Eclipse sẽ hiển thị hai tab: Source và Design.

• Design: kéo thả các thành phần từ Palette (Button, Label, JPanel…) vào cửa sổ.
• Source: Eclipse tự động sinh mã Java tương ứng.

3.2.1. Thêm một Canvas để vẽ

1. Từ Palette, chọn JPanel, kéo vào JFrame.
2. Trong Properties, đổi name thành canvasPanel.
3. Đặt Layout của canvasPanel thành null để tự do vẽ.

3.3. Viết mã vẽ trên JPanel

Mở Source và thêm lớp con CanvasPanel kế thừa JPanel:

@SuppressWarnings("serial")
class CanvasPanel extends JPanel { private java.util.List<Shape> shapes = new java.util.ArrayList<>(); public CanvasPanel() { setBackground(Color.WHITE); // Lắng nghe sự kiện chuột addMouseListener(new MouseAdapter() { public void mousePressed(MouseEvent e) { startPoint = e.getPoint(); } public void mouseReleased(MouseEvent e) { Shape s = createShape(startPoint, e.getPoint()); if (s != null) { shapes.add(s); repaint(); } } }); addMouseMotionListener(new MouseMotionAdapter() { public void mouseDragged(MouseEvent e) { // Vẽ tạm thời khi kéo currentPoint = e.getPoint(); repaint(); } }); } private Point startPoint, currentPoint; private Shape createShape(Point p1, Point p2) { int x = Math.min(p1.x, p2.x); int y = Math.min(p1.y, p2.y); int w = Math.abs(p1.x - p2.x); int h = Math.abs(p1.y - p2.y); return new Rectangle(x, y, w, h); // Vẽ hình chữ nhật } @Override protected void paintComponent(Graphics g) { super.paintComponent(g); Graphics2D g2 = (Graphics2D) g; // Vẽ các hình đã lưu for (Shape s : shapes) { g2.draw(s); } // Vẽ hình đang kéo if (startPoint != null && currentPoint != null) { Shape tmp = createShape(startPoint, currentPoint); g2.setStroke(new BasicStroke(1, BasicStroke.CAP_BUTT, BasicStroke.JOIN_BEVEL, 0, new float{5}, 0)); g2.setColor(Color.GRAY); g2.draw(tmp); } }
}

Sau đó, trong MainFrame:

public MainFrame() { setTitle("Demo Vẽ trong Swing"); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setSize(800, 600); CanvasPanel canvas = new CanvasPanel(); getContentPane().add(canvas, BorderLayout.CENTER);
}

Bây giờ, chạy MainFrame. Bạn sẽ có một cửa sổ trắng cho phép vẽ các hình chữ nhật bằng chuột.

3.4. Mẹo tối ưu khi dùng WindowBuilder

Mẹo	Mô tả
Sử dụng GroupLayout	Đối với bố cục phức tạp, GroupLayout tự động cân chỉnh khi thay đổi kích thước.
Preview Mode	Nhấn Ctrl+Shift+F để đồng bộ mã nguồn và thiết kế, tránh lỗi “Component not found”.
Custom Component	Khi kéo một component tùy chỉnh, tạo một lớp kế thừa JComponent và đăng ký trong Palette (Right‑click → Add New Component).
Sử dụng Resource Bundle	Đặt text, icon vào file .properties để hỗ trợ đa ngôn ngữ và dễ bảo trì.

4. Vẽ đồ họa 2D bằng Java2D trong Eclipse

Java2D là API chuẩn của Java để vẽ hình học, văn bản và hình ảnh. Dưới đây là quy trình tạo một ứng dụng vẽ cơ bản.

Có thể bạn quan tâm: Cách Vẽ Trong Word: Hướng Dẫn Chi Tiết Từ Cơ Bản Đến Nâng Cao

4.1. Tạo dự án Java mới

• File → New → Java Project → Tên Java2DDrawing.
• Tạo package com.example.drawing.

4.2. Lớp chính DrawingApp

package com.example.drawing; import javax.swing.;
import java.awt.;
import java.awt.event.;
import java.util.ArrayList;
import java.util.List; public class DrawingApp extends JFrame { private DrawingCanvas canvas; public DrawingApp() { super("Java2D Drawing Demo"); setDefaultCloseOperation(EXIT_ON_CLOSE); setSize(900, 700); canvas = new DrawingCanvas(); add(canvas, BorderLayout.CENTER); add(createToolBar(), BorderLayout.NORTH); } private JToolBar createToolBar() { JToolBar tb = new JToolBar(); JButton clearBtn = new JButton("Clear"); clearBtn.addActionListener(e -> canvas.clear()); tb.add(clearBtn); return tb; } public static void main(String args) { SwingUtilities.invokeLater(() -> { new DrawingApp().setVisible(true); }); } // Canvas nội bộ class DrawingCanvas extends JPanel { private List<Drawable> drawables = new ArrayList<>(); private Point start, end; private Color currentColor = Color.BLUE; private int strokeWidth = 3; public DrawingCanvas() { setBackground(Color.WHITE); MouseAdapter ma = new MouseAdapter() { @Override public void mousePressed(MouseEvent e) { start = e.getPoint(); } @Override public void mouseReleased(MouseEvent e) { end = e.getPoint(); drawables.add(new Line(start, end, currentColor, strokeWidth)); repaint(); } @Override public void mouseDragged(MouseEvent e) { end = e.getPoint(); repaint(); // Vẽ tạm thời } }; addMouseListener(ma); addMouseMotionListener(ma); } public void clear() { drawables.clear(); repaint(); } @Override protected void paintComponent(Graphics g) { super.paintComponent(g); Graphics2D g2 = (Graphics2D) g; // Vẽ các đối tượng đã lưu for (Drawable d : drawables) { d.draw(g2); } // Vẽ đường đang kéo if (start != null && end != null) { g2.setColor(currentColor); g2.setStroke(new BasicStroke(strokeWidth)); g2.drawLine(start.x, start.y, end.x, end.y); } } } // Giao diện Drawable interface Drawable { void draw(Graphics2D g2); } // Implement Line static class Line implements Drawable { private final Point p1, p2; private final Color color; private final int width; public Line(Point p1, Point p2, Color color, int width) { this.p1 = p1; this.p2 = p2; this.color = color; this.width = width; } @Override public void draw(Graphics2D g2) { g2.setColor(color); g2.setStroke(new BasicStroke(width)); g2.drawLine(p1.x, p1.y, p2.x, p2.y); } }
}

Giải thích nhanh:

• Drawable là interface chung để mở rộng (Circle, Rectangle, Freehand…).
• DrawingCanvas lắng nghe sự kiện chuột, lưu các Drawable vào danh sách và gọi repaint().
• paintComponent chịu trách nhiệm vẽ lại toàn bộ nội dung mỗi khi cửa sổ được cập nhật.

4.3. Thêm các hình dạng khác

Bạn có thể tạo các lớp RectangleShape, OvalShape, FreehandPath triển khai Drawable. Ví dụ:

static class RectangleShape implements Drawable { private final Rectangle rect; private final Color color; private final int width; public RectangleShape(Point p1, Point p2, Color c, int w) { int x = Math.min(p1.x, p2.x); int y = Math.min(p1.y, p2.y); int wdt = Math.abs(p1.x - p2.x); int hgt = Math.abs(p1.y - p2.y); rect = new Rectangle(x, y, wdt, hgt); this.color = c; this.width = w; } @Override public void draw(Graphics2D g2) { g2.setColor(color); g2.setStroke(new BasicStroke(width)); g2.draw(rect); }
}

Sau khi thêm, chỉ cần trong mouseReleased quyết định loại hình cần tạo dựa vào một biến currentTool.

4.4. Tối ưu hoá hiệu năng

• Double Buffering: Swing đã bật mặc định, nhưng nếu bạn dùng Canvas hoặc BufferStrategy, hãy gọi setDoubleBuffered(true).
• Clip Region: Khi chỉ vẽ phần thay đổi, sử dụng Graphics2D#setClip để giảm tải.
• RepaintManager: Kiểm soát tần suất repaint bằng Timer nếu cần vẽ liên tục (ví dụ game).

5. Vẽ 3D với JavaFX

JavaFX cung cấp một API hiện đại cho đồ họa 2D/3D, hỗ trợ CSS, FXML và hiệu ứng mượt mà. Dưới đây là hướng dẫn nhanh để tạo một scene 3D trong Eclipse.

5.1. Cấu hình dự án JavaFX

Có thể bạn quan tâm: Cách Vẽ Trong Visio: Hướng Dẫn Chi Tiết Từ Cơ Bản Đến Nâng Cao

1. File → New → Project → JavaFX → JavaFX Project (nếu đã cài e(fx)clipse). Nếu không, tạo Java Project thông thường.
2. Thêm thư viện JavaFX SDK vào Build Path:
3. Right‑click project → Build Path → Configure Build Path → Libraries → Add External JARs.
4. Chọn các JAR trong thư mục lib của JavaFX SDK (ví dụ javafx-controls.jar, javafx-graphics.jar, javafx-base.jar).

5.2. Lớp Main JavaFX

package com.example.fx3d; import javafx.application.Application;
import javafx.scene.;
import javafx.scene.paint.Color;
import javafx.scene.shape.Box;
import javafx.scene.transform.Rotate;
import javafx.stage.Stage; public class Fx3DDemo extends Application { @Override public void start(Stage primaryStage) { // Tạo một khối (Box) Box box = new Box(200, 200, 200); box.setMaterial(new PhongMaterial(Color.CORNFLOWERBLUE)); // Camera PerspectiveCamera camera = new PerspectiveCamera(true); camera.setTranslateZ(-800); camera.setNearClip(0.1); camera.setFarClip(2000); camera.setFieldOfView(35); // Group chứa các node Group root = new Group(box); SubScene subScene = new SubScene(root, 800, 600, true, SceneAntialiasing.BALANCED); subScene.setCamera(camera); subScene.setFill(Color.LIGHTGRAY); // Xoay khối liên tục Rotate rotateX = new Rotate(0, Rotate.X_AXIS); Rotate rotateY = new Rotate(0, Rotate.Y_AXIS); box.getTransforms().addAll(rotateX, rotateY); AnimationTimer timer = new AnimationTimer() { long last = 0; @Override public void handle(long now) { if (last == 0) last = now; double delta = (now - last) / 1_000_000_000.0; rotateX.setAngle(rotateX.getAngle() + 30 delta); rotateY.setAngle(rotateY.getAngle() + 45 delta); last = now; } }; timer.start(); // Scene chính Group rootScene = new Group(subScene); Scene scene = new Scene(rootScene, 800, 600, true); primaryStage.setTitle("JavaFX 3D Demo"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String args) { launch(args); }
}

Điểm chú ý:

• PerspectiveCamera mang lại cảm giác sâu.
• AnimationTimer dùng để cập nhật góc quay mỗi frame.
• Các Rotate được gắn vào Box để thực hiện biến đổi.

5.3. Chạy dự án trong Eclipse

• Đối với JavaFX, cần thêm VM arguments để chỉ đường dẫn tới SDK:

--module-path "C:\javafx-sdk-21\lib" --add-modules=javafx.controls,javafx.fxml,javafx.graphics

• Run → Run Configurations → Arguments → VM arguments → dán dòng trên.

Khi chạy, bạn sẽ thấy một khối 3D xoay tròn, minh họa cách vẽ và điều khiển đối tượng 3D trong Eclipse.

6. Sử dụng Graphical Editing Framework (GEF) để tạo diagram editor

GEF là một framework mạnh mẽ cho phép xây dựng các editor đồ họa như UML diagram, flowchart, circuit diagram. Dưới đây là hướng dẫn tạo một editor đơn giản cho luồng công việc (workflow).

6.1. Tạo plug-in project

1. File → New → Project → Plug-in Project → Đặt tên com.example.workfloweditor.
2. Chọn Plug-in with a rich client application → Next.
3. Đánh dấu Generate an activator và This plug-in will make contributions to the UI.
4. Hoàn thành wizard.

6.2. Thêm GEF dependencies

Có thể bạn quan tâm: Cách Vẽ Trong Revit: Hướng Dẫn Chi Tiết Từ Cơ Bản Đến Nâng Cao

• Mở MANIFEST.MF → tab Dependencies → Add → chọn các bundle:
• org.eclipse.gef
• org.eclipse.gef.ui
• org.eclipse.ui.workbench
• org.eclipse.core.runtime

6.3. Kiến trúc cơ bản

com.example.workfloweditor
│
├─ model
│ └─ WorkflowNode.java
│ └─ WorkflowConnection.java
│
├─ editparts
│ └─ WorkflowEditPartFactory.java
│ └─ NodeEditPart.java
│ └─ ConnectionEditPart.java
│
├─ figures
│ └─ NodeFigure.java
│ └─ ConnectionFigure.java
│
└─ editor └─ WorkflowEditor.java

6.4. Định nghĩa Model

package com.example.workfloweditor.model; import java.util.ArrayList;
import java.util.List; public class WorkflowNode { private String name; private List<WorkflowConnection> outgoing = new ArrayList<>(); public WorkflowNode(String name) { this.name = name; } // Getter/Setter public String getName() { return name; } public List<WorkflowConnection> getOutgoing() { return outgoing; }
}

package com.example.workfloweditor.model; public class WorkflowConnection { private WorkflowNode source; private WorkflowNode target; public WorkflowConnection(WorkflowNode src, WorkflowNode tgt) { this.source = src; this.target = tgt; } public WorkflowNode getSource() { return source; } public WorkflowNode getTarget() { return target; }
}

6.5. EditPart và Figure

NodeFigure (đơn giản là một rectangle với label):

package com.example.workfloweditor.figures; import org.eclipse.draw2d.; public class NodeFigure extends Figure { private Label nameLabel; public NodeFigure(String name) { ToolbarLayout layout = new ToolbarLayout(); layout.setSpacing(5); setLayoutManager(layout); setBorder(new LineBorder()); nameLabel = new Label(name); add(nameLabel); setSize(100, 50); }
}

NodeEditPart:

package com.example.workfloweditor.editparts; import org.eclipse.gef.editparts.AbstractGraphicalEditPart;
import com.example.workfloweditor.model.WorkflowNode;
import com.example.workfloweditor.figures.NodeFigure; public class NodeEditPart extends AbstractGraphicalEditPart { @Override protected void createEditPolicies() { // Có thể thêm DragEditPolicy, DeletePolicy... } @Override protected IFigure createFigure() { WorkflowNode model = (WorkflowNode) getModel(); return new NodeFigure(model.getName()); } @Override protected List getModelSourceConnections() { return ((WorkflowNode) getModel()).getOutgoing(); }
}

ConnectionFigure và ConnectionEditPart tương tự, chỉ cần vẽ một đường thẳng.

6.6. EditPartFactory

package com.example.workfloweditor.editparts; import org.eclipse.gef.EditPart;
import org.eclipse.gef.EditPartFactory;
import com.example.workfloweditor.model.; public class WorkflowEditPartFactory implements EditPartFactory { @Override public EditPart createEditPart(EditPart context, Object model) { if (model instanceof WorkflowNode) { return new NodeEditPart(); } else if (model instanceof WorkflowConnection) { return new ConnectionEditPart(); } return null; }
}

6.7. Editor chính

package com.example.workfloweditor.editor; import org.eclipse.gef.ui.parts.GraphicalEditor;
import org.eclipse.gef.editparts.ScalableFreeformRootEditPart;
import com.example.workfloweditor.editparts.WorkflowEditPartFactory;
import com.example.workfloweditor.model.; public class WorkflowEditor extends GraphicalEditor { private WorkflowNode rootNode; public WorkflowEditor() { setEditDomain(new DefaultEditDomain(this)); } @Override protected void initializeGraphicalViewer() { GraphicalViewer viewer = getGraphicalViewer(); viewer.setRootEditPart(new ScalableFreeformRootEditPart()); viewer.setEditPartFactory(new WorkflowEditPartFactory()); // Tạo mô hình mẫu rootNode = new WorkflowNode("Start"); WorkflowNode node2 = new WorkflowNode("Process"); WorkflowNode node3 = new WorkflowNode("End"); rootNode.getOutgoing().add(new WorkflowConnection(rootNode, node2)); node2.getOutgoing().add(new WorkflowConnection(node2, node3)); viewer.setContents(rootNode); } @Override protected void configureGraphicalViewer() { super.configureGraphicalViewer(); // Thêm hành vi drag‑and‑drop, zoom… }
}

6.8. Đăng ký editor trong plugin.xml

<extension point="org.eclipse.ui.editors"> <editor class="com.example.workfloweditor.editor.WorkflowEditor" contributorClass="org.eclipse.ui.editors.text.TextEditorActionContributor" default="true" id="com.example.workfloweditor.editor" name="Workflow Diagram Editor"> </editor>
</extension>

Sau khi Run As → Eclipse Application, bạn sẽ thấy một cửa sổ Eclipse mới với menu File → New → Other… → Workflow Diagram. Mở nó, bạn sẽ thấy các node và connection được vẽ tự động dựa trên model.

6.9. Mở rộng

• Drag & Drop: Thêm DragEditPolicy cho node để di chuyển.
• Palette: Tạo một PaletteRoot để người dùng kéo các node mới vào canvas.
• Persistence: Lưu mô hình dưới dạng XML hoặc JSON để mở lại.

7. Lưu trữ và chia sẻ bản vẽ

Khi dự án của bạn đã hoàn thiện, việc lưu trữ và chia sẻ là quan trọng để đồng bộ với đồng nghiệp hoặc triển khai trên máy chủ.

Phương pháp	Ưu điểm	Nhược điểm
Git + Git LFS	Lưu trữ mã nguồn và file ảnh (PNG, SVG) trong cùng repo.	Cần cấu hình LFS cho file lớn.
Export SVG/PNG	Định dạng vector (SVG) giữ chất lượng khi phóng to.	Không thể chỉnh sửa lại trong IDE.
JAR chứa tài nguyên	Đóng gói toàn bộ UI và hình ảnh trong một file thực thi.	Khi cần thay đổi hình, phải rebuild.
Database BLOB	Lưu trực tiếp trong DB cho ứng dụng web.	Phức tạp hơn, cần quản lý schema.

Ví dụ, để xuất canvas Swing sang PNG:

public void saveCanvasAsPNG(JPanel canvas, File file) throws IOException { BufferedImage img = new BufferedImage(canvas.getWidth(), canvas.getHeight(), BufferedImage.TYPE_INT_ARGB); Graphics2D g2 = img.createGraphics(); canvas.paint(g2); g2.dispose(); ImageIO.write(img, "png", file);
}

Gọi hàm này trong ActionListener của nút “Save”.

8. Các lỗi thường gặp và cách khắc phục

Lỗi	Nguyên nhân	Giải pháp
ClassNotFoundException: javafx.application.Application	JavaFX chưa được thêm vào module path.	Thêm --module-path và --add-modules trong VM arguments.
Component not found khi dùng WindowBuilder	Thư viện UI chưa được import đúng.	Kiểm tra import và đảm bảo JDK đang dùng phù hợp với phiên bản Swing/SWT.
Canvas không vẽ lại khi resize	paintComponent không gọi super.paintComponent(g).	Luôn gọi super.paintComponent(g) để xóa background.
GEF editor không hiển thị node	Model không được set làm contents của viewer.	viewer.setContents(rootModel); sau khi khởi tạo model.
Performance lag khi vẽ nhiều shape	Vẽ trực tiếp trong paintComponent mà không dùng double buffering.	Sử dụng BufferedImage làm off‑screen buffer và vẽ lên đó.

9. Kết luận

Việc vẽ trong Eclipse không chỉ dừng lại ở việc tạo giao diện kéo‑thả mà còn mở rộng tới:

• Thiết kế UI chuyên nghiệp bằng WindowBuilder.
• Vẽ đồ họa 2D tùy chỉnh bằng Java2D.
• Xây dựng ứng dụng 3D mượt mà với JavaFX.
• Phát triển diagram editor mạnh mẽ qua GEF.

Nhờ sự linh hoạt của Eclipse và hệ sinh thái plugin phong phú, bạn có thể lựa chọn công cụ phù hợp nhất cho dự án của mình, từ một ứng dụng vẽ đơn giản cho tới một hệ thống mô hình hoá phức tạp. Hãy bắt đầu bằng việc cài đặt môi trường, thực hiện các ví dụ mẫu trong bài viết và dần dần mở rộng tính năng theo nhu cầu thực tế. Chúc bạn thành công và sáng tạo những bản vẽ ấn tượng trong Eclipse!