読者です 読者をやめる 読者になる 読者になる

S.F. Page

Programming,Music,etc...

svg

ChromeのSVGPathSegListが削除されていた。

気が付くと、下記のサンプルがChromeで動かなくなっていた。ちなみにFirefoxやEdgeでは問題なく動作したのだが。 three.jsのPathのシリアライズ(2) - bl.ocks.org paths.each(function(){ // 馬セルの取り出しと座標補正 var path = d3.select(this); consol…

nw.jsでデスクトップアプリを作る(25) - Firefoxで動くようにする対応およびWindows 10 のIE11への対応

gistにアップしていたサンプルコードがなぜかFirefoxで動かなくなっていた。 three.jsのPathのシリアライズ(2) 調べるとpath座標に浮動小数表記(9.5e-5みたいな)が混じっていたのであった。pathの内容解析を行いthree.pathに変換するコードは浮動小数表記…

nw.jsでデスクトップアプリを作る(20) - three.jsオブジェクト(プリミティブ)のシリアライズ方法を考える

ここ2,3日three.jsオブジェクトのシリアライズ方法を考えていた。シリアライズという意味は以下の通りである。 オブジェクト指向プログラミングにおいて使われる用語で、ある環境において存在しているオブジェクトを、バイト列やXMLフォーマットに変換す…

nw.jsでデスクトップアプリを作る(19) - SVG pathをthree.js shapeに変換する(4)

シリアライズ・デシリアライズを実装できないかとthree.jsのコードを読んでいたらTHREE.PathにtoShapes()というメソッドがあることに気が付いた。 ここのメソッドは穴あきPathもきちんと判別してTHREE.Shapeに変換してくれるという優れものであった。なんだ…

nw.jsでデスクトップアプリを作る(19) - SVG pathをthree.js shapeに変換する(3)

とりあえず3Dっぽく回転してみようかなと。あとは馬をたくさん出演させることにチャレンジ。three.jsってよくできてるなぁ。やっぱり。 SVGからthree.jsのshapeへの変換(3) 目下の興味はいちからSVGから変換せずに、変換後のgeometryかshapeを保存しておいて…

nw.jsでデスクトップアプリを作る(18) - SVG pathをthree.js shapeに変換する(2)

描画がおかしくなるバグもようやく直った。 ソースコードと動くサンプル:SVGからthree.jsのshapeへの変換(2) ヒントは下記記事。 Converting SVG paths with holes to extruded shapes in three.js Converting SVG paths with holes to extruded shapes in …

nw.jsでデスクトップアプリを作る(17) - SVG pathをthree.js shapeに変換する

今日ようやくthree.jsで表示することができた。がまだ問題は残っている。 原因はまだわからない。 (コードとサンプルURL) http://bl.ocks.org/sfpgmr/6dcbf6d5f51d719bc764 実装するにあたっては下記のコードを参考&拝借している。 SVG path to Three.js …

nw.jsでデスクトップアプリを作る(16) - SVG pathをgeometryに変換する(6)

昨日のSVGアニメーションだが、FirefoxとIEでは動作しなかった。原因はSVGのお作法にしたがってなかったから。読み取りのみのプロパティに値をセットしようとしていたから。なぜかChromeは代入できたんだよねぇ。 規格を読むとpathSegListは読み取り専用なの…

nw.jsでデスクトップアプリを作る(15) - SVG pathをgeometryに変換する(5)

pathの絶対座標を相対座標に変換する問題はググるとあっけなく解決した。 Convert SVG Path to Relative Commands javascript - Convert SVG Path to Relative Commands - Stack Overflow 上記記事中のconvertToRelative()によって変換することができた。下…

nw.jsでデスクトップアプリを作る(14) - SVG pathをgeometryに変換する(4)

SVGのデータをバウンディング・ボックス単位で分割して座標補正をかける部分の続き。 各馬のpathデータのd属性の先頭にあるm(moveTo)命令のx,y座標からバウンディング・ボックスのx,y座標を引けばよいはずである。実験のためのコードは下。 これを実行すると…

東京メトロ オープンデータ(6) 列車ロケーション情報 (odpt:Train)の表示

まあなんとか実装は続けている。ようやく列車ローケーション情報を路線図上にプロットできるようになった。オレンジ色の丸が停車中で、青色の丸が走行中で表示してみたところ。 青色の丸を経路上の中間地点にプロットする方法がわからず、相当悩んだ。愚直に…