2012/02/11(土) [n年前の日記]
#1 [papercraft][javascript][svg] 円錐台の展開図を求めるページを改良
先日アップロードした、
_円錐台の展開図を計算するページ
を改良した。計算結果を元に展開図を描画して、SVGファイルとして保存できる機能をつけた。
保存したSVGファイルは、Inkscape(無料で使えるドローソフト)で開けることを確認済み。というか開けるようにするところで苦労した。最低限groupを1つ作ってそこに登録しないといけない気がする。そのあたりの、Inkscape独自の制約は未だよく分からず。
とりあえずここまではできたけれど。生成したSVGファイルをInkscapeで開いた直後、悩んでしまった。
- SVGファイルとして保存する際、ファイル名を自分で指定する必要あり。test.svgとかそんな感じで。
- 展開図の描画にインラインSVGを利用しているので、最近のブラウザじゃないと動かないはず。
- Firefox 10.0.1、Google Chrome 17.0.963.46 で動作確認済み。
- IE9、Opera 11.61 では、ファイル保存機能が使えないことを確認。
- JavaScriptでやってます。
保存したSVGファイルは、Inkscape(無料で使えるドローソフト)で開けることを確認済み。というか開けるようにするところで苦労した。最低限groupを1つ作ってそこに登録しないといけない気がする。そのあたりの、Inkscape独自の制約は未だよく分からず。
とりあえずここまではできたけれど。生成したSVGファイルをInkscapeで開いた直後、悩んでしまった。
◎ SVGファイルの活用のされ方について考え込んでしまった。 :
そもそも Inkscape は、長さや角度を正確に測定しながら作業していく種類のソフトではない。せっかくSVGファイルとして出力して、それを開いてみても、のりしろをつけようとするだけで一苦労だった。これではSVG保存をできるようにした意味が無い。
それら正確な測定をしながらの作業は、CADソフトが得意とするところ。しかし、フリーで使えるCADソフトはSVGインポート機能なんぞついてない。少なくとも、自分が普段利用しているAR-CADにそんな機能はなかった。 *1
つまり…。先ほどのページで展開図を描画するところまでは、結果が分かりやすくなるからよしとしても。SVG保存機能をつけたあたりは蛇足だったかもしれず。使い道が無い。まあ、JavaScriptやSVGの勉強にはなったから良しとするけれど。展開図を描くための数値が得られた時点で、後はCADソフト上で作図を始めたほうが良さそうな気がした。
そんなことをもやもやと考えているうちに。SVGファイルというものは、現状、最終出力ファイルフォーマットになってしまっている気がしてきた。PDF、exe、jpgあたりと同類とでもいうか。 *2 最後にその形式で出力して、閲覧・参照・実行だけしてそれで終わりなフォーマット。インポートして別の何かと組み合わせたり、編集したりということは、基本的には考えられてない、そんな現状があるのかもしれない。
SVGは、単位にmm等も使えるし、ベクター画像だから拡大しても画質が落ちたりしないし、中身はテキストファイルだから編集しやすいし、昨今はブラウザでも表示できるようになってきたし、メリットがあるように思うのだが。なんだかもったいない気もする。まあ、HTML5？の普及と共に状況が少しずつ変わっていく可能性もありそうだけど。
それら正確な測定をしながらの作業は、CADソフトが得意とするところ。しかし、フリーで使えるCADソフトはSVGインポート機能なんぞついてない。少なくとも、自分が普段利用しているAR-CADにそんな機能はなかった。 *1
つまり…。先ほどのページで展開図を描画するところまでは、結果が分かりやすくなるからよしとしても。SVG保存機能をつけたあたりは蛇足だったかもしれず。使い道が無い。まあ、JavaScriptやSVGの勉強にはなったから良しとするけれど。展開図を描くための数値が得られた時点で、後はCADソフト上で作図を始めたほうが良さそうな気がした。
そんなことをもやもやと考えているうちに。SVGファイルというものは、現状、最終出力ファイルフォーマットになってしまっている気がしてきた。PDF、exe、jpgあたりと同類とでもいうか。 *2 最後にその形式で出力して、閲覧・参照・実行だけしてそれで終わりなフォーマット。インポートして別の何かと組み合わせたり、編集したりということは、基本的には考えられてない、そんな現状があるのかもしれない。
SVGは、単位にmm等も使えるし、ベクター画像だから拡大しても画質が落ちたりしないし、中身はテキストファイルだから編集しやすいし、昨今はブラウザでも表示できるようになってきたし、メリットがあるように思うのだが。なんだかもったいない気もする。まあ、HTML5？の普及と共に状況が少しずつ変わっていく可能性もありそうだけど。
◎ SVG→DXFはどうだろう。 :
AR-CADはDXFをインポートできるらしいので、SVGをDXFに変換すれば、と思いついた。
_VectorToVector を使えばSVG→DXF変換ができるらしい。が、試用してみたところ、AR-CADで読み込めるデータは出てこなかった。そもそも VectorToVector上で、SVGをプレビューできていない。自分が無理矢理出力したSVGは、正常なものではない可能性が否定できない。
Inkscapeで開いたSVGをプレーンSVGとして保存し直してみた。それをVectorToVectorでプレビューしてみる。…とんでもない表示になった。Inkscape上では正常に表示されているのだが。
Inkscapeには、DXF保存できる機能があると知る。保存する際に拡張子を選択するだけ。試しにDXFで保存して、AR-CADで読み込んでみた。…形状は合っている。だが、大きさがおかしい。61.84659mmが、17.45mmになっている。何故だ…。
Inkscape上からSVGをプリンタで印刷して、それを定規で測ってみた。大体62mm。ということは、件のページから保存したSVGは、Inkscapeで扱う限り大きさに関しても合っている、ということだろう…。
emf,eps,pdf,psなど、Inkscapeからエクスポートできる色々な形式で保存して、gsview等、別の何かでDXF変換して、AR-CADにインポートしてみたが、どれも上手く行かない。
DXFにして読み込ませるという方法は手詰まりかもしれず。
_VectorToVector を使えばSVG→DXF変換ができるらしい。が、試用してみたところ、AR-CADで読み込めるデータは出てこなかった。そもそも VectorToVector上で、SVGをプレビューできていない。自分が無理矢理出力したSVGは、正常なものではない可能性が否定できない。
Inkscapeで開いたSVGをプレーンSVGとして保存し直してみた。それをVectorToVectorでプレビューしてみる。…とんでもない表示になった。Inkscape上では正常に表示されているのだが。
Inkscapeには、DXF保存できる機能があると知る。保存する際に拡張子を選択するだけ。試しにDXFで保存して、AR-CADで読み込んでみた。…形状は合っている。だが、大きさがおかしい。61.84659mmが、17.45mmになっている。何故だ…。
Inkscape上からSVGをプリンタで印刷して、それを定規で測ってみた。大体62mm。ということは、件のページから保存したSVGは、Inkscapeで扱う限り大きさに関しても合っている、ということだろう…。
emf,eps,pdf,psなど、Inkscapeからエクスポートできる色々な形式で保存して、gsview等、別の何かでDXF変換して、AR-CADにインポートしてみたが、どれも上手く行かない。
DXFにして読み込ませるという方法は手詰まりかもしれず。
◎ 2013/08/28追記。 :
_円錐台の展開図を計算するページ
が、今時のブラウザでは動作しなくなってた・ファイル保存できなくなってたので修正しておきました。バグ報告ありがとうございますです。
◎ 2014/02/02追記。 :
おかしな計算結果が出てくることに、今頃気付きました…。直径aとbの差が大きくなるにつれ、高さがどんどんおかしくなっていくようで…。今まで全然気づきませんでした。どうしてこうなっちゃうのか調べてみます。バグ報告ありがとうございます。
◎ 2014/02/03追記。 :
ごめんなさい。自分、勘違いしてました。これ、バグじゃなくて正常動作ですね。高さhと、dを混同してました…。直径aとbの差が大きくなれば、dが大きくなるのは当たり前…。バグではなかった…。
アプリによって印刷サイズがおかしくなる件は謎です…。Windows + Inkscapeで印刷した場合に、正しいサイズになることは確認しましたが…。
svgの中身を見れば分かりますが、幅と高さに「mm」を記述して、「ミリ単位で数値を扱いなさい」と指定してますので…。ミリ単位を解釈できないsvgビューア・アプリでは、おかしいサイズで印刷されるのかもしれません…が、そのあたり自信ないです。
計算結果内の「扇形上辺半径」と「扇形下辺半径」で、2つの円を描いて、「扇形角度」でぶった切れば展開図が作れますので、svgの印刷サイズがおかしくなる場合は、他のCGソフト・CADソフト等で作図・印刷してみていただければと。
アプリによって印刷サイズがおかしくなる件は謎です…。Windows + Inkscapeで印刷した場合に、正しいサイズになることは確認しましたが…。
svgの中身を見れば分かりますが、幅と高さに「mm」を記述して、「ミリ単位で数値を扱いなさい」と指定してますので…。ミリ単位を解釈できないsvgビューア・アプリでは、おかしいサイズで印刷されるのかもしれません…が、そのあたり自信ないです。
計算結果内の「扇形上辺半径」と「扇形下辺半径」で、2つの円を描いて、「扇形角度」でぶった切れば展開図が作れますので、svgの印刷サイズがおかしくなる場合は、他のCGソフト・CADソフト等で作図・印刷してみていただければと。
この記事へのツッコミ
[ ツッコミを読む(6) | ツッコむ ]
以上です。
確か以前はＳＶＧファイル作成の下？にプレビューを表示できるところがあったと思うのですが・・・・なくなってしまったのですか？？
型紙を作るのにとても便利で、たくさん活用させていただいていたので、
もし今後も利用させていただくことが可能でしたら
作った図をプリントアウトできる方法を教えていただけますと嬉しいです。
無知ですみませんがよろしくお願いいたします。
気付くのが遅くなって申し訳ないです。
件のページは、今時のブラウザでは動作しない作りになってたようで…
今時の仕様に合わせて、修正しておきました。
早々に対応してくださって助かりました♪
PCに疎い私でも数字をいれるだけで図ができるのは
本当にありがたくて感謝しています。
これからも使わせていただいてよろしいでしょうか?
よろしくお願いいたします(^-^)
Google CromeでOSはMacです。Macだからでしょうか？
ぜひ教えていただたらうれしいです。
自分の環境 ―― Windows7 + Firefox で出力したsvgを
Inkscapeで開いた場合も、おかしな結果になることを確認しました。
おそらくバグです。申し訳ない…。
どうしてこうなっちゃうのか、原因を調べてみます。
正しい結果が出てるようです…。
Mac + Google Chromeで印刷サイズが違ってしまう件は、よく分かりません。
自分、Macは持ってないもので…。
計算結果の数値を使えば、他アプリで作図することもできると思うので、
そういうやり方で凌いでいただければと…。