---
# System prepended metadata

title: 監視器前台操作規格書

---

# 監視器前台操作規格書

## *需求:希望形狀重頭到尾都用同一個，每按下0,1,2的按鈕都會是新的坐標跟圖形

### A1.按下第0顆按鈕後，圖片坐標跟線框變更，並出現最新坐標

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

### A2.按下第0顆按鈕後，圖片坐標跟線框變更，並出現目前坐標提示
![](https://i.imgur.com/b4wL7RO.png)



### B1.按下第1顆按鈕後，圖片坐標跟線框變更，不延續按鈕0原本的形狀，並出現最新坐標
![](https://i.imgur.com/aLhJjOc.png)

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

### C1.按下第2顆按鈕後，圖片坐標跟線框變更，不延續按鈕0原本的形狀，並出現最新坐標
![](https://i.imgur.com/5SrYQwo.png)


### D1.圖形可以旋轉
![](https://i.imgur.com/uEocLQl.png)

### E1.問題癥結點 (已解決)
解答:1.points應該是個物件陣列的角色，numberOfItems是要取得points陣列內有多少個point，也就是座標。
解答:2.svgRoot.position看起來是取得html檔案內的id=svg這個標籤在畫面上的座標
解答:3.window.getComputedStyle 是BOM的語法，目的是要取得某個html標籤的CSS，在你的程式裡面是為了取得第49行動態建立的div標籤的預設css，然後再去修改他的css樣式（看起來是要改變他的top和left位置）

![](https://i.imgur.com/y21Vh8W.png)
1.這個for迴圈這樣寫，我要產生新坐標製造新圖形，只能再copy這個function改名來用，但主管不希望這樣，太複雜。
2.當我要把draggable()方法分離出來，產生新坐標，無法切割。


檔案位置
https://github.com/docats/arrow.git
1.檔名:rect.html
2.檔名:rect.js


規格說明:
(1)瀏覽器最低需求: IE11 (chrome禁用)
(2)外掛可使用，但不能超過1MB
(3)採用JavaScript或Jquery寫皆可
