DrawingCanvas.js 0.03 公開2005年10月12日 03時10分

高橋登史朗さんDrawingCanvas.js を使ったグラフ描画のデモを公開してくださっています。すばらしいですね。これぞまさしく Ajax という感じです。

しかし、Pentium M 1.3 GHz 、メモリ 256 MB という私の環境では Firefox 1.0 (CSS Positioning バックエンド) での表示がフリーズしたかと思うほど遅かったです。そこで処理を少し改善した DrawingCanvas.js 0.03 (ソース表示) を公開しました。本当は 0.02 公開のときにやろうかと思っていたのですが面倒くさくなってやめたという (^^;

それから、描画部分にスタイルなどを指定する際は、DrawingCanvas#container ではなく DrawingCanvas#parent (コンストラクタの第 1 引数に指定した要素) に対して指定してください。DrawingCanvas#container は private (というよりは protected か) にすべきだったかも。

それにしても DrawingCanvas 自体は非同期通信も何も使っておらず、はてなブックマークでつけられているタグを見てどこが「Ajax」なのだろうと思っていたのですが、こうやって Ajax アプリケーションに組み込まれるとまあ Ajax でもいいかという気分になってきます。いうなれば Advanced JavaScript Applications which are Cross-browser のほうでしょうか (どうでもいいけど私はつい Ajax を「アジャックス」と読んでしまいます)。以下のようなスクリプトもあることですし Advanced かどうかは疑問ですが。(しかしこれを最初から知っていれば DrawingCanvas なんて作っていなかったかも。)

DrawingCanvas.js 0.04 (ソース表示) 公開。0.03 で DrawingCanvas#container にスタイルが指定されてもいいよう、内部的なスタイル指定を冗長にしていたのですが、処理速度の低下を招くことがわかったので元に戻しました。

コメント

_ 高橋 ― 2005年10月12日 05時49分

DrawingCanvas.js 0.03ありがとうございます。早速適用しました。parent も修正しました。
あと、再描画時に、グラフ全体書き換えは無駄なのでundo()を使わせていただきました。
劇的にきびきび動いています(^^
http://jsgt.org/lib/vector/graph/sample21.htm

http://www.walterzorn.comのwz_jsgraphics.jsもすごいですね。この方3年も続けてるんですね。
以前、このサイトは見た記憶はあったんですけれど、これは気づきませんでした。
#このページでダブルクリックすると、マギー審司思い出します(^^;

_ 高橋 ― 2005年10月12日 11時50分

Operaの再描画がどうも巧くいかないですね、、、。なぜでしょう、、、。
ところで、なんとさん、本の件ですけれど、謹呈できるかもしれませんので、お手数ですがメールいただけましたらありがたいです(_ _)。

_ 高橋 ― 2005年11月09日 09時33分

こんにちは。WinIEで
http://www.ne.jp/asahi/nanto/moon/2005/09/27/canvas.html
の描画途中にページを移動しようとすると落ちることがありますね。なにか回避する方法はあるでしょうか、、、。

_ nanto_vi ― 2005年11月12日 08時54分

キャンバス内でマウスボタンを押し、そのままキャンバス外までドラッグしたあとのページ遷移で落ちるということでしょうか。
うーん、こちらの環境(Windows XP、IE 6 SP2)では再現できませんね。
もっと詳しい再現条件がわかるといいのですが……
# 最近なかなか時間が取れないのでわかったとしても修正できるかは不明ですが ^^;

_ 阿部 ― 2006年12月12日 01時50分

ネット上で、ドロー系の描画ができる仕組みを作りました。
ただし、ブラウザではなく、全く新しいオリジナル言語(KI言語)を使っています。
一度、試してください。

コメントをどうぞ

※メールアドレスとURLの入力は必須ではありません。 入力されたメールアドレスは記事に反映されず、ブログの管理者のみが参照できます。

※投稿には管理者が設定した質問に答える必要があります。

名前:
メールアドレス:
URL:
次の質問に答えてください:
「ハイパーテキストマークアップ言語」をアルファベット4文字でいうと?

コメント:

トラックバック

このエントリのトラックバックURL: http://nanto.asablo.jp/blog/2005/10/12/105647/tb

_ Diaspar Journal - 2006年07月01日 05時41分


ブラウザの標準機能だけでベクターグラフィックスを扱うには次の方法があります。


canvas




Drawing Graphics with Canvas
「参考」に掲載され

_ suzukyuの勉強日記 - 2006年08月08日 15時43分

ウェブ上にデータファイルから動的に散布図を描画したものを表示したくて調べていたのですが DrawingCanvas.jsにたどり着きました。これ凄いなー。 ただ、canvas.startLine、canvas.lineTo、canvas.endLineの組み合わせで描画するものなので 散布図に利用するのはひょっとし

_ せつないぶろぐ - 2006年08月24日 20時19分

phpspot読んでてJavaScriptでも線が引ける事に気づいた。よく考えたらGoogle Mapで線描く機能あるからそりゃできるよね。で記事のライブラリとかの使い方を調べていたら別のスクリプト見つけ...