JavaFX 绘图（画板）文具【完整功能+源码+免费获取】

JavaFX 绘图（画板）文具【完整功能+源码+免费获取】

副标题：用 300 行代码实现鼠标拖拽画线、画矩形、圆角矩形、椭圆、五角星 —— 还能随心切换颜色与线宽，适合 Java GUI 入门、课程设计、快速原型验证

（PS：关注公众号【代码师兄】，回复004 ，免费获取！免费获取！免费获取！）

---

📋 项目核心信息一览

维度	详情
项目名称	Drawing (绘图文具)
核心定位	JavaFX 桌面端轻量级绘图工具 Demo
解决痛点	快速掌握 JavaFX Canvas 绘制、鼠标事件、图形状态管理
目标受众	Java 初学者、GUI 课程设计、想自制画板工具的开发者
典型场景	教学演示、手绘草图、图形学基础实验、快速原型验证
技术栈	Java 8 + JavaFX (内置 JDK 8) + Eclipse IDE
架构模式	MVC 变体：View(Draw.java) + Util(Constants.java) + Application 启动类
核心类	Draw.java (主视图/控制器)、Constants.java (常量池)
代码量	约 290 行有效代码 (含注释)
运行入口	Draw.main() → Application.launch()

---

🎯 项目背景与定位：为什么要有这个「画板」？

还在用 Swing 写 paintComponent 吗？JavaFX 自 JDK 8 起内置，原生支持硬件加速、CSS 样式、FXML 解耦、Canvas 即模式绘图 —— 它才是现代 Java 桌面开发的「正统」。

Drawing 正是一个最小可行性产品 (MVP)  级的绘图文具：

• ✅ 零依赖：只需 JDK 8+，无需 Maven/Gradle、无第三方 Jar
• ✅ 全键盘/鼠标交互：按下-拖拽-释放，原生事件链路
• ✅ 5 种基础图形：直线、矩形、圆角矩形、椭圆、五角星
• ✅ 双线宽 + 7 色调色盘：一键切换，状态即时生效
• ✅ 工具栏 + 画布分离：BorderPane 布局，扩展菜单栏/状态栏零压力

💡 适合谁？

• 大二《Java 程序设计》期末大作业
• 想在 1 小时内跑通「鼠标画图」完整闭环的同学
• 需要一个可二次开发的白板/标注/签名组件雏形的团队

---

🏗️ 技术架构全景：极简三层，清晰解耦

┌─────────────────────────────────────────────────────────────┐
│                      Draw.java (Application)                 │
│  ┌──────────────┐  ┌──────────────┐  ┌────────────────────┐  │
│  │  ToolBar     │  │   Canvas     │  │  Pane (容器)        │  │
│  │  (工具栏)    │  │  (绘图画布)  │  │  - 承载所有 Shape   │  │
│  │  - 5 形状按钮│  │  - Graphics  │  │  - 鼠标事件监听     │  │
│  │  - 2 线宽按钮│  │  - 2D Context│  │  - 实时渲染         │  │
│  │  - ChoiceBox │  └──────────────┘  └────────────────────┘  │
│  └──────────────┘           ▲                    ▲           │
│           │                 │                    │           │
│           ▼                 ▼                    ▼           │
│  ┌────────────────────────────────────────────────────────┐  │
│  │              状态管理 (static 字段)                      │  │
│  │  currentShape / lineSize / color / x, y 起始坐标        │  │
│  └────────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────┐
│                    Constants.java (常量池)                   │
│  SCENE_WIDTH/HEIGHT | DEFAULT_LINE_SIZE | LINE_SIZE_BOLD    │
│  5 种形状字符串常量 | FILLET_RECTANGLE_ANGLE | 7 种颜色 Paint│
└─────────────────────────────────────────────────────────────┘

数据流向一句话说清

用户点工具栏 → 修改 currentShape / lineSize / color 静态变量
用户按下鼠标 → 记录起点 (x,y)，按 currentShape new 对应 Shape 加入 Pane
用户拖拽鼠标 → 实时 setEndX/Y 或 setWidth/Height/Radius 更新该 Shape 几何
用户释放鼠标 → 完成一个图形，等待下一次按下

---

⚙️ 技术栈详解：零配置、原生、轻量

分类	技术/版本	选型理由
语言	Java 8 (JDK 1.8.0_152)	广泛部署、长期支持、JavaFX 内置
GUI 框架	JavaFX 8 (内置)	硬件加速、Canvas 即模式、CSS 样式、FXML 解耦
构建工具	Eclipse 内置 Builder / javac	无需 Maven/Gradle，极简教学/演示场景
IDE	Eclipse (.project/.classpath 就绪)	导入即跑，零配置
打包部署	java -cp bin cn.wzkj.drawing.View.Draw 或打 Jar	单文件分发，双击运行
画布渲染	Canvas + GraphicsContext	即时模式绘图，性能优于保留模式 Pane 直接加 Shape

💡 为什么不用 Swing / AWT / FXML？

• Swing：渲染管线老旧、高 DPI 模糊、无 CSS
• FXML：引入控制器/视图分离，反而增加样板代码，不利于「极简 Demo」教学
• Canvas 即模式：GraphicsContext 直接画像素，适合白板、涂鸦、游戏循环

---

🧩 核心功能模块：按交互域拆解

1️⃣ 启动与布局初始化 (start + initAssembly)

@Override
public void start(Stage primaryStage) {
    primaryStage.setTitle("绘图");
    roodNode = new BorderPane();
    scene = new Scene(roodNode, Constants.SCENE_WIDTH, Constants.SCENE_HEIGHT);
    primaryStage.setScene(scene);
    initAssembly();   // 工具栏 + 画布
    addAction();      // 事件绑定
    drawing();        // 鼠标绘制逻辑
    primaryStage.show();
}

• BorderPane 五区布局：顶部 ToolBar、中部 Pane(Canvas)、其余预留菜单/状态栏
• Canvas 尺寸 = 场景尺寸 (1200×600)，全屏绘图无滚动条
• ToolBar 一次性塞入 8 个控件，无需 HBox 嵌套

2️⃣ 工具栏动作绑定 (addAction)

// 形状切换：仅改状态字符串
lineButton.setOnAction(e -> currentShape = Constants.LINE_SEGMENT);
// 线宽切换：改静态 double
boldButton.setOnAction(e -> lineSize = Constants.LINE_SIZE_BOLD);
// 颜色切换：ChoiceBox 监听 selectedIndex
choiceBox.getSelectionModel().selectedIndexProperty().addListener((ov, v, idx) -> {
    switch (idx.intValue()) {
        case 0: color = Constants.DEFAULT_COLOR_BLACK; break;
        case 1: color = Constants.COLOR_RED; break;
        // ...
    }
});

💡 设计亮点：所有工具栏按钮不直接画图，只改「全局状态」；真正画图逻辑集中在 drawing() 的鼠标事件里 —— 命令与执行分离，后期加「撤销/重做」只需在状态变更处压栈。

3️⃣ 核心绘制引擎 (drawing)

鼠标按下：创建 Shape 并加入容器

canvas.setOnMousePressed(e -> {
    x = e.getX(); y = e.getY();
    switch (currentShape) {
        case Constants.LINE_SEGMENT:
            line = new Line(x, y, x, y);
            line.setStroke(color); line.setStrokeWidth(lineSize);
            pane.getChildren().add(line);
            break;
        case Constants.RECTANGLE:
            rectangle = new Rectangle(x, y, 0, 0);
            rectangle.setStroke(color); rectangle.setFill(null);
            rectangle.setStrokeWidth(lineSize);
            pane.getChildren().add(rectangle);
            break;
        // ... 其他形状同理
    }
});

鼠标拖拽：实时更新几何

canvas.setOnMouseDragged(e -> {
    switch (currentShape) {
        case Constants.LINE_SEGMENT:
            line.setEndX(e.getX()); line.setEndY(e.getY()); break;
        case Constants.RECTANGLE:
            double w = Math.abs(e.getX() - x);
            double h = Math.abs(e.getY() - y);
            rectangle.setWidth(w); rectangle.setHeight(h); break;
        case Constants.ELLIPSE:
            ellipse.setCenterX(e.getX()); ellipse.setCenterY(e.getY());
            ellipse.setRadiusX(Math.abs(e.getX() - x));
            ellipse.setRadiusY(Math.abs(e.getY() - y)); break;
        case Constants.FIVE_POINTED_STAR:
            // 多边形顶点动态计算（见源码 270-278 行）
            polygon.getPoints().setAll(...); break;
    }
});

图形	创建时参数	拖拽时更新逻辑	特殊处理
直线	起点=终点	setEndX/Y	最简单
矩形	x,y,0,0	setWidth/Height	取绝对值保证正向
圆角矩形	同矩形 + arcWidth/Height=15	同矩形	圆角半径固定
椭圆	中心=x,y, 半径=0	setCenterX/Y + setRadiusX/Y	中心随鼠标动
五角星	多边形顶点数组	重算 5 个顶点	硬编码相对偏移

---

🖼️ 系统界面

---

🚀 部署与运行指南：三步跑通

环境依赖

• JDK 8+  (推荐 1.8.0_152+，含 JavaFX)
• Eclipse IDE (或任意支持 Java 的 IDE)
• 无需 Maven/Gradle/数据库/中间件

导入项目 (Eclipse)

1. File → Import → General → Existing Projects into Workspace
2. 选择 e:\AI_Project\Chat\project\Drawing 根目录
3. 点击 Finish，等待自动编译 (输出到 bin/)

方式一：IDE 直接运行 (推荐)

• 右键 src/cn/wzkj/drawing/View/Draw.java → Run As → Java Application

方式二：命令行编译运行

# 1. 进入项目根目录
cd e:\AI_Project\Chat\project\Drawing

# 2. 编译 (自动按 .classpath 配置输出到 bin/)
javac -d bin -sourcepath src src/cn/wzkj/drawing/View/Draw.java src/cn/wzkj/drawing/Util/Constants.java

# 3. 运行
java -cp bin cn.wzkj.drawing.View.Draw

方式三：打包成可执行 Jar (分发用)

# 在 bin 目录下创建 MANIFEST.MF
echo "Main-Class: cn.wzkj.drawing.View.Draw" > MANIFEST.MF
jar cfm Drawing.jar MANIFEST.MF -C bin .

# 双击或命令行运行
java -jar Drawing.jar

验证访问

• 窗口标题显示「绘图」
• 工具栏 8 个控件全部可用
• 画布区域鼠标按下-拖拽-释放能画出对应图形

---

🌐 访问入口与默认账号：本地桌面应用，无登录概念

入口类型	地址/命令	说明
桌面启动	双击 Drawing.jar / IDE Run	无需浏览器、无需服务端
命令行启动	java -cp bin cn.wzkj.drawing.View.Draw	适合脚本/自动化测试
默认账号	—	单用户本地工具，无权限系统
常见问题	1. 窗口不显示 → 检查 JDK 是否含 JavaFX (JDK 8-10 内置，11+ 需单独加模块) 2. 编译报错 → 确认 -source 1.8 -target 1.8	—

---