UWP 分享乙個基於HSV色輪的調色盤應用

原文:

[uwp]分享乙個基於hsv色輪的調色盤應用

colorfulbox是adobe 色輪的簡單模仿，只實現了最基本的功能，ui也沒那麼好看，也沒用mvvm框架。

這個應用最好玩的地方在於分布於hsv色輪上的各個點(colorpoint)以及可以通過拖動它們改變顏色。colorpoint的基本結構如下（不是完整**）：

public
class colorpoint : dependencyobject, inotifypropertychanged
private color _color;
/// 
/// 獲取或設定 color 的值
/// 
public color color
set}
}

由於color是乙個struct，uwp沒辦法監視struct的值改變事件，所以才使用colorpoint來包裝color及其它功能。

色輪本身是乙個listview，這樣比直接繼承control少寫很多**，尤其是selecteditem相關的**還挺無趣的。雖然色輪從外表看不出是個listview，改改controltemplate，再配合getcontainerforitemoverride()和preparecontainerforitemoverride(dependencyobject element, object item)兩個函式，可以讓listview完全改頭換面。熟悉xaml的開發者應該都不會對這兩個itemscontrol中的關鍵函式感到陌生。

protected
override dependencyobject getcontainerforitemoverride()
protected
override
void
preparecontainerforitemoverride(dependencyobject element, object item)
var colorpoint = item as colorpoint;
colorpoint.colorchanged -= oncolorchanged;
colorpoint.colorchanged += oncolorchanged;
}

在uwp中拖動的**變得很簡潔，這次直接在preparecontainerforitemoverride(dependencyobject element, object item)為colorpointvisual訂閱拖動的事件。至於colorpointvisual的布局，只需要轉換color為hsvcolor，再計算距離中心點的角度（hue）和距離（saturation）就可以得出，為了不和listview的**耦合，盡量使用binding:

x="}"
/>
angle=
"}"/>

hsv色輪是整個應用中最有趣的部分，之後只需要按部就班新增各種色彩規則(目前只有analogous，即模擬)和輸出的顏色模型。由於開源這個應用的目的是作為乙個用於學習的應用，不想新增太多功能讓這個專案的**變得複雜。

hsv色輪中各個colorpoint拖動並不是太平滑，這是因為hsv顏色只能表示360 * 100 = 36000 種顏色，而hsv色輪上有πr^2 個畫素點，它們之間做不到完全匹配。雖然已經想到解決方案，不過暫時沒太大興致解決。

前面提到colorfulbox是乙個用於學習的應用，不會有太多複雜的技術，暫時連mvvm都不會有。將來新增功能也會很謹慎(主要看心情)，希望**不會膨脹得太誇張吧。

題外話，uwp一直缺少乙個colorpicker控制項，而微軟將在fall update (1709)中提供新的控制項colorpicker，同樣基於hsv色輪。等了這麼久終於等到了。

色論 _ 色彩配置 - adobe color cc

操作事件

colorful-box

UWP 分享乙個基於HSV色輪的調色盤應用

UWP 分享乙個基於HSV色輪的調色盤應用

分享基於silverlight的乙個大檔案上傳控制項

分享乙個基於vue2 0 的拖動排序元件

UWP 分享乙個基於HSV色輪的調色盤應用

UWP 分享乙個基於HSV色輪的調色盤應用

分享基於silverlight的乙個大檔案上傳控制項

分享乙個基於vue2 0 的拖動排序元件

相關推薦