1 / 13

Magic Fitting Room

Magic Fitting Room. XML term project. 資管三 B95705010 連奕婷 資管三 B95705048 林書漾. Out Line. Goal of the project Motivation Progress & Challenge What is SVG? Technical principle OutPut Reference. Goal of the project. Base on SVG 提供一個頁面，讓使用者上傳自己的照片和想要試穿的衣服照片，並讓使用者以滑鼠拖曳的方式來達到比對的試衣效果。.

neal
Download Presentation

Magic Fitting Room

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Magic Fitting Room XML term project 資管三 B95705010 連奕婷資管三 B95705048 林書漾

  2. Out Line • Goal of the project • Motivation • Progress & Challenge • What is SVG? • Technical principle • OutPut • Reference

  3. Goal of the project • Base on SVG • 提供一個頁面，讓使用者上傳自己的照片和想要試穿的衣服照片，並讓使用者以滑鼠拖曳的方式來達到比對的試衣效果。

  4. Motivation • 平常上網看網拍的衣服時，看到model穿起來總是很漂亮，但是沒有經過試衣比對，不清楚自己穿起衣服的效果，因此我們希望能做出此一個虛擬試衣間，提供使用者試衣服務。

  5. Progress & Challenge • 了解SVG的語法 • 研究拖曳圖形的寫法 • 怎麼讓使用者上傳的圖片 • 了解 javascript 的語法

  6. What is SVG? • Scalable Vector Graphics • 用於描述二維向量圖形的一種圖形格式。 SVG由W3C制定，是一個開放標準 • SVG 基於 XML 格式，易於Web發佈、傳輸、跨平台 • 圖像的文件可讀，易於修改和編輯 • SVG可以是靜態圖像，也可以作動態模擬

  7. What is SVG? (2) • sample

  8. What is SVG? (3) • SVG靜態圖形

  9. What is SVG? (4) • SVG動態模擬實例 http://www.croczilla.com/svg/samples/svgtetris/svgtetris.svg

  10. Technical principle • 放入許多圖形元件 • 每個圖形元件對應到一個JavaScript，使之能移動 • 設計控制大小的按鈕，控制model的大小 • 設計上傳功能

  11. Output • 我們建立一個現成的衣服圖庫，圖庫裡有日常的衣服也有平常較沒有機會穿的衣服，讓使用者可以看到試穿上圖庫裡的衣服的樣子。 • 使用者上傳照片後，可以調整照片的大小，以符合此顯示頁面大小以及衣服size。 • 就可以看到試穿後的結果啦^^ • http://www.im.ntu.edu.tw/~b95010/XML/project/Magic_Fitting_Room.xml

  12. Reference • http://www.croczilla.com/svg/samples • http://www.w3.org/TR/SVG/ • http://apike.ca/prog_svg_intro.html • http://www.w3schools.com/svg/default.asp • 書本：HTML/JavaScript 網頁設計程式

More Related