質問:
無料の2Dフロアプラン描画ソフトウェア
Mawg says reinstate Monica
2017-02-23 22:19:17 UTC
view on stackexchange narkive permalink

間取り図やショッピングモール、オフィス、工場などを描くことができる FlDrawのようなものを探しています。

enter image description here

問題は、フロアプランの一部を識別できるようにすることです。つまり、フロアプランをWebページに埋め込み、ユーザーがクリックしたときに、できればAngularJを使用して、クリックした店舗、オフィス、部屋などを識別できるようにしたいのですが、昔ながらのJSはピンチで行います。 。

実際、この _might _ は2つの部分からなる質問です。1つは間取り図を描くためのもので、もう1つは難しい部分です。画像をセグメントに分割するプログラムです(撮影を想像してみてください)。 (Angular)JSがクリックされたときに判断できるように、米国の地図と州の輪郭を示します。

Windowsアプリが好きですが、Linuxも利用できます。


[更新] SVGが必要で、各部屋は個別のSVGパスで区切られています


[更新++] 3Dではなく2Dのみが必要で、壁のみを描画したい、ドア、階段&など。私が欲しくないのは、ソファ、充填キャビネット、鉢植えの植物&などの多くのオプションです。これは、ショッピングモールの&産業プラント用です。トイレのアイコンがいくつかあることに異議はないと思います。緊急事態は存在しますが、必要に応じてそれらがなくても生活できます。

黒の&白で十分です。必要に応じて、後でHTMLにcolo(u)rを追加できます。

最も重要なことは、各部屋が別々のSVGパスであるため、隣接する2つの部屋は、1本の線だけでなく、それらの間に2つの接触しているが別々の「壁」が必要です。これは、各部屋をSVGパスで囲み、部屋内のクリックを検出できるようにするためです。

悪いアスキーアートが続きます

  + -------- ------------ ++ -------------------- + | || ||ルーム1 ||ルーム2 | < -----このように| || || / || / | +-/ ------------ ++-/ ---------- +
+ -------------------- + -------------------- + | | ||ルーム1 |ルーム2 | < -----このようではありません| | || / | / | +-/ ------------ +-/ ---------- +  
[イメージマップ](https://en.wikipedia.org/wiki/Image_map)を検討してください
素晴らしいアイデア。私は実際に一度使用していくつかのものをコーディングしましたが、それを完全に忘れていました(+1)。今、必要なのはフロアプラン->イメージマップアプリです:-)
または、より新しいHTML5キャンバスを使用して、各部屋を[パス](http://www.html5canvastutorials.com/tutorials/html5-canvas-paths/)として定義し、 `isPointInPath()`を使用して検出することもできます。クリック数
1 回答:
coreuter
2017-02-24 16:15:23 UTC
view on stackexchange narkive permalink

2つの質問に答えるには:

  1. 最近、間取り図を作成する必要があり、SweetHome3Dを使用して作成しました( http://www.sweethome3d.com ; Windows、Mac OS X 10.4〜10.12、LinuxおよびSolaris;「SweetHome 3Dは、家の平面図を描き、家具を配置し、結果を3Dで確認するのに役立つ無料のインテリアデザインアプリケーションです」)。使い方はとても簡単で、プランをエクスポートするさまざまな方法があります(PDF、SVG)。
  2. フロアプランを描いた後、SVGとしてエクスポートし、さまざまな画像に分割して拡大縮小できます必要に応じて、ベクターグラフィックエディター(Illustrator、Inkscape、..)を使用します。その後、HTML / CSS / JS / AngularJSを使用してすべての画像を元に戻し、onClickを処理する1つのAngularJS関数にフックすることができます。
  3. ol>
ようこそ!良い答え:-(私はそれをしなければならないのではないかと心配していました(+1)。SVG画像の分割を自動化する方法を知っていますか?
ありがとうございました! :)いいえ、完全に自動化された方法はわかりません。私は通常、そのような作業にAdobeIllustratorを使用します。 Illustratorは、SVGのさまざまな部分をエクスポートフィールドにドラッグアンドドロップする可能性を提供します。エクスポートフィールドでは、ドロップされたすべての部分(PNG、JPG、SVG、PDF)をワンクリックでエクスポートする方法を定義できます。 SweetHome3Dは、要素の複数のグループでSVGを作成します。フロアは分離されており、直接ドラッグアンドドロップできます。壁は接続されているため、手動で分割する必要があります。
Inkscapeを使用して、各部屋を別々のレイヤーに配置することを考えています。レイヤーを重ねて表示すると、間取り図は完全に見え、各部屋の壁が次の部屋に接していますが、各レイヤーをHTML5キャンバスパスとしてエクスポートすることはできます。


このQ&Aは英語から自動的に翻訳されました。オリジナルのコンテンツはstackexchangeで入手できます。これは、配布されているcc by-sa 3.0ライセンスに感謝します。
Loading...