Flutter中關於angle的踩坑記錄

Posted on by

這個問題是我最近做業務開發和業餘開發都遇到的，這裡的 angle 指的是旋轉弧度。不是旋轉角度。

先看一下我使用 angle 的場景吧：

圖一中使用瞭 canvas.drawArc，傳入瞭 startAngle 和 sweepAngle。圖二也是如此。圖三是 Flutter ConstraintLayout 中圓形定位的 example，我沒有使用 Flutter ConstraintLayout 自帶的旋轉能力，而是用瞭 Transform.rotate，傳入瞭 angle。Flutter ConstraintLayout 自帶的對 Widget 的旋轉能力用瞭 canvas.rotate，也傳入瞭 angle。

我現在還沒搞明白弧度和角度的對應關系，官網文檔中也沒有詳細說明。但對於我來說，我根本就不想去關心弧度是多少，我隻關心角度，這個角度的范圍是 [0.0, 360.0]。以圖三中的時鐘為例，旋轉 0.0 或 360.0 度時，指針應該指向 12，旋轉 90.0 度時，指針應該指向 3，旋轉 180.0 度時，指針應該指向 6，旋轉 270.0 度時，指針應該指向 9。

於是我們需要將旋轉弧度轉換成旋轉角度，我研究出的轉換公式如下：

Transform.rotate：

pi + pi * (angle / 180)

canvas.rotate：

angle * pi / 180

canvas.drawArc：

startAngle = -pi / 2
sweepAngle = angle * pi / 180

看見沒有，這三類旋轉的轉換公式都不一樣。我不明白 Flutter 官方為什麼要這麼設計，為啥這麼優秀的 Flutter 引入瞭這麼糟糕的 API。於是我帶著氣憤給官方提瞭個 Issue，想噴一噴設計這幾個 API 的哥們：

結果我被反殺瞭。

冷靜下來之後，我決定提交一個 Pull Request 來修正這個 API。但這需要時間，因為提交 Pull Request 的周期很長，上次我提瞭個 bug，Oppo 的一個哥們修復瞭它，Pull Request 等瞭將近兩個月才合並。

總結

到此這篇關於Flutter中關於angle踩坑的文章就介紹到這瞭,更多相關Flutter中angle坑內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：