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

2022-01-11 03:36:05 字數 1988 閱讀 8125

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:

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色輪的調色盤應用 colorfulbox是adobe 色輪的簡單模仿,只實現了最基本的功能,ui也沒那麼好看,也沒用mvvm框架。這個應用最好玩的地方在於分布於hsv色輪上的各個點 colorpoint 以及可以通過拖動它們改變顏色。colorpoint的基本結構如下...

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

雖然codeplex已經有一些多檔案,帶進度條的上傳控制項,但是覺得都不是很好用,所以基於上面的控制項重新設計了乙個上傳控制項,更好的互動,屬性繫結和管理檔案。1.客戶端使用 mycontrol fileuploadcontrol x name uploader filter 文字檔案 txt re...

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

先來個效果圖 元件的實現是基於改變源資料的陣列位置,所以使用的話必須要對傳進去的源資料做一次深拷貝,操作完成後再傳排序後的陣列回去 事件是採用了drag系列事件,跟需求和使用者操作習慣比較吻合 圖示是element ui裡面的 過度效果是vue的transition group標籤實現的,這裡要注意...