---
# System prepended metadata

title: 沙遊 Website

---

# 沙遊 Website

![](https://i.imgur.com/N93L7tm.png)
![](https://i.imgur.com/I0GERUl.png)

1. 側邊欄(Sidebar)依據插圖分大類
    - ex: 人物、大自然、動物、交通工具...等
2. 點開某類按鈕展開所有該類插圖
    - 點擊圖片即可在 Canvas 中央新增物件
3. 編輯物件
    - 放大縮小、旋轉、翻轉


- [框線稿](https://www.figma.com/proto/JNDi4gFYLK8gSACKtBqUoM/%E6%B2%99%E9%81%8A%EF%BD%9Csandtray?node-id=1%3A16&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=1%3A16)

## 開發相關套件
- [fabric.js](https://github.com/fabricjs/fabric.js)


## 問題
1. 需要有沙盤背景圖
2. 公司視覺設計(主題顏色)
3. 插圖最好使用 SVG 格式
4. 需要定義好插圖種類(大項)與子分類
5. 是否建立會員系統
6. 是否有雲端伺服器、域名
7. 系統名稱


## Reference
- [3D sandtray therapy on an interactive tabletop](https://dl.acm.org/doi/abs/10.1145/1753326.1753651?casa_token=3krrAa5kh68AAAAA:mDQhZ-qOxP1PxM0jyNJEXMMUIuXvXnSkxIHcTQWue7JgWlTd8UZ5Jc9tNgINlSBq8iQpPNR_-NCtsnc)
- [onlinesandtray](https://onlinesandtray.com/)
- [Virtual Sandtray App](https://jessicastonephd.com/virtual-sandtray-app/)