[UWP]分享一个基于HSV色轮的调色板应用
2017-09-20 21:51
323 查看
1. 前言
上一篇文章介绍了HSV色轮,这次分享一个基于HSV色轮的调色板应用,应用地址:ColorfulBox - Microsoft Store![](https://images2017.cnblogs.com/blog/38937/201709/38937-20170920155835915-525967252.png)
2. 功能
ColorfulBox是Adobe 色轮的简单模仿,只实现了最基本的功能,UI也没那么好看,也没用MVVM框架。2.1 HSV色轮
这个应用最好玩的地方在于分布于HSV色轮上的各个点(ColorPoint)以及可以通过拖动它们改变颜色。ColorPoint的基本结构如下(不是完整代码):public class ColorPoint : DependencyObject, INotifyPropertyChanged { public event EventHandler<PropertyEventArgs> ColorChanged; public event PropertyChangedEventHandler PropertyChanged; protected virtual void OnColorChanged(Color oldValue, Color newValue) { ColorChanged?.Invoke(this, new PropertyEventArgs(nameof(Color), oldValue, newValue)); } private Color _color; /// <summary> /// 获取或设置 Color 的值 /// </summary> public Color Color { get { return _color; } set { if (_color == value) return; var oldValue = _color; _color = value; OnPropertyChanged("Color"); ColorChanged?.Invoke(this, new PropertyEventArgs(nameof(Color), oldValue, _color)); } } }
由于Color是一个struct,UWP没办法监视struct的值改变事件,所以才使用ColorPoint来包装Color及其它功能。
色轮本身是一个ListView,这样比直接继承Control少写很多代码,尤其是SelectedItem相关的代码还挺无趣的。虽然色轮从外表看不出是个ListView,改改ControlTemplate,再配合
GetContainerForItemOverride()和
PrepareContainerForItemOverride(DependencyObject element, object item)两个函数,可以让ListView完全改头换面。熟悉XAML的开发者应该都不会对这两个ItemsControl中的关键函数感到陌生。
<Style TargetType="local:HsvWheelColorPalette"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="local:HsvWheelColorPalette"> <Grid Background="{TemplateBinding Background}"> <Image Source="ms-appx:///Assets/Wheel.png" /> <ItemsPresenter /> </Grid> </ControlTemplate> </Setter.Value> </Setter> <Setter Property="ItemContainerStyle" Value="{StaticResource HsvWheelColorPointVisualStyle}" /> <Setter Property="ItemsPanel"> <Setter.Value> <ItemsPanelTemplate> <Grid /> </ItemsPanelTemplate> </Setter.Value> </Setter> </Style>
protected override DependencyObject GetContainerForItemOverride() { return new ColorPointVisual(); } protected override void PrepareContainerForItemOverride(DependencyObject element, object item) { base.PrepareContainerForItemOverride(element, item); if (element is ColorPointVisual visual) { visual.ManipulationStarted -= OnColorPointVisualDragStarted; visual.ManipulationStarted += OnColorPointVisualDragStarted; visual.ManipulationDelta -= OnColorPointVisualDragDelta; visual.ManipulationDelta += OnColorPointVisualDragDelta; } 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:
<TransformGroup> <TranslateTransform X="{Binding TranslateX, Source={StaticResource SaturationAndRadiusToTransformXBridge}}" /> <RotateTransform Angle="{Binding Color, Converter={StaticResource ColorToAngleConverter}}" /> </TransformGroup>
2.2 后续功能
Hsv色轮是整个应用中最有趣的部分,之后只需要按部就班添加各种色彩规则(目前只有Analogous,即类比)和输出的颜色模型。由于开源这个应用的目的是作为一个用于学习的应用,不想添加太多功能让这个项目的代码变得复杂。2.3 已知的问题
Hsv色轮中各个ColorPoint拖动并不是太平滑,这是因为Hsv颜色只能表示360 * 100 = 36000 种颜色,而Hsv色轮上有πr^2 个像素点,它们之间做不到完全匹配。虽然已经想到解决方案,不过暂时没太大兴致解决。3. 结语
前面提到ColorfulBox是一个用于学习的应用,不会有太多复杂的技术,暂时连MVVM都不会有。将来添加功能也会很谨慎(主要看心情),希望代码不会膨胀得太夸张吧。题外话,UWP一直缺少一个ColorPicker控件,而微软将在Fall Update (1709)中提供新的控件ColorPicker,同样基于HSV色轮。等了这么久终于等到了。
![](https://images2017.cnblogs.com/blog/38937/201709/38937-20170920155845118-1044261830.png)
4. 参考
色论 _ 色彩配置 - Adobe Color CC操作事件
5. 源码
Colorful-Box相关文章推荐
- [UWP]分享一个基于HSV色轮的调色板应用
- 分享一个基于java ArrayList的简单MQ队列,用在连接多个蓝牙设备一个一个连接的应用中
- 分享一个基于ligerui的系统应用案例ligerRM V2(权限管理系统)(提供下载)
- 分享一个基于ligerui的系统应用案例ligerRM V2(权限管理系统)
- 分享一个基于ligerui的系统应用案例ligerRM V2(权限管理系统)(提供下载)
- 分享一个基于ligerui的系统应用案例ligerRM V2(权限管理系统)(提供下载)
- 分享一个基于ligerui的系统应用案例ligerRM V2(权限管理系统)(提供下载)
- 价值100W的经验分享: 基于JSPatch的iOS应用线上Bug的即时修复方案,附源码.
- 使用jQuery mobile开发一个基于手机的在线餐馆订餐查询应用
- jphone项目设计介绍(一个基于C++的应用程序框架以及软电话和日志服务器应用)
- 分享一个打字效果的插件 基于zepto
- 自己写的一个记录简历投递状态的小应用,可以分享校招信息哦~
- 分享一个基于 appium 的 UI 自动化测试,想知道大家的 UI 自动化都是怎么做的
- 使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用
- 分享一个超棒的基于jQuery的所见即所得(WYSIWYG)编辑器 - Redactor
- 分享一个基于事件时间线的Javascript类库-Chronoline
- 分享一个CQRS/ES架构中基于写文件的EventStore的设计思路
- 【深入浅出Node.js系列八】一个基于Node.js完整的Web应用实战
- 分享一个典型的应用部署架构图
- 分享一个应用