女神節 | 程式設計師如何低調而又不失逼格
阿新 • • 發佈:2020-03-08
![](https://img2020.cnblogs.com/other/467322/202003/467322-20200308164031823-1337375403.png)
今天。。。是一個非常重要的日子-女神節。作為一名程式設計師,如何向心儀的人低調而又不失逼格的表達祝福,關係到我們後半生的幸福,祝福的到位,普通朋友加個字變成女朋友,女朋友變成老婆,如果已經是老婆了,那麼這個月的零花錢又能多好幾百,想想都激動。
![](https://img2020.cnblogs.com/other/467322/202003/467322-20200308164035694-2073628025.gif)
回到現實,作為程式設計師,我們當然要獨一無二,要與眾不同,要突破天際,要能體現我們的身份,逼格滿滿,因此我們要給女神開發一個天上地下、唯吾獨尊的App絕對是你不二的選擇。
廢話不多說,No 圖 No 說話:
![](https://img2020.cnblogs.com/other/467322/202003/467322-20200308164038796-1791572579.gif)
先來分析一波:
首先上面的效果是一直在繪製路徑,當繪製完花和葉子時在對其著色,因此這裡比較難是如何獲取路徑的點座標,只要有點的座標了一個個的畫出來也就實現了上面的效果。
那麼現在的重點就是如何獲取點座標,一種方法是人工一個一個的寫,然後調整,這種方法工作量太大了,作為程式設計師怎麼能用這種方法呢?怎麼才可以讓程式生成這些座標呢?
想想我們在監聽手勢(滑鼠)時是不是可以獲取到當前點的座標,移動的時候也可以獲取到一個移動的路徑座標,因此我們只需要在螢幕上先載入想要的圖片,然後按照圖片上的路徑移動,是不是就可以獲取到我們想要的路徑了啊。
對於任何語言來說都可以按照上面的思路來實現,下面以目前非常火熱的Flutter來實現這個功能。
好,首先來載入一張圖片,然後監聽其手勢(滑鼠)移動事件,程式碼如下:
```dart
Container(
width: 400,
height: 700,
child: GestureDetector(
onLongPressStart: (LongPressStartDetails details) {
print('${details.localPosition},');
},
onLongPressMoveUpdate: (LongPressMoveUpdateDetails details) {
print('${details.localPosition},');
},
onLongPressEnd: (LongPressEndDetails details) {
print('${details.localPosition},');
},
child: Image.asset(
'images/123.png',
fit: BoxFit.fill,
),
),
)
```
這裡要注意2點:
- 圖片顯示的大小最好和最終的畫布一樣大小,這樣得到的座標不需要在轉換。
- 圖片的寬高比和畫布的寬高比要一樣。
我們把路徑輸出到控制檯,後臺只需將這些座標拷貝到應用程式即可,將這些座標定義為陣列,如下:
```dart
static final List