jsui オブジェクト

次のセクションでは、jsui 固有のプロパティとメソッドについて述べています。js および jsui の両方に共通したプロパティとメソッドについては、js オブジェクトセクションを参照して下さい。

jsui 固有のプロパティ

sketch (Sketch, get)

描画を行なわれる Sketch のインスタンス。下記はその簡単な例です。Sketch オブジェクトのプロパティとメソッドに関する完全な記述は、Sketch のリファレンスセクションを参照して下さい。

function bang() { sketch.glclear(); sketch.glcolor(0.5,0.7,0.3); sketch.moveto(0.25,-0.25); sketch.circle(0.3); refresh(); }

固有のメソッド

refresh ()

this.sketch の内容をスクリーンにコピーします。

jsuiのイベントハンドラ・メソッド

jsui オブジェクトはユーザインターフェイスオブジェクトであるため、ユーザインターフェイスイベントを受け取り、処理することができます。現在のところ、サポートされるユーザインターフェイスイベントは、マウスの動作に関するものと、jsui オブジェクトのリサイズのみです。次のようなメソッドが Javascript コードで定義されている場合、これらのユーザインターフェイスイベントを扱うために呼び出されます。全てのマウスイベントハンドラは次のような標準の形式で定義されなければなりません。

function on<eventname> (x, y, button, modifier1, shift, capslock, option, modifier2) { // 処理を実行 }

modifier1 というアーギュメントは Macintosh のコマンドキーのステート(状態)と PC のコントロールキーのステートを、modifier2 というアーギュメントは Macintosh のコントロールキーのステートと PC の右ボタンのステートを表します。キーが押し下げられている場合に、修飾キーのステートは 1 になり、そうでない場合には 0 になります。イベントハンドラが後続のアーギュメントを考慮しない場合には、これを省略できます。

潜在的なややこしい問題の1つに、マウスイベントが、jsui オブジェクトの左上を (0,0)とし、右下を(幅、高さ)とする絶対スクリーン座標で与えられるということがあります。これに対し、Sketch の描画座標は (0,0)が中央、+1 が一番上、-1 が一番下という相対ワールド座標を使用し、x 座標は y 座標と同じスケール(縮尺)を使っています。スクリーン座標とワールド座標の間の変換には、sketch.screentoworld(x,y)sketch.worldtoscreen(x,y,z)を使います。例えば、次のようになります。

function onclick (x, y) { sketch.glmoveto(sketch.screentoworld(x,y)); sketch.framecircle(0.1); refresh(); }

onclick (x, y, button, mod1, shift, caps, opt, mod2)

定義されている場合、最初のクリックイベントを受け取ります。button アーギュメントは常にオンになります。

ondblclick (x, y, button, mod1, shift, caps, opt, mod2)

定義されている場合、ダブルクリックイベントを受け取ります。button アーギュメントは常にオンになります。

ondrag (x, y, button, mod1, shift, caps, opt, mod2)

定義されている場合、ドラッグイベントを受け取ります。buttonアーギュメントはドラッグされている間オンになり、ドラッグが停止されるとオフになります。

onidle (x, y, button, mod1, shift, caps, opt, mod2)

定義されている場合、マウスが jsui オブジェクトが占有している矩形領域の中にあるとき、全てのアイドルマウスイベントを受け取ります。button アーギュメントは常にオフです。

onidleout (x, y, button, mod1, shift, caps, opt, mod2)

定義されている場合、マウスが、jsui オブジェクトが占有している矩形領域を離れたときの、最初のアイドルマウスイベントを受け取ります。button アーギュメントは常にオフです。

onresize (width, height)

定義されている場合、新しい幅と高さと共に リサイズイベントを受け取ります。