
這個應用最好玩的地方在于分布于HSV色輪上的各個點(ColorPoint)以及可以通過拖動它們改變顔色。ColorPoint的基本結構如下(不是完整代碼):
由于Color是一個struct,UWP沒辦法監視struct的值改變事件,是以才使用ColorPoint來包裝Color及其它功能。
色輪本身是一個ListView,這樣比直接繼承Control少寫很多代碼,尤其是SelectedItem相關的代碼還挺無趣的。雖然色輪從外表看不出是個ListView,改改ControlTemplate,再配合<code>GetContainerForItemOverride()</code>和<code>PrepareContainerForItemOverride(DependencyObject element, object item)</code>兩個函數,可以讓ListView完全改頭換面。熟悉XAML的開發者應該都不會對這兩個ItemsControl中的關鍵函數感到陌生。
在UWP中拖動的代碼變得很簡潔,這次直接在<code>PrepareContainerForItemOverride(DependencyObject element, object item)</code>為ColorPointVisual訂閱拖動的事件。至于ColorPointVisual的布局,隻需要轉換Color為HsvColor,再計算距離中心點的角度(Hue)和距離(Saturation)就可以得出,為了不和ListView的代碼耦合,盡量使用Binding:
Hsv色輪是整個應用中最有趣的部分,之後隻需要按部就班添加各種色彩規則(目前隻有Analogous,即類比)和輸出的顔色模型。由于開源這個應用的目的是作為一個用于學習的應用,不想添加太多功能讓這個項目的代碼變得複雜。
Hsv色輪中各個ColorPoint拖動并不是太平滑,這是因為Hsv顔色隻能表示360 * 100 = 36000 種顔色,而Hsv色輪上有πr^2 個像素點,它們之間做不到完全比對。雖然已經想到解決方案,不過暫時沒太大興緻解決。
前面提到ColorfulBox是一個用于學習的應用,不會有太多複雜的技術,暫時連MVVM都不會有。将來添加功能也會很謹慎(主要看心情),希望代碼不會膨脹得太誇張吧。
<a href="https://color.adobe.com/">色論 _ 色彩配置 - Adobe Color CC</a>
<a href="https://docs.microsoft.com/zh-cn/windows/uwp/input-and-devices/touch-interactions#manipulation-events">操作事件</a>
<a href="https://github.com/DinoChan/Colorful-Box">Colorful-Box</a>