麦步社区-论坛

标题: 指針式表盤座標產生方法(上) [打印本页]

作者: aix 时间: 2016-10-21 00:23
标题: 指針式表盤座標產生方法(上)
本帖最后由 aix 于 2016-10-21 00:23 编辑

大家好！本樓要講的是指針式表盤座標的產生的方法，指針式表盤之所以寫變化不多就因為指針是用程序畫出來的，而程序是根據源碼中寫的點來畫圖，這些點就是座標，程序會將點串起來，然後依程序的設定把內部填滿或留空，有點像小孩連連看的遊戲一樣。

看過官方開源的指針代碼就知道，指針就是由多維陣列(多维数组)定義出來的，以時針為例來說：如果只算整點的位置，12小時就有12個角度，而這個時針如果是一個三角形就表示要用3個座標來產生，而這12個角度都要定出這3個座標的位置，這些座標如果用土法煉鋼一個個畫…我只能說佩服，而且時針也不可能只有指向整點的角度，更不要說分針了(60個角度*3個座標)…，所以最好的方法就是利用在學校學過後來又還給老師的三角函數來算出來。

以我的經驗來說，產生座標的方法有兩種，第一種是用excel中的公式輔助產生源代碼並且可以模擬出指針的形狀，第二種是直接將公式寫入源代碼中，各有各的優點，第二種方法也能用第一種方法來輔助設計(以前模擬器不能跑指針式的表盤，都要傳到手表上看，相當麻煩…)，這次先來講第一種的使用方法。

先來說一下取得圓週上點座標的公式，指針一般都是圓週運動，當然可以做成半圓，但脫離不了圓這個方向，所以簡單來說我們要的就是取得圓週上各個角度的座標值，再來看一下數學公式：(只說明用法，原理請找你們的老師…)

圓週上的點x軸公式： r*cos R+x
圓週上的點y軸公式： r*sin R+y

說明：r就是圓的半徑，cos、sin就是三角函數中的餘弦函數和正弦函數， R是指弧度，x、y是指圓心的座標值，這樣應該很簡單吧？這樣就可以取得圓週上點的座標。

好了，公式有了，再來要利用excel幫我們快速產生源代碼，但要怎麼放到excel裡呢？這個當初我也研究很久，因為公式不能直接放進去啊？各位想做指針的開發者有褔了！以下就是我研究出來的excel公式^o^

x軸公式：=ROUND(半徑*COS(RADIANS(角度±偏移角度))+圓心x座標,0)
y軸公式：=ROUND(半徑*SIN(RADIANS(角度±偏移角度))+圓心y座標,0)

說明：ROUND()是用來四捨五入用的，因為公式會產生小數，最後那個0是指要保留幾位數的小數，所0就是指留到整數就好，半徑就是指圓心到圓週上的點的距離，比較特別的就是RADIANS()，這是因為COS()和SIN()不能接受輸入角度，所以要用RADIANS()將角度轉成弧度，±偏移角度這個等一下再來講。

好了，前面沒看懂就算了，接下來現成的工具會用就好，請先下載我寫好的excel檔做對照，這是以大字指針的座標來示範。

此處用時針來說明，官方的代碼中時針每一小時中有3個位置(整點、20分、40分)，12個小時就是36個位置，一個圓是360度(不要問我為什麼…)，360度除以36就是10度，所以指針移動一次是10度。

接下來看excel檔，A欄是時間，B欄是角度，原則是00:00的時候是-90度、00:20的時候是-80度、00:40是-70度…依此類推每-10度就是下一個時間的角度，再來把指針的圓心座標填在第8列，以這個例子來看圓心座標x=64、y=64 ，因為麥步的解析度是128*128，所以中心的座標x軸和y軸都是在64的位置。

第10列是半徑也就是前面講的圓心到圓週上的距離，11列的點順序就是每個點的順序，這裡為什麼第一個點半徑是-10呢？因為範例第一點的位置在圓心的反方向，也就是我希望時針的的屁股長一點(請參考我的大字指針http://bbs.maibu.cc/thread-932-1-1.html)。

那前面講的偏移現在來說明一下，偏移就是用來把點的位置由指針中心往兩旁偏離一些，這樣才做的出指針的形狀，如果沒加入偏移，不管幾個點畫出來的指針都是一條線，這裡有點難形容，如果看不懂就試著改一下偏移的數字，看一下右邊的圖表會實時顯示指針的形狀，是不是很方便？會用圖表的人也可將想要看的時間點加入圖表看看是否是你想要的結果。

這邊範列是用6個點畫出一根時針，6個點的指針大概就是只有時針和分針表盤的極限了，再多表盤就太肥了，還有如果你的指針形狀很複雜要注意點的順序，最後要型成一個封閉的形狀，另外如果你不用那麼多點，記得把最後一欄的"}},"往前移動，到取代掉最後一點後面的"},"，因為每一列的結束必需都是"}},"，最後的那一列(11:40)最後就不用在多一個","了，以"}}"結束就好。

最後把產生出來的程式碼複製、貼回你自己源代碼中正確的位置就好啦，不過這邊只講產生座標的方法，當然還有些小地方要跟著改，不會很難自己研究一下吧，分針的部份excel裡也都寫好了，使用方法就跟時針一樣，以上說起來很複雜，但光是自動產生源代碼就省事不少了，瞭解原理後就可以自己變化啦！

這種作法遇到複雜型指針或多個指針時記憶體就會被吃掉比較多，下次有時間再說明第二種方法，就是直接把公式寫進源代碼中，可減少一點記憶體的使用，像我大字指針實際上就是用第二種方法處理的，希望以上說明對指針表盤開發者有所幫助，感謝。

作者: 自由.. 时间: 2016-10-21 00:27
顶楼主！技术贴

作者: tda8361 时间: 2016-10-21 01:01
技术贴，赞！虽然看不懂

作者: 手残也要作 时间: 2016-10-21 01:18
先点个赞，就差这种技术贴

作者: rivenfox 时间: 2016-10-21 08:43
好复杂，先谢喽~~~

作者: 1076964977 时间: 2016-10-21 08:47
水月梦的那几个表盘可以看这个技术贴修改了

作者: 1076964977 时间: 2016-10-21 08:51
我有个不理解的地方就是笨办法用一堆数组定义了指针位置的表盘，尺寸比用三角函数现算出来的表盘还要小。不理解

作者: 大王1989 时间: 2016-10-21 09:15
其实很缺少楼主这种技术贴

作者: aix 时间: 2016-10-21 10:18

1076964977 发表于 2016-10-21 08:51
我有个不理解的地方就是笨办法用一堆数组定义了指针位置的表盘，尺寸比用三角函数现算出来的表盘还要小。 ...

笨方法和自動產生做出指針的點的數量如果一樣多，那就沒有差別，這只是幫忙產生源代碼而已

作者: 王zz1 时间: 2016-10-21 12:37
可以可以

作者: 水月梦 时间: 2016-10-21 14:57
；

太强了，我非常需要这种贴，非常感谢楼主

作者: niuniumm 时间: 2016-10-21 18:55
其实很缺少楼主这种技术贴

作者: moonwind 时间: 2016-10-22 06:32
技术贴，就是纯文字的，现在很难靠耐心读完

作者: cw2549 时间: 2016-10-22 08:33
本帖最后由 cw2549 于 2016-10-22 08:34 编辑

其实官方可以一天发一篇这样的技术帖，培养更多的“人才”，来丰富表盘和app @不贰小话说版主这个id是啥含意呢？

作者: 大王1989 时间: 2016-10-22 17:15
支持教程

作者: bigKevin 时间: 2016-10-23 07:56
技术强贴，期待下部(❁´◡`❁)*✲ﾟ*

作者: yuanquan72 时间: 2016-10-28 16:56
不错的，必须支持~~~

作者: momentmoon 时间: 2016-12-18 20:13
支持你的！

作者: 跆拳风 时间: 2016-12-18 20:28
技术贴，不懂

作者: 哇1哈哈哈 时间: 2016-12-18 21:01
看不懂都可厉害

作者: qs100371 时间: 2017-4-24 07:55
最近没事做了个指针表盘，对此深有感触，本来表针的位置、形状都是可以用函数计算和绘制出来的，只是由于手表的浮点数计算相当糟，才只能用生成现成的位标，再把坐标连成指针的形状的方法显示出表针。

其实这些坐标可以用模拟器计算出来，只是必须用maibu_print_log输出，再复制出来就可以用了。模拟器是可以进行浮点运算的，手表不行。

作者: reerayxia 时间: 2017-4-24 08:42
俺工具已经实现。。。。

作者: 细川玉木 时间: 2017-4-25 00:51
初中数学都忘了的路过

欢迎光临麦步社区-论坛 (http://bbs.maibu.cc/)