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

Posted lonelyxmas

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[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



以上是关于[UWP]分享一个基于HSV色轮的调色板应用的主要内容,如果未能解决你的问题,请参考以下文章

有没有一种编码方法来检查调色板是不是遵循类似、单色、三色等色轮的配色方案?

openCV的HSV色轮图像?

matlab绘制hsv色轮图

matlab绘制hsv色轮图

基于Prism.Windows的UWP开发备忘

UWP开发之Mvvmlight实践九:基于MVVM的项目架构分享