View this PageEdit this PageAttachments to this PageHistory of this PageHomeRecent ChangesSearch the SwikiHelp Guide

funfunfun17

PREV ------ ● TOP ● ------ NEXTUploaded Image: fmrph.jpg


■キャプチャモーフをつくるじぇ〜

ここら辺でキャプチャモーフって〜のに挑戦だす。
画面の一部をキャプチャしてそれをモーフに描画しちゃおうってわけさ。
(Formクラスにあるサンプルコードとか参考にして作るです。)
ついでにその画像をファイルに保存できるようにしてみよお〜〜。

■クラスを作る

「Morph」をいつものごとく親にします。
「SketchMorph」を親にするってのもありーかな・・・。
--------------------------------------------
Morph subclass: #TestMorph9
instanceVariableNames: ' '
	classVariableNames: ''
	poolDictionaries: ''
	category: 'MyMorph'
--------------------------------------------
アクセプト。
Alt + s ( Cmd + s )

Uploaded Image: image.jpg


■インスタンスを出す

確認の為Workspaceに下記のコードを書いてドゥーイット。

--------------------------------------------
TestMorph9 new openInWorld
--------------------------------------------

Uploaded Image: image1.jpg


まあいつものやつが出てくるってわけやね。

Uploaded Image: image2.jpg



■メソッドを追加

初期設定やね。100×100の正方形でxが0、yが100の位置ってことで。

--------------------------------------------
initialize
	super initialize.
	self extent: 100@100.
	self position: 0@100.
--------------------------------------------
アクセプト。
Alt + s ( Cmd + s )

Uploaded Image: image3.jpg


もう一度インスタンスを出しなおして確認。

Uploaded Image: image4.jpg



■画面の一部をキャプチャしてみよう!!

まずはキャプチャする領域は画面左上の100×100の領域固定で
そこをキャプチャしたものをモーフにコピーしちゃうです。
(サンプルをまねて「paintImage」を使ったけど「image」でも問題ないなあ・・・
一度drawing-image系のメソッドいろいろ試して見なくちゃだな・・・)

--------------------------------------------
drawOn: aCanvas
	super drawOn: aCanvas.
	aCanvas paintImage: (Display copy: (0@0) extent: 100@100) at: self innerBounds origin.
--------------------------------------------

Uploaded Image: image18.jpg


アクセプト。
Alt + s ( Cmd + s )

Uploaded Image: image5.jpg


「部品」フラップからいろんなモーフを取り出してキャプチャする領域に置いてためしてみるだす。
おお!!キャプチャ成功ジャン!!でも使いにくいよね、このままじゃ。

Uploaded Image: image19.jpg

Uploaded Image: image6.jpg



■好きなところをキャプチャした〜い!!

ってなわけでキャプチャしたい範囲をマウスで選べるようにしちゃいましょう。
まずはクラス定義でインスタンス変数に「rect」を追加しまする。
マウスで指定した領域を入れておく変数でする。

--------------------------------------------
Morph subclass: #TestMorph9
instanceVariableNames: 'rect '
	classVariableNames: ''
	poolDictionaries: ''
	category: 'MyMorph'
--------------------------------------------
アクセプト。
Alt + s ( Cmd + s )

Uploaded Image: image7.jpg


「initialize」メソッドに「rect」の初期設定をしときまする。
自分の大きさね。

--------------------------------------------
initialize
	super initialize.
	self extent: 100@100.
	self position: 0@100.

	rect _ self bounds.
--------------------------------------------
アクセプト。
Alt + s ( Cmd + s )

Uploaded Image: image8.jpg



■「drawOn」メソッドを修正。

固定領域「(0@0) extent 100@100」の部分をマウスで指定した領域「rect」に変更します。
「rect」に関してはこのあとの「mouseUp」メソッドでね。

--------------------------------------------
drawOn: aCanvas
	super drawOn: aCanvas.
	aCanvas paintImage: (Display copy: rect) at: self innerBounds origin.
--------------------------------------------
アクセプト。
Alt + s ( Cmd + s )

Uploaded Image: image9.jpg



■「mousUp」メソッドを追加。

モーフをマウスアップするとモーフと同じ大きさの黒枠のボックスがカーソルにくっついてきて、
それをキャプチャしたい位置に移動させてクリックするとボックスの領域が「rect」にはいるって感じにしましょう。
「FromUser」とか「Sensor」なんかけっこうべんりですな。

--------------------------------------------
mouseUp: evt
	rect _ Rectangle originFromUser: self extent.
	Sensor waitNoButton.
	self changed.
--------------------------------------------
アクセプト。
Alt + s ( Cmd + s )

Uploaded Image: image10.jpg



■「handlesMouseDown」を追加

今回も右クリックで移動出来るようにしましょ。
(ワンパターンになってきたな・・・ぶつぶつ)

--------------------------------------------
handlesMouseDown: evt
	^ evt yellowButtonPressed not.
--------------------------------------------

Uploaded Image: image11.jpg


モーフをクリックすると黒枠のボックスがマウスにくっついてくるだしょ。
そのままブラウザの上までいどうしてもう一度クリックすると・・・・

Uploaded Image: image12.jpg


おお!!モーフにちゃんとコピーされてるではないか・・・すんばらしい!!

Uploaded Image: image13.jpg



■ファイルに画像をセーブ

このキャプチャした画像をファイルにセーブできるようにしちゃおうぜい!!
まずは赤ハロメニューに「JPGファイルで保存」という項目を追加しちゃいましょう。

--------------------------------------------
addCustomMenuItems: aCustomMenu hand: aHandMorph
	super addCustomMenuItems: aCustomMenu hand: aHandMorph.
	aCustomMenu add: 'JPGファイルで保存' action: #saveJpg.
--------------------------------------------
アクセプト。
Alt + s ( Cmd + s )

Uploaded Image: image14.jpg


次にメニューで呼び出している「saveJpg」メソッドを作りまする。
(ふたたびDisplay copy: してるところがちょっとなさけない・・・・おいら)

--------------------------------------------
saveJpg
	(Display copy: self bounds) writeJPEGfileNamed: 'Test1.jpg'.
--------------------------------------------
アクセプト。
Alt + s ( Cmd + s )

Uploaded Image: image15.jpg


赤ハロでメニューを出すと一番下に「JPGファイルで保存」が追加されてるっわけです。
その項目を選ぶとSqueakのフォルダに「Test1.jpg」という名前のJPEGファイルが保存されてるはずでする。

Uploaded Image: image16.jpg


できてるできてる。大成功!!

Uploaded Image: image17.jpg



■修正でごんす。

「どひゃ〜!!これじゃだめじゃ〜ん!!!!」
完成したキャプチャモーフをいじってるとへなちょこなところに気づいてしもうた・・・・・
黒枠のボックスで指定した領域の状態を変えるとモーフに貼り付けられた画像もそれに応じて変わっちゃうのね。
(まあこれもおもしろいんだけどさ)
「drawOn」メソッドで画面コピーさせちゃってるからだめなんだよね。ぐっすん。
ってことはマウスアップのときに画面をコピーさせればいいってことかにゃ?
フォームをもうひとつ作ってこれを経由して描画させちゃおっと。

クラス定義でインスタンス変数「rect」は使わないんで削除して、その代わりに「form」を追加。

--------------------------------------------
Morph subclass: #TestMorph9
instanceVariableNames: 'form '
	classVariableNames: ''
	poolDictionaries: ''
	category: 'MyMorph'
--------------------------------------------
アクセプト。
Alt + s ( Cmd + s )

「initialize」メソッドで「rect」の初期設定の行は削除して「form」の初期設定を追加。
--------------------------------------------
initialize
	super initialize.
	self extent: 100@100.
	self position: 0@100.

	form _ Form extent: self extent depth: 16.
	form fillColor: Color gray.
--------------------------------------------
アクセプト。
Alt + s ( Cmd + s )

画面のキャプチャをコピーしたフォームを返すメソッド「getCapture」を追加。
--------------------------------------------
getCapture: rect
	| bufForm |
	bufForm _ Form extent: self extent depth: 16.
	bufForm _ Display copy: rect.
	^ bufForm.
--------------------------------------------
アクセプト。
Alt + s ( Cmd + s )

「mouseUp」メソッドもちょこっと修正。
--------------------------------------------
mouseUp: evt
	| r |
	r _ Rectangle originFromUser: self extent. 
	Sensor waitNoButton.
	form _ self getCapture: r.
	self changed.
--------------------------------------------
アクセプト。
Alt + s ( Cmd + s )

「drawOn」メソッドもちょこっと修正。
--------------------------------------------
drawOn: aCanvas
	super drawOn: aCanvas.
	aCanvas paintImage: form at: self innerBounds origin.
--------------------------------------------
アクセプト。
Alt + s ( Cmd + s )








PREV ------ ● TOP ● ------ NEXT







■ MEMO ■

Thursday, 5 February 2004, 2:21:03 pm
最初はFromUserとか使わずにキャプチャモーフの下の画像をそのままコピーしたかったんだけどね。でもそうするとキャプチャモーフ自身がコピーされちゃうんで、「Magnifier」モーフがどうやってるのかソースコードみてみたんだけどよくわかんなかったや。コピーする前に非表示にしてコピー後に表示ってのがおいららしいやりかただけどね。--thoru

Links to this Page