[UWP]分享一个基于HSV色轮的调色板应用

原文:[UWP]分享一个基于HSV色轮的调色板应用

1. 前言

上一篇文章介绍了HSV色轮,这次分享一个基于HSV色轮的调色板应用,应用地址:ColorfulBox - Microsoft Store

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色轮。等了这么久终于等到了。

4. 参考

色论 _ 色彩配置 - Adobe Color CC

操作事件

5. 源码

Colorful-Box

原文地址:https://www.cnblogs.com/lonelyxmas/p/8353681.html

时间: 2024-11-03 20:50:25

[UWP]分享一个基于HSV色轮的调色板应用的相关文章

[UWP]使用Writeable?Bitmap创建HSV色轮

原文:[UWP]使用Writeable?Bitmap创建HSV色轮 1. HSV 1.1 HSV的定义 HSV都是一种将RGB色彩模型中的点在圆柱坐标系中的表示法,这种表示法试图做到比RGB基于笛卡尔坐标系的几何结构更加直观.HSV即色相.饱和度.明度(英语:Hue, Saturation, Value),又称HSB,其中B即英语:Brightness. 色相(H)是色彩的基本属性,就是平常所说的颜色名称,如红色.黄色等,取值0-360.红色是0,绿色是120,蓝色为240. 饱和度(S)是指色

福利到~分享一个基于jquery的智能提示控件intellSeach.js

一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户使用.说白了,就是用户边输入,系统会提示相关的结果:或者,当用户点击搜索框时,就推荐一些内容,如360.百度都会提示今天的主要新闻或搜索量大的内容. jquery 已经有一个这样的插件了,叫 autocomplete, 但我觉得不好用.关于autocomplete的介绍也很多,有兴趣的朋友可以去试试

分享一个基于HTML5实现的视频播放器

什么是hivideo? 最近一段时间在使用PhoneGap开发一个App应用,App需要播放视频,本想直接使用html5的video,但使用它在全屏播放时不支持横屏播放,只能放弃.最终决定还是自己封装一个播放器算了,免得以后要扩展功能麻烦. 最近迷上hi这个单词,所以我给这个播放器取名叫做:hivideo. hivideo是一款基于html5的视频播放器,摒弃video原有的播放控制条样式,自己重写了一次.支持暂停.播放进度控制.声音控制.全屏播放.如果是要在手机端使用hivideo,全屏播放时

分享一个基于ligerui的系统应用案例ligerRM V2(权限管理系统)(提供下载)

阅读目录 简介 系统特色 系统介绍 - 首页 系统介绍 - 列表页 系统介绍 - 明细页(表单) 系统介绍 - 菜单/按钮 系统介绍 - 权限中心 系统介绍 - 数据权限 系统介绍 - 字段权限 系统介绍 - 下拉框应用细节 结语 简介 ligerRM V2是基于 ligerui的web应用系统.以权限管理作为设计重点,引入Northwind作为主要的数据演示模块.权限方面,在上一个版本的基础上面加多了数据权限控制.后台方面采用dot net 3.5框架开发. 系统演示:http://case.

分享一个基于HTML5实现的视频播放器【转】

什么是hivideo? 最近一段时间在使用PhoneGap开发一个App应用,App需要播放视频,本想直接使用html5的video,但使用它在全屏播放时不支持横屏播放,只能放弃.最终决定还是自己封装一个播放器算了,免得以后要扩展功能麻烦. 最近迷上hi这个单词,所以我给这个播放器取名叫做:hivideo. hivideo是一款基于html5的视频播放器,摒弃video原有的播放控制条样式,自己重写了一次.支持暂停.播放进度控制.声音控制.全屏播放.如果是要在手机端使用hivideo,全屏播放时

分享一个基于小米 soar 的开源 sql 分析与优化的 WEB 图形化工具

soar-web 基于小米 soar 的开源 sql 分析与优化的 WEB 图形化工具,支持 soar 配置的添加.修改.复制,多配置切换,配置的导出.导入与导入功能. 环境需求 python3.xFlaskpymysql Python 环境未安装的可参考下面操作: Windows:step 1 去 python 官网下载安装 python3 (已安装可跳过此步骤)setp 2 pip install Flasksetp 3 pip install pymysql Mac:step 1 brew

分享一个基于Bootstrap的 ACE框架 入门(MVC+EF)

基于Bootstrap3,拥有强大的功能组件以及UI组件,基本能满足后台管理系统的需求, 而且能根据不同设备适配显示,而且还有四个主题可以切换. 简单入门,源代码下载:https://github.com/huangxiaoning/ACE.Demo

福利到~分享一个基于jquery的分页控件

前台分页控件有很多,以下是我的实现.默认情况下,点击页码会像博客园一样,在url后面加上"#p页码". 有2个参数需要注意: beforeRender: 在每个页码项呈现前会被调用,参数为页码的jQuery对象.这个时候我们可以在呈现前做一些处理,例如增加自己的属性等.默认情况下,点击页码,会在url后面加上“#p页码”,这样的url并不会刷新页面.如果我们需要刷新页面,例如url为,"default.aspx?index=页码",就可以在这个回调函数里处理. ca

分享一个分布式消息总线,基于.NET Socket Tcp的发布-订阅框架,附代码下载

一.分布式消息总线 在很多MIS项目之中都有这样的需求,需要一个及时.高效的的通知机制,即比如当使用者A完成了任务X,就需要立即告知使用者B任务X已经完成,在通常的情况下,开发人中都是在使用者B所使用的程序之中写数据库轮循代码,这样就会产品一个很严重的两个问题,第一个问题是延迟,轮循机制要定时执行,必须会引起延迟,第二个问题是数据库压力过大,当进行高频度的轮循会生产大量的数据库查询,并且如果有大量的使用者进行轮循,那数据库的压力就更大了. 那么在这个时间,就需要一套能支持发布-订阅模式的分布式消