---
# System prepended metadata

title: Software Studio 2022 Spring

---

# Software Studio 2022 Spring
## Assignment 01 Web Canvas


### Scoring

| **Basic components**                             | **Score** | **Check** |
| :----------------------------------------------- | :-------: | :-------: |
| Basic control tools                              | 30%       | Y         |
| Text input                                       | 10%       | Y         |
| Cursor icon                                      | 10%       | Y         |
| Refresh button                                   | 5%       | Y         |

| **Advanced tools**                               | **Score** | **Check** |
| :----------------------------------------------- | :-------: | :-------: |
| Different brush shapes                           | 15%       | Y         |
| Un/Re-do button                                  | 10%       | Y         |
| Image tool                                       | 5%        | Y         |
| Download                                         | 5%        | Y         |

| **Other useful widgets**                         | **Score** | **Check** |
| :----------------------------------------------- | :-------: | :-------: |
| Name of widgets                                  | 1~5%     | N         |


---

### How to use 
![](https://i.imgur.com/clsKhTy.png)
這些是我設計的基本功能，藍色button依序為畫筆、橡皮擦、文字輸入、矩形、圓形、直線、清空畫布、實心圖案。接著的黃色button是改變畫筆的頭，依序為round、button、square。其中，當滑鼠移到該button時，我用了:hover做變色，讓使用者能更容易辨識自己現在所選的是什麼功能。

![](https://i.imgur.com/ZkeRgAl.png)
位於Toolbar下方的顏色選擇。

![](https://i.imgur.com/1uZGut1.png)
在顏色選擇下的下一步、上一步功能鍵。

![](https://i.imgur.com/unCx0ay.png)
接著的便是依序為字體選擇的select type、畫筆粗細調整的range type ( 字體的大小也是由此range type調整 ! )、選擇匯入檔案的file type。

![](https://i.imgur.com/O3vqX0i.png)
最後就是位於右側的儲存檔案button。

### Function description

## ***1.Fill***
![](https://i.imgur.com/5Wj9yIv.png)
我先設了一個global var solid去記，如果點到fill這個button就negation這個var。另外，也會根據solid布林值的不同顯示不同的cursor圖案。
![](https://i.imgur.com/5Ce3m1m.png)
接著，在矩形、三角形、圓形要draw的function中判斷solid，根據他的值去做fill()或stroke()。

## ***2.Linecap***
![](https://i.imgur.com/UsAn7DA.png)
利用三個function做出不同的筆頭。




### Gitlab page link

Firebase link:
https://software-studio-7fd57.firebaseapp.com/

### Others (Optional)
助教辛苦了! 但Lab6是真滴難.....

<style>
table th{
    width: 100%;
}
</style>