Ukagaka Balloon Surface Renderer for Web Browser
Balloon.js is a Ukagaka
compatible Balloon Shell renderer for HTML canvas.
<script src="../bower_components/encoding-japanese/encoding.js"></script>
<script src="../bower_components/jszip/dist/jszip.min.js"></script>
<script src="../bower_components/narloader/NarLoader.js"></script>
<script src="../dist/Balloon.js"></script>
<script>
NarLoader
.loadFromURL("../nar/origin.nar")
.then(function(nanikaDir){
console.log(nanikaDir.files);
var balloonDir = nanikaDir.asArrayBuffer();
var balloon = new Balloon.Balloon(balloonDir);
return balloon.load();
}).then(function(balloon){
console.log(balloon);
var div = document.createElement("div");
var scopeId = 0;
var surfaceId = 0;
balloon.attachBlimp(div, scopeId, surfaceId);
document.body.appendChild(div);
}).catch(function(err){
console.error(err);
});
npm install -g bower dtsm gulp browserify watchify http-server coffee-script
npm run init
npm run build
- 型はTypeScriptで、サンプルコードはCoffeeScriptで書かれています。
attatchSurface(element: HTMLDivElement, scoepId: number, blimpId: number|string): BalloonSurface|null
- blimpId: バルーンサーフェスID
- 0の時、左側通常バルーン
- 1の時、右側通常バルーン
- 2の時、右側大きなバルーン
- 3の時、左側大きなバルーン
on(event: "mouse", callback: (ev: BalloonMouseEvent)=>void): void
on(event: "select", callback: (ev: BalloonSelectEvent)=>void): void
interface BalloonEvent {
type: string;
scopeId: number; // \p[n]
balloonId: number; // \b[n]
}
interface BalloonMouseEvent extends BalloonEvent {
type: string; // click|dblclikck|mousemove|mouseup|mousedown
}
interface BalloonSelectEvent extends BalloonEvent {
type: string; // anchorselect|choiceselect
id: string;
text: string;
args: string[]
}
- attatchSurfaceで指定したDiv要素です。
- 以下のように要素が追加されます
div.blimp canvas.blimpCanvas div.blimpText style[scoepd]
- 吹き出しがゴーストに向かって左にあるならtrue
- バルーンの横幅px
- バルーンの縦幅px
- バルーンを再描画します
\b[n]
- このメソッドを使ってもバルーンの左右位置は変えられません。
Blimp#left()
,Blimp#rihgt()
を使ってください。
- バルーンを左向き表示にします
- バルーンを右向き表示にします
- バルーンの現在のカーソル位置に文字を追加します