DrawJava

簡単なお絵描きソフトです

目的
課題
理論
苦労した点
プログラム(抜粋)
実行結果
動作確認手法環境
考察
まとめ
感想など
主な機能
描画の種類

目的

前回のお絵描きソフトよりも進化したお絵描きソフトを作る。

課題

お絵かきソフトを進化させるにあたり、主に以下の機能の実装に取り組んだ。

保存・読み込み機能
編集履歴の操作
ダイヤログ
ボタンチェックボックス

など特にUIに関する部分を充実させた。その他機能はこちらに記載する

理論

スムーズな線分を実現するため、Polylineを使用した。一本の線分だけではなく、連続した線分を使用することでより滑らかな線分を表現することができる。

苦労した点

ボタンを設置した時にキー入力が行われない問題
- AWTのフォーカスについてつまずいたが、ボタンにもaddKeyListenerをつけ問題なく動作した。
履歴の配列
- UndoとRedoをそれぞれ配列に格納しているが、Undoに現在のデータを格納するタイミングや、取り出す際の重複問題に苦戦した。

プログラム(抜粋) と実行結果(抜粋)

閉じる前に確認

Paint.java

this.addWindowListener(newWindowAdapter() {
@OverridepublicvoidwindowClosing(WindowEvente) {
if (isSaved || showSaveConfirmDialog()) {
dispose();
}
}
});

Paint.java

privatebooleanshowSaveConfirmDialog() {
intchoice = JOptionPane.showConfirmDialog(this, "保存しますか?", "確認", JOptionPane.YES_NO_CANCEL_OPTION);
if (choice == JOptionPane.YES_OPTION) {
if (save()) {
isSaved = true;
returntrue;
} else {
returnfalse;
}
} elsereturnchoice == JOptionPane.NO_OPTION;
}

Windowを閉じるリクエストが発生した時に、保存済みか||保存完了したかを確認して保存漏れが内容にした。

動作

以下の時に確認が表示された
- Cmd + Wで閉じようとした時
- Cmd + Qで閉じようとした時
- xを押して閉じようとした時
- 終了ボタンを押して閉じようとした時
以下の分岐を確認できた
- はい
  - 新規保存
    - システム終了
  - 上書き保存
    - システム終了
  - キャンセル
    - 確認ダイアログを閉じる
- いいえ
  - 確認ダイアログを閉じる
    - システム終了
- 取り消し
  - 確認ダイアログを閉じる

HistoryCtrlクラス

HistoryCtrl.java

packageenshuReport2_2023.util;
importenshuReport2_2023.Figure;
importjava.util.ArrayList;
importjava.util.LinkedList;
importjava.util.Stack;
publicclassHistoryCtrl {
privatefinalStack<ArrayList<LinkedList<Figure>>> undoList = newStack<>();
privatefinalStack<ArrayList<LinkedList<Figure>>> redoList = newStack<>();
/** * 一つ戻る * @return null or Stack */publicArrayList<LinkedList<Figure>> undo() {
// undoするものなしif (this.undoList.size() <= 0) returnnull;
// ドゥーreturndoUndo();
}
privateArrayList<LinkedList<Figure>> doUndo() {
ArrayList<LinkedList<Figure>> result = this.undoList.pop();
this.redoList.push(result);
returnresult;
}
/** * やり直し * @return null or Stack */publicArrayList<LinkedList<Figure>> redo() {
if (this.redoList.size() <= 0) returnnull;
returndoRedo();
}
privateArrayList<LinkedList<Figure>> doRedo() {
ArrayList<LinkedList<Figure>> result = this.redoList.pop();
this.undoList.push(result);
returnresult;
}
/** * 履歴に追加 */publicvoidadd(ArrayList<LinkedList<Figure>> history) {
ArrayList<LinkedList<Figure>> h = newArrayList<>(history);
this.undoList.push(h);
this.redoList.clear();
}
publicStack<ArrayList<LinkedList<Figure>>> getUndoList() {
returnthis.undoList;
}
publicStack<ArrayList<LinkedList<Figure>>> getRedoList() {
returnthis.redoList;
}
publicArrayList<LinkedList<Figure>> getNextUndo() {
if (this.undoList.size() == 0) returnnull;
returnthis.undoList.get(this.undoList.size() - 1);
}
publicArrayList<LinkedList<Figure>> getNextRedo() {
if (this.redoList.size() == 0) returnnull;
returnthis.redoList.get(this.redoList.size() - 1);
}
}

StackでUndoとRedoのリストを管理して、随時追加削除を行っている。

動作

Undo実行前 Undo実行後 Redo実行後

以上の画像の様にUndoで戻り、Redoでやり直しができた。
Undo,Redoの実行が不可能の時、各ボタンを無効化しユーザーにわかりやすくした。
以下の時に実行された
- Undoボタンを押した時
- Redoボタンを押した時
- Cmd + Z を押した時
- Cmd + Y を押した時

どの方向にでも描けるようにする

Box.java, Circle.java

if (w >= 0 && h >= 0) {
g.fillRect(x, y, w, h);
} elseif (w < 0 && h >= 0) {
g.fillRect(x + w, y, -w, h);
} elseif (w >= 0) {
g.fillRect(x, y + h, w, -h);
} else{
g.fillRect(x+w,y+h,-w,-h);
}

4方向に分けて処理する。

動作

以下の場合に分けて処理を行った
- 右上
- 右下
- 左下
- 左上

リサイズ

Paint.java

this.addComponentListener(newComponentAdapter() {
@OverridepublicvoidcomponentResized(ComponentEvente) {
setDesign();
}
});

ShowCtrl.java

publicstaticvoidsetDesign() {
intmargin_top = 50;
intmargin_right = 20;
intinterval = 10;
// 画面のサイズdoublewidthMax = mainFrame.getSize().getWidth();
doubleheightMax = mainFrame.getSize().getHeight();
// 現在の位置double_w = widthMax - margin_right;
double_h = margin_top;
// checkボックス設定doublecheckbox_w = 80;
doublecheckbox_h = 30;
for (Checkboxcheckbox : cgCheckBoxList) {
intx = (int) (_w - checkbox_w);
inty = (int) _h;
intw = (int) checkbox_w;
inth = (int) checkbox_h;
checkbox.setBounds(x, y, w, h);
// 更新_h += checkbox_h + interval;
}
// 間隔_w -= checkbox_w + interval;
checkbox_w = 120;
double__h = margin_top;
for (Checkboxcheckbox : colorList) {
intx = (int) (_w - checkbox_w);
inty = (int) __h;
intw = (int) checkbox_w;
inth = (int) checkbox_h;
checkbox.setBounds(x, y, w, h);
// 更新__h += checkbox_h + interval;
}
// 間隔_h += 20;
_w = widthMax - margin_right;
checkbox_w = 100;
for (Componentcomponent : otherList) {
intx = (int) (_w - checkbox_w);
inty = (int) _h;
intw = (int) checkbox_w;
inth = (int) checkbox_h;
component.setBounds(x, y, w, h);
// 更新_h += checkbox_h + interval;
}
// 間隔_h += 20;
// ボタン設定doublebutton_w = 120;
doublebutton_h = 30;
for (Buttonbutton : buttonList) {
intx = (int) (_w - button_w);
inty = (int) _h;
intw = (int) button_w;
inth = (int) button_h;
button.setBounds(x, y, w, h);
// 更新_h += checkbox_h + interval;
}
}

動作

起動時 Windowをリサイズ

画面のサイズを変更すると右側のツールバーも移動する

全削除

Paint.java

elseif (key == 'r' || key == 'R') {
if (isDrawLock)
return;
coordsList = newArrayList<>();
coords = newLinkedList<>();
historyAdd();
}

全削除できるようにショートカットキーを追加した。また、戻せる様に履歴に追加した。

動作

実行前実行後

以下の時に実行された
- Cmd + Rで閉じようとした時
- Cmd + Shift + Rで閉じようとした時

保存と読み込み

Paint.java

publicbooleansave() {
booleanresult = fileSave();
if (result)
isSaved = true;
returnresult;
}
publicbooleansaveNew() {
booleanresult = fileSave(1);
if (result)
isSaved = true;
returnresult;
}
publicvoidload() {
load(null);
}
publicvoidload(Stringstr) {
ArrayList<LinkedList<Figure>> _cooArrayList = newArrayList<>(coordsList);
LinkedList<Figure> _coords = newLinkedList<>(coords);
coordsList = newArrayList<>();
coords = newLinkedList<>();
booleanresult = fileLoad(str);
if (result) {
offScreenImage = null;
repaint();
} else {
coordsList = _cooArrayList;
coords = _coords;
}
offScreenImage = null;
repaint();
}

FileCtrl.java

/** * Yuki Tetsuka * <p> * Project: DrawJava * Description: A simple drawing application in Java. * <p> * Copyright (c) 2023 Yuki Tetsuka. All rights reserved. * See the project repository at: https://github.com/ponstream24/DrawJava */packageenshuReport2_2023.util;
importstaticenshuReport2_2023.Paint.*;
importstaticenshuReport2_2023.util.ShowCtrl.*;
importjava.io.File;
importjava.io.FileInputStream;
importjava.io.FileOutputStream;
importjava.io.IOException;
importjava.io.ObjectInputStream;
importjava.io.ObjectOutputStream;
importjava.util.ArrayList;
importjava.util.LinkedList;
importjavax.swing.JFileChooser;
importjavax.swing.JOptionPane;
importenshuReport2_2023.Figure;
publicclassFileCtrl {
publicstaticbooleanfileSave() {
if (loadingFile != null) {
Filefile = newFile(loadingFile);
if (file.exists()) {
returnfileSave(0);
}
}
returnfileSave(1);
}
/** * 保存 * @param mode 0 上書き,1 新規 */publicstaticbooleanfileSave(intmode) {
try {
StringselectedFilePath;
if (mode == 0) {
selectedFilePath = loadingFile;
} else {
JFileChooserfileChooser = newJFileChooser();
fileChooser.setFileSelectionMode(JFileChooser.FILES_ONLY);
if (loadingFile != null) {
fileChooser.setCurrentDirectory(newFile(loadingFile));
}
intresult = fileChooser.showSaveDialog(mainFrame);
if (result == JFileChooser.APPROVE_OPTION) {
selectedFilePath = fileChooser.getSelectedFile().getAbsolutePath();
mainFrame.setTitle(selectedFilePath);
loadingFile = selectedFilePath;
} elsereturnfalse;
}
if (selectedFilePath == null) returnfalse;
nowLoading();
FileOutputStreamfos = newFileOutputStream(selectedFilePath);
ObjectOutputStreamoos = newObjectOutputStream(fos);
oos.writeObject(coordsList);
oos.close();
fos.close();
closeNowLoading();
returntrue;
} catch (IOExceptionignored) {
}
returnfalse;
}
publicstaticbooleanfileLoad() {
returnfileLoad(null);
}
@SuppressWarnings("unchecked")
publicstaticbooleanfileLoad(Stringpath) {
try {
StringselectedFilePath;
if (path == null) {
Object[] options = {"開く", "新規作成", "キャンセル"};
// ダイアログを表示inttypeResult = JOptionPane.showOptionDialog(
null,
"既存のファイルを読み込みますか？",
"読み込み",
JOptionPane.DEFAULT_OPTION,
JOptionPane.QUESTION_MESSAGE,
null,
options,
options[0]);
// 既存if (typeResult == 0) {
JFileChooserfileChooser = newJFileChooser();
fileChooser.setFileSelectionMode(JFileChooser.FILES_ONLY);
if (loadingFile != null) {
fileChooser.setCurrentDirectory(newFile(loadingFile));
}
intresult = fileChooser.showOpenDialog(mainFrame);
if (result == JFileChooser.APPROVE_OPTION) {
selectedFilePath = fileChooser.getSelectedFile().getAbsolutePath();
mainFrame.setTitle(selectedFilePath);
loadingFile = selectedFilePath;
} else {
returnfalse;
}
}
// 新規elseif (typeResult == 1) {
mainFrame.setTitle("新規ファイル");
returntrue;
}
// キャンセルelse {
returnfalse;
}
} else {
selectedFilePath = path;
}
nowLoading();
FileInputStreamfis = newFileInputStream(selectedFilePath);
ObjectInputStreamois = newObjectInputStream(fis);
coordsList = (ArrayList<LinkedList<Figure>>) ois.readObject();
ois.close();
fis.close();
closeNowLoading();
returntrue;
} catch (IOException | ClassNotFoundExceptionignored) {
JOptionPane.showMessageDialog(mainFrame, "ファイルの読み込みに失敗しました。");
closeNowLoading();
}
returnfalse;
}
}

ファイルが存在するか確認して存在しない場合は新規保存、する場合は上書きまたは新規保存を促す。

動作

読み込み読み込み(確認) 保存実行後

以下の時に確認が表示された
- Cmd + Wで閉じようとした時
- Cmd + Qで閉じようとした時
- xを押して閉じようとした時
- 終了ボタンを押して閉じようとした時
- Cmd + Sで保存しようとした時
- Cmd + Shift + Sで保存しようとした時(新規保存)
以下の分岐を確認できた
- ファイルが存在する
  - 新規保存
    - システム終了
  - 上書き保存
    - システム終了
  - キャンセル
    - 確認ダイアログを閉じる
- ファイルが存在しない
  - 新規保存
    - システム終了
  - キャンセル
    - 確認ダイアログを閉じる

動作確認手法・環境

以下の実行環境で行った

Eclipse上で制御文字が使えるようにASCII制御文字をオンにした。
手順は以下のURLの通り、設定->実行/デバック->コンソール->ASCII制御文字を解釈する->復帰文字(\r)を制御文字として解釈する をオンにする
https://eclipse.dev/eclipse/news/4.14/platform.php#control-character-console

①環境
- JRE -> JavaSE-17
- OS -> Windows 10 Pro
- プロセッサ -> Intel(R) Core(TM) i5-7500T CPU @ 2.70GHz 2.71 GHz
- RAM -> 8.00 GB
②環境
- JRE -> JavaSE-17
- OS -> macOS Canalia
- プロセッサ -> 1.6 GHz デュアルコアIntel Core i5
- RAM -> 8 GB 2133 MHz LPDDR3

考察

画面のリサイズ時のチラつき

画面のリサイズを行った際に、右側に設置しているチェックボックスやボタンがちらつくことがある。
- public void componentResized(ComponentEvent e)が呼び出されるごとにボタンの座標を計算、配置を行っているためラグが発生していると考える。
- また端末ごとにチラつき具合が変わるため、PCのスペック問題とも考えられる。

チェックボックス・ボタン設置した際にキー入力ができない

チェックボックス・ボタンを設置をした際にショートカットキーの処理などのキー入力ができない
- フォーカスがチェックボックス・ボタンに向いている可能性があったため、チェックボックス・ボタンに対してcheckbox.addKeyListener(this);でイベントをりっすんをした

まとめ

前回のお絵描きソフトよりも進化したお絵描きソフトを作る。のためにさまざまな機能を追加できた。特にUIにこだわることで、より使えるお絵描きソフトとなった。

感想など

全ての機能を実装するまでに、所々躓くことがあったが、難なく制作に取り組むことができた。

主な機能

筆
- 以下の種類の描画を行うことができます。
  - 自由線
    - 自由に線を描けます。点ごとをポリラインで結びスムーズな線を描きます。
  - 円
  - 四角
  - 線
- 塗り直し
  - 塗り直しの有無を設定できます。
    - 色
- デフォルト10色
- ダイヤログで自由な色を指定できます。(実質無限化)
編集履歴
- 編集履歴を保存しているため、「戻る」「やり直す」が可能です。
データの出力
- 読み込み
  - データファイルを読み込んでキャンパスを復元・編集ができます。
    - 保存せず読み込みを行おうとすると、保存を促すダイヤログを表示させます。
- 保存
  - 上書き
    - 既に存在するファイルに対して上書きして保存をできます。
    - 新規ファイルを生成してデータを保存します。
- ダイヤログ
  - 読み込み/保存をダイヤログで行えます。
オフスクリーン
- オフスクリーンを生成することで、画面のチラつきを無くしました。
ガイド
- 左上に情報を表示しています。
  - 右クリック・左クリックの説明
  - スクロール
  - ナンバーキー番号 *コンソール
  - オブジェクト数
  - マウスの座標
  - 生成中の幅・高さ
  - 色
  - 描画モード
キーボード
- ショートカットキー
  - 詳細はこちら
- 数字キー
  - 対象の数字キーを押すことで筆の色を変更できます。
スクロール
- スクロールすることで自由線の太さを変更できます。
マウス
- 右クリック
  - 消しゴム
- 左クリック
  - 選択中の描画方法
- 中クリック
  - キャンパスを全体的に移動させます。
読み込み中
- 以下のタイミングで読み込み中のダイヤログが表示されます。
  - 起動時
  - ファイル読み込み時
  - ファイル書き込み中
描画ロック
- 描画したキャンパスを閲覧する用の機能です。
- キャンパスに対して描画等ができなくなります。
画面リサイズ
- ウィンドウのサイズを変更すると、右側に表示されているボックスなどの位置も動的に変更されます。
チェックボックス/ボタン
- 以下の機能を実装
  - 色
  - 描画種類
  - コントール
  - アクション
    - Undo,Redoは実行不可の場合、ボタンは無効化される
- 動的に配置しているため、急遽ボタンを増やしてもデザインが崩れない。
終了
- 終了時に保存していなかった場合、保存確認のダイヤログが表示されます。
  - キャンセル/保存しない/保存から選択できます。
Git
- GitHubと連携済み

描画の種類

描画は以下の種類で行えます。

自由線

ペンの様に自由に線を描けます。

塗り直し : 不可
色 : 可
太さ : 可

円

楕円の大きさを指定して配置できます。

塗り直し : 可
色 : 可
太さ : 不可

四角

四角形の大きさを指定して配置できます。

塗り直し : 不可
色 : 可
太さ : 不可

線

直線の2点を指定して配置できます。

塗り直し : 不可
色 : 可
太さ : 可

消しゴム

ペンの様に自由に線を消せます。

塗り直し : 不可
色 : 不
太さ : 可

ショートカット

Undo
- 戻る
  - Ctrl + Z
  - Ctrl + 左
  - Cmd + Z
  - Cmd + 左
Redo
- やり直し
  - Ctrl + Shift + Z
  - Ctrl + 右
  - Cmd + Shift + Z
  - Cmd + 右
All Delete
- 全削除
  - R
  - Shift + R
Color
- 色
  - 1(黒)
  - 2(赤)
  - 3(青)
  - 4(シアン)
  - 5(ピンク)
  - 6(灰)
  - 7(緑)
  - 8(黄)
  - 9(マゼンタ)
Save
- 上書き保存
  - Ctrl + S
  - Cmd + S
- 新規保存
  - Ctrl + Shift + S
  - Cmd + Shift + S
Close
- 閉じる
  - Ctrl + Q
  - Cmd + Q
  - Ctrl + W
  - Cmd + W
Open
- 開く
  - Ctrl + N
  - Cmd + N

Name		Name	Last commit message	Last commit date
.idea		.idea
util		util
.gitignore		.gitignore
Box.java		Box.java
Circle.java		Circle.java
Coord.java		Coord.java
Dot.java		Dot.java
Figure.java		Figure.java
Line.java		Line.java
Paint.java		Paint.java
README.md		README.md
enshuReport2_2023.iml		enshuReport2_2023.iml
paint.dat		paint.dat

Navigation Menu

Repository files navigation

DrawJava

目的

課題

理論

苦労した点

プログラム(抜粋) と実行結果(抜粋)

閉じる前に確認

動作

HistoryCtrlクラス

動作

どの方向にでも描けるようにする

動作

リサイズ

動作

全削除

動作

保存と読み込み

動作

動作確認手法・環境

考察

画面のリサイズ時のチラつき

チェックボックス・ボタン設置した際にキー入力ができない

まとめ

感想など

主な機能

描画の種類

自由線

円

四角

線

消しゴム

ショートカット

About

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

DrawJava

目的

課題

理論

苦労した点

プログラム(抜粋) と 実行結果(抜粋)

閉じる前に確認

動作

HistoryCtrlクラス

動作

どの方向にでも描けるようにする

動作

リサイズ

動作

全削除

動作

保存と読み込み

動作

動作確認手法・環境

考察

画面のリサイズ時のチラつき

チェックボックス・ボタン設置した際にキー入力ができない

まとめ

感想など

主な機能

描画の種類

自由線

円

四角

線

消しゴム

ショートカット

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

プログラム(抜粋) と実行結果(抜粋)