enchant.jsを理解して、Labelの中央そろえを実現!

Filed under JavaScript
Tagged as , ,

enchant.jsでLabelというクラスがあるのですが、他のGUIライブラリのように、プロパティやメソッドは揃っていません。
例えば、センタリングやフォントサイズの指定とかそういうのはないのです。

しかし、enchant.jsは、HTMLのDOMを操作するライブラリである、ということを理解しておくと、普通HTMLでできることは大体なんでもできます。
今回調べたのは、Labelで作ったものを中央そろえにしたい、ということですが、それを実現するために、まずはその前に、enchant.jsのソースを覗いてみましょう。

enchant.jsの基本構造:Entity

Labelクラスですが、次のような構造になっていることが分かります。

enchant.EventTarget
 ↑
enchant.Node
 ↑
enchant.Entity
 ↑
enchant.Label

で、ポイントは、enchant.Entityクラス。
ドキュメントにも『DOM上で表示する実体を持ったクラス.』と書かれていますが、実際enchant.js内を見ると次のようになっています。

1
2
3
4
5
6
7
8
9
10
11
12
enchant.Entity = enchant.Class.create(enchant.Node, {
    /**
     * A class with objects displayed on DOM. Not used directly.
     * @constructs
     * @extends enchant.Node
     */
    initialize: function() {
        enchant.Node.call(this);
 
        this._element = document.createElement('div');
        this._style = this._element.style;
        this._style.position = 'absolute';

ありました!
ポイントは、この this._element ですね!
つまり、誤解を恐れずに言えば、enchant.jsとは、div要素をabsolute(絶対位置)に配置し管理しているライブラリなのです!
その下に、styleとかも見えるので、自由に触れそうな感じがします。
ということで、今回の目的を達成するために、これをいじってみましょう。

Labelの中央そろえ

JavaScriptでは、DOM要素に、style.textAlignを設定できるはずなので、設定してみましょう。
そのテストコードを、jsdo.itに投稿してみました。

How to center text of Label – jsdo.it – share JavaScript, HTML5 and CSS

ポイントは、次の1行です。

1
labelTest._element.style.textAlign = 'center';

これでもいいですが↓

1
labelTest._style.textAlign = 'center';

問題なく設定できていますね!
ただ、内部変数を直接いじっていることになるので、今後のバージョンアップとかで使えなくなる可能性があるのは注意しておく必要があります。


[AD]

↓売れまくっているらしい!

HTML5とJavaScriptでスマートフォンゲーム作成! ゼロからはじめるenchant.js入門【公式ガイド】

著者/訳者:布留川英一 伏見遼平 田中諒

出版社:KADOKAWA/アスキー・メディアワークス( 2012-02-18 )

定価:¥ 3,240

Amazon価格:¥ 3,240

大型本 ( 272 ページ )

ISBN-10 : 4048862588

ISBN-13 : 9784048862585


↓その場しのぎの積み重ね学習を繰り返してきたJavaScriptも基礎からやってみたいなぁ。

JavaScript本格入門 ~モダンスタイルによる基礎からAjax・jQueryまで

著者/訳者:山田 祥寛

出版社:技術評論社( 2010-11-27 )

定価:¥ 3,218

Amazon価格:¥ 25,147

大型本 ( 424 ページ )

ISBN-10 : 4774144665

ISBN-13 : 9784774144665


Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)