専用カラーチューザー (Custom Color Chooser)
2012.9.23

Language
参照=>DrawTop API, DrawTop Manual 最後の修正: 2013.06.05

トピックス

閉じた図形のマウスヒットテスト
2010.08.26


閉じていない図形のマウスヒットテスト
2010.08.26


任意2曲線の交点計算
2010.09.01


点から曲線への垂線の計算
2010.09.01


2曲線への共通垂線の計算
2016.10.20


Input Method Frameworkによる
テキストエディター
2010.12.01


部品ライブラリ
2012.09.16


専用カラーチューザー
2012.9.23

1. ソースコードダウンロード

=> CustomColorChooser1.zip, CustomColorChooser2.zip
CustomColorChooser1.zip, CustomColorChooser2.zipにはテストコード(1),(2)のソースコードが収納されている。
別々のプロジェクトで実行すること。


2. CustomColorChooserの特徴


図(a) javax.swing.JColorChooserのダイアログ 図(b) CustomColorChooserDialogのダイアログ


特徴

説明

(1)色の取り込み

 一度デザインした図形の配色を再利用できるようにする。このためColorChooserに描画画面から色を取り込める機能を追加する。図(b)の下段右のパネルが取り込んだ色の表示例である。

色を取り込む方法は次のような方法が考えられる。
(a)ドローファイルで使われているすべての色を取り込む。
(b)ドローファイルのあるページの色を全て取り込む。
(c)選択した図形の色を取り込む。
取り込む色は図形の輪郭線の色、塗りつぶしの色のほかに、図形がテキストを持つ時はテキストの色も取り込む。ここでは最も細かい取り込み単位である(c)を想定してテストコードを作成する。
(2)色の再利用

つぎのような機能が必要になる。
• 取り込んだ色を表示するカラーパレットで色をクリックすると、その色がプレビュー画面に表示される。
• 当然ながらjavax.swing.JColorChooserのカラーパレット（図(b)上段）で色をクリックすると、その色がプレビュー画面に表示される。
• OKボタンを押すとプレビューに表示中の色をアプリケーション側に渡し、アプリケーションはその色を使って選択されている図形またはテキストに色を設定する。


3. テストコード(1)

❐主要コンポーネント

コンポーネント

説明

CustomColor
Chooser1

public class CustomColorChooser1

mainメソッドをインプリメントしたクラス。テストを実行するためのコード。
CustomColorChooserDialogから選択した色を受け取る方法は次。

Color color=CustomColorChooserDialog.showDialog(frame, colors);

colorsはアプリケーションから渡す色の配列で、図(b)の"Imported colors"パネルに表示される。

上記showDialogメソッドの動作は、JColorChooser.showDialogの動作と同じで、OKボタンが押されるまで制御がアプリケーションに戻らない(モーダル)。
:JColorChooser.showDialogに関するAPIの記述は次
=> Shows a modal color-chooser dialog and blocks until the dialog is hidden.
CustomColor
ChooserDialog		 class CustomColorChooserDialog extends JDialog implements ActionListener, ComponentListener
図(b)のダイアログ。
　

(1) ダイアログにJColorChooser, PreviewPanel, ImportedColorsPanel, OKボタン, Cancelボタンを配置する。

this.colorChooser = new JColorChooser();
this.colorChooser.setBorder(BorderFactory.createTitledBorder("Color chooser"));
this.colorChooser.setPreviewPanel(new JLabel("Preview", JLabel.CENTER));

3行目はJColorChooserのPreviewPanelにダミーを設定している。PreviewPanelは別途新規作成し、CustomColorChooserDialog(JDialog拡張)に張り付ける。

(2) showDialogメソッドのリターン

return dialog.getPreviewColor();

getPreviewColor()はPreviewに設定されている色を取得するメソッドで図(b)の場合赤が返される。
PreviewPanel class PreviewPanel extends JComponent implements ChangeListener, ColorSelectionListener, MouseListener
JColorChooserのPreviewPanelとは異なる新規作成のPreviewPanel。JColorChooserとImportedColorsPanelから選択した色を受け取りパネルに表示する。
　

(1) JColorChooserからの選択色受け取り方

JColorChooserのColorSelectionModelにChangeListenerを登録。この場合ChangeListenerにはPreviewPanel自身を設定する。
コンストラクタに次の行を入れる。

dialog.getColorChooser().getSelectionModel().addChangeListener(this);

(注) dialogはCustomColorChooserDialogオブジェクト
　

(2) ImportedColorsPanelからの選択色受け取り方

ImportedColorsPanelのaddColorSelectionListenerメソッドでColorSelectionListenerを登録。この場合ColorSelectionListenerにはPreviewPanel自身を設定する。
コンストラクタに次の行を入れる。

dialog.getImportedColorsPanel().addColorSelectionListener(this);


:

PreviewPanelのコンストラクタでChangeListenerとColorSelectionListenerを設定するので、PreviewPanelのインスタンス化はJColorChooser、ImportedColorsPanelのインスタンス化の後に行う。
ImportedColorsPanel

class ImportedColorsPanel extends JComponent implements MouseListener
アプリケーションからこのパネルのカラーパレットに表示する色の配列を受け取る。カラーパレットの色はマウスククリックで選択でき、選択した色はPreviewPanelに表示される。

　

(1) アプリケーションから色の配列を受け取る

次のコードで配列を受け取る(=> CustomColorChooser1)

Color color=CustomColorChooserDialog.showDialog(frame, colors);

　

受け取った色の配列はImportedColorsPanelのsetImportedColorsメソッドでImportedColorsPanelに設定する。

　

(2)受け取った色配列の表示

javax.swing.colorchooser.DefaultSwatchChooserPanel.javaのSwatchPanelクラスと同じ方法で、カラーパレットを描画する。

(3) マウスによる色の選択

このクラスにMouseListenerをインプリメントして、mousePressedメソッドで色の選択を行う。

(4) マウスクリックで選択した色をPreviewPanelに通知

ColorSelectionEventクラスを用意して、このクラスのfireEventメソッドで通知する。
なおこのクラスにColorSelectionListenerを登録、削除するためのメソッドaddColorSelectionListener、removeColorSelectionListenerをインプリメントする。受け取り側(この場合はPreviewPanel)はColorSelectionEventの受取メソッドcolorSelectedをインプリメントする。


❐ColorSelectionListener

項目

説明

コード

 interface ColorSelectionListener extends EventListener {
public void colorSelected(ColorSelectionEvent event);
}
インプリメント PreviewPanelにインプリメントする。


❐ColorSelectionEvent

項目

説明

コード

 class ColorSelectionEvent extends EventObject {
Color color=null;
public ColorSelectionEvent(Object source, Color color) {
super(source);
this.color=color;
}
public Color getColor(){
return this.color;
}
}


❐SwatchPanel
javax.swing.colorchooser.DefaultSwatchChooserPanel.javaのSwatchPanelクラス
paintComponentでカラーパレットを表示

項目

説明

コード

 public void paintComponent(Graphics g) {
g.setColor(getBackground());
g.fillRect(0, 0, getWidth(), getHeight());
for (int row = 0; row < numSwatches.height; row++) {
for (int column = 0; column < numSwatches.width; column++) {
g.setColor(getColorForCell(column, row));
int x;
if ((!this.getComponentOrientation().isLeftToRight())
&& (this instanceof RecentSwatchPanel)) {
x = (numSwatches.width - column - 1) * (swatchSize.width + gap.width);
} else {
x = column * (swatchSize.width + gap.width);
}
int y = row * (swatchSize.height + gap.height);
g.fillRect(x, y, swatchSize.width, swatchSize.height);
g.setColor(Color.black);
g.drawLine(x + swatchSize.width - 1, y, x + swatchSize.width - 1,
y + swatchSize.height - 1);
g.drawLine(x, y + swatchSize.height - 1, x + swatchSize.width - 1,
y + swatchSize.height - 1);
}
}
}


4. テストコード(2)

❐ダイアログ

項目

説明

"Imported colors"パネル

 CustomColorChooser1では、アプリケーションから取り込む色の配列をshowDialogメソッドの引数で渡す方法とした。
Color color=CustomColorChooserDialog.showDialog(frame, colors);

これでは自由度が少ないので、"Imported colors"パネルに色の配列を取り込む"Import colors"ボタンと、取り込んだ色を削除する"delete colors"ボタンを設置する。
色の配列を取り込む方法は、画面で図形を選択し"Import colors"ボタンをクリックして選択図形の色を取り込む方法を想定する。但しこれはテストコードなので、"Import colors"ボタンをクリックしたとき、あらかじめ用意した色配列を取り込むだけである。


図 (c) CustomColorChooserDialogの外観



❐主要コンポーネントの変更部分

コンポーネント

説明

CustomColor
Chooser2

 public class CustomColorChooser2 implements ColorSelectionListener
mainメソッドをインプリメントしたクラス。

(1)CustomColorChooserDialogから選択した色を受け取る方法

テストコード(1)の受け取り方は、OKボタンが押されるまでJColorChooser.showDialogをブロックする方法。これでは"Import colors"チェックボックスをオンにして色を取り込むことができない。
そこでアプリケーション側(テストコードではCustomColorChooser2)にColorSelectionListenerをインプリメントしてcolorSelectedメソッドで色配列を受け取る。


(2)コード

public static void main(String[] args)
..............................
CustomColorChooser2 chooser=new CustomColorChooser2();
CustomColorChooserDialog dialog=new CustomColorChooserDialog(frame);
dialog.addColorSelectionListener(chooser);
dialog.showDialog();
}
public void colorSelected(ColorSelectionEvent event) {
Color color = event.getColor();
this.label.setForeground(color);
System.out.println("** CustomColorChooser colorSelected event.getColor()=" + event.getColor());
}
CustomColor
ChooserDialog		 class CustomColorChooserDialog extends JDialog implements ActionListener
テストコード(1)に対する追加部分は次。

(1)"Import colors"ボタン、"delete colors"ボタン設定

ImportedColorsPanelで設定してもよいが、全体の制御を分かりやすくするためこのクラスでインプリメントする。

　

(2)actionPerformedメソッド

"Import colors"ボタン、"delete colors"ボタンのアクション処理を記述
PreviewPanel class PreviewPanel extends JComponent implements ChangeListener, ColorSelectionListener, MouseListener
テストコード(1)と同じ。
ImportedColorsPanel class ImportedColorsPanel extends JComponent implements MouseListener
テストコード(1)への追加部分は次。

(1)"Import colors"ボタンをクリックしたときに色配列を取り込むメソッド

public void setImportedColors(Color[] colors)

　

setImportedColorsにすでに取り込んだ色との重複チェックを行う処理を追加

(2)カラーパレット上で色を選択する機能
色を選択するメソッドを追加。色を選択するメソッドには次の機能が必要である。
• 選択済の色をクリックすると選択を解除する。
• Shift-key/Ctrl-keyを押しながら色をクリックすると複数色を選択できる。




なお上図のように選択した色には灰色の枠を表示する機能をpaintメソッドに追加する。

(3)"delete colors"ボタンを押したときに選択した色を削除するメソッド

public void removeCurrentColors()


Copyright (c) 2009-2013
All other trademarks are property of their respective owners.