學習愛屋格局圖

學習愛屋格局圖/ 首頁
愛屋新格局圖
簡單、實惠、不用學習的優質繪製工具,系統採用HTML5架構,搭配SVG(可縮放向量圖形)元件,助您繪製專業、高品質的格局圖。
分為:基礎教學、進階應用,由淺入深讓您輕鬆學會愛屋格局圖的繪製。

大綱

基本技巧與滑鼠、鍵盤技巧:
1輸出圖檔尺寸比例控制。
2預設文字:微軟正黑體粗體23字級。
3複製元件組合:Ctrl+拖曳移動。
4如何移動畫布。
5如何查閱教學內容?
秘書提問回答:
1粗細線材的使用。
2如何畫落地窗、鐵捲門、空心雙線。
如何將多個元件組合運用?
移動、旋轉、複製。
全方位-角度線的運用?
粗細、圓角、彎角、虛線、顏色運用。
如何套圖描繪?
插入、描繪、移除。
如何運用立可白?
粗細、圓角、彎角、虛線、顏色運用。
如何【設為範例】、【挑選範例】?
【設為範例】前,請先按【存檔不出圖】。

基礎影音說明

教您如何登入愛屋房管與簡單說明如何繪製格局圖...

進階應用影音說明

教您一些新格局圖的進階繪製技巧...
教您如何登入愛屋房管與簡單說明如何繪製格局圖...

如何進入房管與格局圖繪製系統?
1進入【房管系統】並查詢物件,進入【新格局圖繪製系統】。
API版使用者,可以於原有系統系統中直接開啟【新格局圖繪製】。如【測試】【試用】
2格局圖系統介面說明。
3各種元件的實例介紹。
存檔自動匯出JPG圖檔
繪製過程記得常做存檔【存檔不出圖】,完成按【存檔出圖】。
  • 一、新格局圖系統簡介
    英特聶愛屋線上所發表的新格局圖繪製系統,採用全新HTML5技術、搭配SVG元件,並提升了使用好感度,將介面簡化為「任何人都會畫」、「手機也可以畫」、「什麼地方都能畫」的使用體驗,並新增了許「專業」的功能,打造PRO級格局圖品質,簡介、進入愛屋房管系統
  • 二、如何登入與基礎操作
    開啟愛屋新格局圖繪製系統的4種方式?
    1透過愛屋提供的指定連結來登入繪製,如飛鷹地產
    2業務人員透過物件平台列表上右側的按鈕來繪製,如 右圖示連結
    3品牌或API介接使用客戶,請由原有系統中,點選進入新格局圖繪製的按鈕或連結。
    4登入愛屋房管>>物件維護>>【圖片影像】中 找到 【新版格局圖繪製】按鈕,如下圖說明:

    A、整體介面分為:

    選單區元件區繪製區檢視區

    技巧:下圖選單區中提供多項版面設定,元件區如下B項詳述,右側檢視區,提供:【風格】、【文字】、【調整】等格式設定,可切換角度、虛線型式、粗細、顏色,、頁面比例(預設100%)、工具提示、網格顯示與否... 等等,多種屬性變換。

    B、元件區提供的兩種元件:

    向量圖(SVG):可以 非等比縮放、旋轉、換顏色、粗細、填滿顏色等。非向量圖(PNG圖):只能 等比縮放、旋轉!

    C、運用滑鼠、鍵盤來輔助繪製(詳如下方說明)。

    • 技巧a:

      在交疊的元件上(如下圖),可以運用選單【調整】、【移至最前】來調整前後,也可以使用移到前方按鍵或移到後方按鍵來進行。
    • 技巧b:

      滑鼠左鍵點住拖曳元件上的旋轉按鈕(如下圖)可以自由旋轉角度,但每點一下圖示,則是旋轉90度。
    • 技巧c:

      選單提供多種元件指令,也可以用鍵盤來輔助與運用(如下:常用鍵盤、滑鼠指令)。
  • 三、技巧解析
    1、如何套圖描繪,以進行正確比例繪製室內成果圖、邊界等?

    用途:如 描畫正確比例繪製謄本室內成果圖、土地邊界等繪製,或加上浮水印防盜等。

    用法教學 A、複製網路圖片網址

    B、貼入格局圖中,並拉伸到適當的大小當基底,再開始描繪!

    詳細說明用法:用法一

    A、選單 >>調整 >>插入 >> 插入圖片 >>確定選擇網站上的圖片網址路徑!

    B、將插入外來圖片,調整適當的位置、大小。

    C、透過新格局圖的元件工具,重新描繪(可以畫任何彎曲不規則的線條!!)。

    D、完成後,移除 套入的外來圖片。

    加上浮水印防盜
    例圖如下,圖檔連結:https://hq.houseol.com.tw/images/ewp/Admin/copyright002.png
    2、多角度弧線的繪製運用。

    A、用途:舉凡 圓拱、弧形牆面、藝術建築物、地界等

    用法:選擇【全方位~角度線條】,並透過元件上的藍色節點多元調整來繪製。

    B、用途:指標、指示方向之用。等

    用法:選擇【全方位~角度線條】,並選擇【線尾】調整箭頭樣式。

    C、如何快速繪製多角度的空心線?

    用法: 1、選擇【全方位~角度線條】,並先調整好線材長度、角度
    2、下拉選擇【連接】如下圖紅圈(細圈:細線、粗圈:粗線)
    3、並調整與拖曳出各種角度或樣式。

    如下圖:一線完成空心曲線牆面繪製,不須六線組合。
    如下圖:一線就可以畫出曲線牆面,不須多條直線組合。
    如下圖:全方位線-畫出ㄇ字線圖形,不須組合!
    3、如何圈選局部元件,以進行編輯(增、刪、修、移)作業?

    A、於畫布空白處,以滑鼠左鍵或於平板、手機長按(短按:移動畫布)並拖曳矩形區域來圈選。

    B、相同組合的複製做法。

    如下圖,先畫好左邊黃圈的3F格局,再利用圈選部分欲複製的元件群,並按滑鼠右鍵,選擇【組合】,再進行【複製】【貼上】,或是整組旋轉。

    4、如何將多元件組合,並進行旋轉、移至最前..?

    用途:如 透天別墅之 2/3/4F相同格局、同一建案 之相似格局繪製。

    做法1:框選所需的元件,於其間使用滑鼠右鍵,並於選項中擇選【組合】指令。

    做法2:再透過【旋轉】按鈕來進行角度更換。

    5、繪製外牆空心線與顏色運用。

    雙空心(虛)線 用途:例如畫 增建、二次施工(如下圖)、窄牆等須特別凸顯時。用法:例如外牆或選擇弧線:【全方位~角度線條】>> 右邊檢視區 >> 取消填充
    變換顏色 用途:讓畫面凸顯、重點標示。用法:例如箭頭 >> 右邊檢視區 >> 勾選填充>>漸層方向(東、西、南、北)>>漸層顏色 。

    6、元件組合_實例分享:空心線(虛線)、立可白的運用!

    用途:如 快速繪製空心邊牆、雨遮、外推線等。

    步驟

    A、【空心線】:牆線取消填充,【虛線】:則需下拉【線】項目來更換。

    B、【立可白】:運用全白的(線與填充都選白色)幾何方塊做成遮蓋部分元件。

    C、【元件組合】將線材框選並滑鼠右鍵選擇組合,以利整組複製、移動、旋轉等。

    7、快速畫【鐵捲門】方法:顏色可自行調配。

    A、畫一條線,在該線上面滑鼠點兩下,或再加上【文字】元件,

    B、在上面key上 W 或 V 字元,並設定置底 即可!

    8、其他技巧說明:

    A.門框無法覆蓋框線:【建築結構】的向量圖【門】可以!

    B.元件關聯線條:如下圖利用淡藍色【箭頭】或【x】符號,在元件之間直接畫出箭頭關聯線,若格局圖用不到則勿點選即可。

    C.常用鍵盤、滑鼠指令說明更多指令參考

    愛屋新格局圖指令集
    Ps.手機、平板,若無滑鼠、鍵盤指令,僅能用手指觸控來操作,將較不利繪製。
    功能說明
    鍵盤指令
    滑鼠指令
    詳述說明
    功能說明
    移動元件
    鍵盤指令
    滑鼠指令
    或按住拖曳
    詳述說明
    用滑鼠點住一筆或多筆元件、移動
    功能說明
    移動元件
    鍵盤指令
    滑鼠指令
    或按住拖曳
    詳述說明
    用滑鼠點住一筆或多筆元件、移動
    功能說明
    移動元件
    鍵盤指令
    滑鼠指令
    或按住拖曳
    詳述說明
    用滑鼠點住一筆或多筆元件、移動
    功能說明
    移動元件
    鍵盤指令
    滑鼠指令
    或按住拖曳
    詳述說明
    用滑鼠點住一筆或多筆元件、移動
    功能說明
    複製元件
    鍵盤指令
    Ctrl+C
    Ctrl+D
    滑鼠指令
    詳述說明
    按住Ctrl鍵+C:複製元件
    按住Ctrl鍵+D:複製貼於原位
    功能說明
    貼上元件
    鍵盤指令
    Ctrl+V
    滑鼠指令
    詳述說明
    按住Ctrl鍵+V:貼上元件
    功能說明
    剪下+複製元件
    鍵盤指令
    Ctrl+X
    滑鼠指令
    詳述說明
    按住Ctrl鍵+X:剪下所選元件,並複製
    功能說明
    還原動作
    鍵盤指令
    Ctrl+Z
    滑鼠指令
    詳述說明
    按住Ctrl鍵+Z:連續還原上一步動作
    功能說明
    重做動作
    鍵盤指令
    Ctrl+Y
    滑鼠指令
    詳述說明
    按住Ctrl鍵+Y:重做上一步動作
    功能說明
    移動元件
    鍵盤指令
    Shift
    滑鼠指令
    +滑鼠左鍵
    詳述說明
    複選元件,點住其中一筆mark的元件並拖曳可以移動所選擇的元件。
    功能說明
    框選組合元件
    鍵盤指令
    Shift
    滑鼠指令
    或+滑鼠左鍵按住拖曳框選
    詳述說明
    按住Shift鍵+滑鼠左鍵點住空白處做t拖曳框選:可以框選與mark局部的元件組合。
    功能說明
    移動畫布
    鍵盤指令
    滑鼠右鍵按住畫布拖曳
    滑鼠指令
    或Ctrl+滑鼠左鍵按住空白處拖曳
    詳述說明
    按住Ctrl鍵+滑鼠左鍵點住空白處不放並做拖曳:可以移動畫布。
    按住Ctrl鍵+滑鼠左鍵,點住其一或多筆已mark的元件並做拖曳放開:可以複製並移動所選擇的元件 。
    功能說明
    複製、移動元件
    鍵盤指令
    Shift
    滑鼠指令
    +滑鼠左鍵按住拖曳
    詳述說明
    複選元件。
    Ctrl + 滑鼠左鍵:mark元件並開啟功能窗,與元件上使用滑鼠右鍵一樣。
  • 四、設為範例、挑選範例
    1、【設為範例】:輸入查詢時需要的物件屬性,點選設為範例並按【確定】鈕,以儲存為格局圖範例。

    PS.一個物件僅能存成一個範例,故同一物件後續都是修改同一範例。

    設為範例 注意事項:當按【設為範例】時,會檢查該格局圖是否已存檔,若未存檔,則出現:請先點選右下角【存檔不匯出】再行設為範例!
    2、挑選範例:點選【挑選範例】查詢相關條件與預覽,點選【套用】按鈕以帶入所選格局圖範例
    3、查詢、修改、刪除範例示意圖
  • 五、格局圖成品更多範例賞析
  • 六、常用FAQ
    Q1【住商】:
    為何點選[新格局圖繪製]按鈕時,沒有進入格局圖,畫面卻回到虎翼首頁?
    A1:
    同店的同一組帳號,重複登入時,前一組登入的畫面會被登出。當系統無法正確判斷使用者,就會被導回虎翼首頁(資安考量!!),處理方式:只要重新登出虎翼再登入一次,就會恢復正常!!
    Q2【住商】:
    如何繪製斜線、組合元件、立可白運用?
    A2:
    這裡有詳細說明 愛屋新格局圖使用技巧
    Q3【住商】:
    沒有立可白功能?
    A3:
    已內建,或使用向量元件於右邊檢視區中設定為白色 ,且線也設為【白色】線,即擁有各種圖形的立可白效果。
    Q4【住商】:
    如何查閱新格局圖繪製系統的說明?
    A4:
    如上↑影片教學說明,或於繪製系統中的【選單】:【幫助】>> 點選【幫助】就可以看到此說明。也可以觀看影片教學:如上
    Q5【住商】:
    新版與舊版格局圖有哪些精進與差異分析?
    A5:
    新版VS.舊版如下圖 或 點我看更多差異化分析
    Q6【住商】:
    如何將元件移到最前、移到後面?
    A6:

    法1:如下圖做法:

    法2:在元件上,以滑鼠右鍵並選擇【移至最前】。

    Q7【住商】:
    每次都要重繪? 沒有設為範例的功能嗎?
    A7:
    提供設為範例、挑選範例 功能,並提供範例圖預覽!欲新增為範例格局時,需先存檔格局圖再設為範例!如圖:
  • 七、新格局圖系統沿革

    愛屋新格局圖製作

    111年06月
    成立愛屋格局圖繪製網站,提供單店或個人有格局圖繪製需求的同好使用!! 也歡迎 大師房屋採用!愛屋新格局圖繪製系統!!
    110年03月
    歡迎 飛鷹地產總部採用愛屋新格局圖繪製系統!!
    110年02月
    住商:兩方主機時差,導致格局圖無法正常開啟,被導引到繪製過期的畫面,已排除!!
    110年01月
    由於Adobe公司的FLASH已經於110/1/12走入歷史,舊版格局圖,已無法使用!已下架~並設定新格局圖的起迄日。
    109年08月
    住商:兩方主機時差,導致格局圖無法正常開啟,被導引到繪製過期的畫面,已排除!!
    109年07月
    台屋:畫了洗手台存檔後,再開啟時洗手台圖案變為正方塊! 也是檔名為簡體字無法存入問題排除!
    調整:向量圖中路徑文字若含簡體字,存檔時改用Unicode格式存檔,以利簡體字或特殊字體存入。
    109年06月
    台屋:調整設為範例時,範例名稱(如:喆園)之特殊字無法存檔會變成問號的瑕疵。
    109年05月
    5/18 太平洋房屋總部所有加盟店,導入愛屋新版格局圖繪製系統。 5/8 晚上 調整先存xml檔、後存svg,以免xml有可能未成功存檔的修正。
    5/4 台屋:增加範例預覽圖,但上線前的舊格局圖需先【存檔不匯出】再設為範例。
    PS:由於產生預覽圖svg的時機是於格局圖存檔時,故包括預覽圖,欲新增為範例格局時,需先存檔格局圖再輸出!!
    109年03月
    蘇富比:採用愛屋格局圖,並增加柱子png元件。 如:
    台屋:修正為 全品牌共享範例功能。
    108年08月
    住商/大家總部:8/3起愛屋舊版格局圖下架,全面改用新格局圖系統!
    愛屋房管提供兩種版本:
    1、秘書版(系統):直接結合物件上官網(有品牌浮水印)。
    2、業務版(API):由物件平台點入,不與官網連動,可直接下載畫好的格局圖(無浮水印)。
    3、介面左下角增加品牌識別LOGO,API(手動下載版)取消浮水印的機制,只保留DEMO有!
    優化非向量元件 如:
    108年07月
    歡迎台X房屋直營/加盟總部採用。
    108年06月
    增加立可白(方、圓形)、增加【設為範例】【挑選範例】功能、加深非向量門的顏色。
    108/6/3 愛屋新格局圖 導入知名品牌:住商/大家,舊版並限期60天後功成身退、停止服務。
    調整預設文字:字型、顏色為【微軟正黑體】粗體23字型,與內建文字(PNG)字型相同,增加向量直梯2組。
    輸出圖檔時,文字顯示問題修正,預設手key文字為 微軟正黑體/粗體,與內建文字字型大小一致!
    108年05月
    5/4台屋加盟總部+直營總部全部導入愛屋新格局圖繪製系統。
    愛屋新格局圖 新功能研發:套圖描繪(如 描畫謄本室內成果圖)、組合旋轉(如 不同座向的相同屋型),因應API介接需求,雙空心線等,如說明
    程式版本(語法改版)升級,並提供完整API測試環境。
    108年04月
    新格局圖系統上線後測試、微調,輸出圖檔尺寸,預設寬度由600px改成:830px。
    108年03月
    108/3/26 調整出圖尺寸,從600px加大到830px
    108/3/22 修正手key文字無法輸出到圖檔問題。
    108/3/21 格局圖已可正常存檔匯出圖檔不黑底且不出現存檔提示,直接輸出與關閉繪製畫面。製作簡報、操作教學影片。簡報 操作
    108/3/20 完成繪製介面右下角【存檔不匯出】、【存檔匯出】圖片功能。
    108/3/19 局部區域圈選功能、RWD版改版。
    108/3/13 正式系統上線。

    108/3/11 新格局圖上線前修正內容:
    1、預設文字追加(橫、直):大門、雨遮、陽台外推。
    2、名稱修改,並放一起:圖庫元件1、圖庫元件2(原名為:元件圖庫)。
    3、拿掉 圖片庫,但裡面的指北圖,放到【圖庫元件2】中。
    4、增加 文字及基本圖形中的【全方位角度線條】。
    5、預設版面:紙張:預設【橫向】、【圖表格式設定】:改為隱藏!
    6、更新預設文字的字型為23、放大內建文字的預覽尺寸,以利觀看選擇。
    7、刪除一些不必要的元件如:鋼琴、印表機、筆記型電腦、落地燈、電視、植物、壁爐、梳妝台、影印機,預設文字裏的【傭人房】也取消。
    8、增加【存檔不出圖】、【存檔出圖】、【不存檔出圖】 按鈕 於右下角!!
    9、上線準備中。
    108/03/08 弧線,可以自行拉角度、增加預設文字:陽台外推、雨遮、陽台外推。
    108/03/06 更新預設文字的字型為23、放大內建文字的預覽尺寸,以利觀看選擇。
    108年02月
    108/02/26 愛屋新格局圖封測中。
    108/02/25 增加常用文字,直書、橫書:主臥室、臥室、廚房、客廳、餐廳、衛浴、陽台、書房、和室、玄關、陽台、車庫、洗衣間、游泳池、騎樓、廁所、地下室、傭人房、小孩房、工作間、遊戲間、儲藏室、佛堂、更衣間、健身房、花園、孝親房、電梯、浴室。
    108/02/23 星期六 愛屋新格局圖技術移轉至愛屋主機。
    108年01月
    108/01/20 V1.1 測試。
    108/01/25 V1.2增加 180度、90度弧線。
    107年11月
    107/11/01 V1.0 初版測試。
    107年01月
    緣起~ V1.0 因應舊版(Flash技術)即將走入歷史,且將不符合預期、需求,故進行新版開發。
  • 八、客服中心
    聯絡歡迎您使用我們的 LINE@客服@ehj0932q
    客服時間:週一至週五 9:30Am ~ 6:00Pm