【重要】サービス終了のお知らせ

Raphael.js のTips00(総合)

Crane_MolTech

License: MIT License

Fork
1
Fav
0
View
297
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 0 lines
  • HTML 0 lines
  • CSS 10 lines
・Raphael本家 http://dmitrybaranovskiy.github.io/raphael/

・分かり易いdefghi1977さんの解説 http://defghi1977.html.xdomain.jp/tech/svgMemo/svgMemo_19.htm
・逆引き的なもの(PDF) https://www.yoyobrain.com/cardboxes/13788.pdf
・クラスとメソッドの解説一覧 https://pukiwiki.codereign.org/index.php?ProgramLanguage%2FScript%2FJavaScript%2FRaphael

・SVGお絵かき(ワイヤーフレーム素材が多数,「Try SVG-edit here」をクリック) https://github.com/SVG-Edit/svgedit
・SVGをRaphaelの書式に変換 http://readysetraphael.com/

・RaphaelとGoogle map APIの融合ライブラリ http://learnaboutjs.blogspot.com/2010/06/raphaelgoogle-map-apicartgrapherjs.html
・jQuery SVG と Raphael の比較 https://stackoverflow.com/questions/588718/jquery-svg-vs-raphael

----------------------

※Raphael本家の「Free Icons」はとても有用だったのですが今はデッドリンクになって使えません。何とかならないものかと思って探したところ、良いサイトを見つけました。 
Raphael Iconify https://iconify.design/icon-sets/raphael/

例えば「アニメ仕様指定ガイドの基本10」以降使ってる[右向き角丸三角形]は、サイトの1ページ目の一番上の行の右から3番目にあり(タテのリスト表示も可)、これをクリックすると詳細が出ます。

ここでSVGのタブを選んで path d="M11.166 ~ 1.5z" の文字列部分(""で挟まれた部分)をpathとして使えばOKです。あるは、「click this link to download SVG」よりSVG形式でDLしても良いでしょう。

----------------------

Tipsというほどでは無いのですが、ローカル実行の暫定コードや試行ファイルの名前にはその時の時刻を使ってます。例えば今なら 2326.js とか。

暫定コードや試行ファイルの名前にはその時の時刻を使うメリットは、半ば適当な名称ですが再び同一名になる確率は24×60=1440で1/1440となり、同じフォルダ(ディレクトリ)でかち合うことが滅多に無い点です。

----------------------

文字列には基本的に「"」(ダブルクォーテーション)でなく、「'」(シングルクォーテーション)を使っています。前者を多数使った場合、結果的に長くなるので。

----------------------

Raphael.js 得意不得意分野
・得意分野: 図形描画とそのアニメーション(変形や移動)。特に上のリンクでdefghi1977さんが指摘してる通りpath図形の変形は秀逸。他、インタラクティブ性も高い。

・不得意: (他のSVG用JSライブラリでも同様かも知れませんが)文字列を加工するのは面倒。例えば0123456789という文字列があって、012は赤色でフォントを○○、3456を緑色で文字サイズをxxに、789を青で太字、という加工が困難です。

文字列の処理で言えば、テキストボックスやテキストフィールドの概念が無いので、「複数行の文字列を矩形内でスクロール」というのは自分で処理(関数)を作らないといけない。
文字表示にも課題がありますが、もっと苦手なのは文字列の入力(入力フィールド)です。例えば単に [ ] という文字列欄を設置するにしてもRaphael.js単体では実現出来ず、何らかの追加の仕組み(追加ライブラリ)が必要です。

------------
・弱点の追加
これもSVG用JavaScriptライブラリに共通しているかも知れないが、長時間の連続動作や多数要素の一斉移動が苦手。

例えば、円周上に点を置いてこれを円周に沿ってクルクル回す場合、5回転くらいなら問題無いが、50回転くらいになると明らかに遅くなる。

またコップ内の気体分子の移動(飛行)運動(壁に当たってポンポン飛ぶ場合)も最初は良いが、時間の経過と共に遅くなり遂にはカクカクになる。
あとブラウン運動のように小刻みにランダムに動く場合。

これらに共通しているのは、setInterval() や requestAnimationFrame() での繰り返し処理で、単にN回がN*10回になったから速度が1/10になるのではなくもっと重い感じになる。

対策としては、1)繰り返し回数を制限するか適用時間を短くする、2)アニメーションのfpsを減らす(60→24とか)、が挙げられる。
ほかメモリ解放については各自で調べて下さい。 キーワード例は: JavaScript メモリ 解放 (GC OR ガベージコレクション)

requestAnimationFrame() は60fpsで変更できないぽいので適用時間を短くするか適用頻度を減らすという対策がベター



///


  • Raphael.js のTips00(総合)
  • Raphael.js のTips00(総合)

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Forked

sort by