chizui/SpineViewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加ColorPicker使用

Browse Source
This commit is contained in:
ww-rm
2025-10-03 09:19:02 +08:00
parent b448ca8cb0
commit 965d1c469e
13 changed files with 208 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
SpineViewer/Utils/BackgroundColorToForegroundColor.cs Normal file
View File

@@ -0,0 +1,35 @@
using System;
using System.Globalization;
using System.Windows.Data;
using System.Windows.Media;
namespace SpineViewer.Utils
{
public class BackgroundToForegroundConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var color = Colors.White;
if (value is SolidColorBrush brush)
{
color = brush.Color;
}
else if (value is Color c)
{
color = c;
}
if (color.A < 128)
return Brushes.Black;
// 计算亮度 (使用标准加权公式)
double brightness = (0.299 * color.R + 0.587 * color.G + 0.114 * color.B) / 255.0;
return brightness < 0.5 ? Brushes.White : Brushes.Black;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
}

5
SpineViewer/ViewModels/Exporters/FFmpegVideoExporterViewModel.cs
View File

@@ -25,8 +25,8 @@ namespace SpineViewer.ViewModels.Exporters
get => _format;
set
{
if (SetProperty(ref _format, value))
{
if (!SetProperty(ref _format, value))
return;
OnPropertyChanged(nameof(EnableParamLoop));
OnPropertyChanged(nameof(EnableParamQuality));
OnPropertyChanged(nameof(EnableParamLossless));
@@ -35,7 +35,6 @@ namespace SpineViewer.ViewModels.Exporters
OnPropertyChanged(nameof(EnableParamProfile));
}
}
}
protected FFmpegVideoExporter.VideoFormat _format = FFmpegVideoExporter.VideoFormat.Mp4;
public bool Loop { get => _loop; set => SetProperty(ref _loop, value); }

18
SpineViewer/ViewModels/MainWindow/SFMLRendererViewModel.cs
View File

@@ -47,11 +47,6 @@ namespace SpineViewer.ViewModels.MainWindow
/// </summary>
private readonly SFML.Graphics.VertexArray _selectedBackgroundVertices = new(SFML.Graphics.PrimitiveType.Quads, 4); // XXX: 暂时未使用 Dispose 释放
/// <summary>
/// 预览画面坐标轴颜色
/// </summary>
private static readonly SFML.Graphics.Color _axisColor = new(220, 220, 220);
/// <summary>
/// 坐标轴顶点缓冲区
/// </summary>
@@ -178,10 +173,21 @@ namespace SpineViewer.ViewModels.MainWindow
public Color BackgroundColor
{
get => Color.FromRgb(_backgroundColor.R, _backgroundColor.G, _backgroundColor.B);
set => SetProperty(BackgroundColor, value, v => _backgroundColor = new(value.R, value.G, value.B));
set
{
if (!SetProperty(BackgroundColor, value, v => _backgroundColor = new(value.R, value.G, value.B)))
return;
var b = (0.299 * value.R + 0.587 * value.G + 0.114 * value.B) / 255.0;
_axisColor = b < 0.5 ? SFML.Graphics.Color.White : SFML.Graphics.Color.Black;
}
}
private SFML.Graphics.Color _backgroundColor = new(105, 105, 105);
/// <summary>
/// 预览画面坐标轴颜色
/// </summary>
private SFML.Graphics.Color _axisColor = SFML.Graphics.Color.White;
public string BackgroundImagePath
{
get => _backgroundImagePath;

16
SpineViewer/Views/ExporterDialogs/CustomFFmpegExporterDialog.xaml
View File

@@ -5,6 +5,7 @@
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:hc="https://handyorg.github.io/handycontrol"
xmlns:local="clr-namespace:SpineViewer.Views.ExporterDialogs"
xmlns:utils="clr-namespace:SpineViewer.Utils"
xmlns:exporters="clr-namespace:SpineViewer.ViewModels.Exporters"
d:DataContext="{d:DesignInstance Type=exporters:CustomFFmpegExporterViewModel}"
mc:Ignorable="d"
@@ -13,6 +14,9 @@
Height="800"
ShowInTaskbar="False"
WindowStartupLocation="CenterOwner">
<Window.Resources>
<utils:BackgroundToForegroundConverter x:Key="Bg2FgCvter"/>
</Window.Resources>
<DockPanel>
<Border DockPanel.Dock="Bottom">
<WrapPanel HorizontalAlignment="Center">
@@ -105,12 +109,20 @@
</Grid.ColumnDefinitions>
<Label Content="{DynamicResource Str_BackgroundColor}" ToolTip="#AARRGGBB"/>
<DockPanel Grid.Column="1">
<Button DockPanel.Dock="Right" Content="..." Click="ButtonPickColor_Click">
<Border DockPanel.Dock="Right">
<Popup x:Name="_colorPopup" Placement="Right">
<hc:ColorPicker Confirmed="ColorPicker_Confirmed" Canceled="ColorPicker_Canceled"/>
</Popup>
</Border>
<Button DockPanel.Dock="Right"
Content="..."
Foreground="{Binding BackgroundColor, Converter={StaticResource Bg2FgCvter}}"
Click="ButtonPickColor_Click">
<Button.Background>
<SolidColorBrush Color="{Binding BackgroundColor}"/>
</Button.Background>
</Button>
<TextBox x:Name="_colorTextBox" Text="{Binding BackgroundColor}" ToolTip="#AARRGGBB"/>
<TextBox Text="{Binding BackgroundColor}" ToolTip="#AARRGGBB"/>
</DockPanel>
</Grid>

13
SpineViewer/Views/ExporterDialogs/CustomFFmpegExporterDialog.xaml.cs
View File

@@ -44,7 +44,20 @@ namespace SpineViewer.Views.ExporterDialogs
private void ButtonPickColor_Click(object sender, RoutedEventArgs e)
{
_colorPopup.IsOpen = !_colorPopup.IsOpen;
}
private void ColorPicker_Confirmed(object sender, HandyControl.Data.FunctionEventArgs<Color> e)
{
_colorPopup.IsOpen = false;
var color = e.Info;
var vm = (BaseExporterViewModel)DataContext;
vm.BackgroundColor = color;
}
private void ColorPicker_Canceled(object sender, EventArgs e)
{
_colorPopup.IsOpen = false;
}
}
}

16
SpineViewer/Views/ExporterDialogs/FFmpegVideoExporterDialog.xaml
View File

@@ -5,6 +5,7 @@
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:hc="https://handyorg.github.io/handycontrol"
xmlns:local="clr-namespace:SpineViewer.Views.ExporterDialogs"
xmlns:utils="clr-namespace:SpineViewer.Utils"
xmlns:vmexp="clr-namespace:SpineViewer.ViewModels.Exporters"
d:DataContext="{d:DesignInstance Type=vmexp:FFmpegVideoExporterViewModel}"
mc:Ignorable="d"
@@ -13,6 +14,9 @@
Height="750"
ShowInTaskbar="False"
WindowStartupLocation="CenterOwner">
<Window.Resources>
<utils:BackgroundToForegroundConverter x:Key="Bg2FgCvter"/>
</Window.Resources>
<DockPanel>
<Border DockPanel.Dock="Bottom">
<WrapPanel HorizontalAlignment="Center">
@@ -105,12 +109,20 @@
</Grid.ColumnDefinitions>
<Label Content="{DynamicResource Str_BackgroundColor}" ToolTip="#AARRGGBB"/>
<DockPanel Grid.Column="1">
<Button DockPanel.Dock="Right" Content="..." Click="ButtonPickColor_Click">
<Border DockPanel.Dock="Right">
<Popup x:Name="_colorPopup" Placement="Right">
<hc:ColorPicker Confirmed="ColorPicker_Confirmed" Canceled="ColorPicker_Canceled"/>
</Popup>
</Border>
<Button DockPanel.Dock="Right"
Content="..."
Foreground="{Binding BackgroundColor, Converter={StaticResource Bg2FgCvter}}"
Click="ButtonPickColor_Click">
<Button.Background>
<SolidColorBrush Color="{Binding BackgroundColor}"/>
</Button.Background>
</Button>
<TextBox x:Name="_colorTextBox" Text="{Binding BackgroundColor}" ToolTip="#AARRGGBB"/>
<TextBox Text="{Binding BackgroundColor}" ToolTip="#AARRGGBB"/>
</DockPanel>
</Grid>

13
SpineViewer/Views/ExporterDialogs/FFmpegVideoExporterDialog.xaml.cs
View File

@@ -44,7 +44,20 @@ namespace SpineViewer.Views.ExporterDialogs
private void ButtonPickColor_Click(object sender, RoutedEventArgs e)
{
_colorPopup.IsOpen = !_colorPopup.IsOpen;
}
private void ColorPicker_Confirmed(object sender, HandyControl.Data.FunctionEventArgs<Color> e)
{
_colorPopup.IsOpen = false;
var color = e.Info;
var vm = (BaseExporterViewModel)DataContext;
vm.BackgroundColor = color;
}
private void ColorPicker_Canceled(object sender, EventArgs e)
{
_colorPopup.IsOpen = false;
}
}
}

16
SpineViewer/Views/ExporterDialogs/FrameExporterDialog.xaml
View File

@@ -5,6 +5,7 @@
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:hc="https://handyorg.github.io/handycontrol"
xmlns:local="clr-namespace:SpineViewer.Views"
xmlns:utils="clr-namespace:SpineViewer.Utils"
xmlns:vmexp="clr-namespace:SpineViewer.ViewModels.Exporters"
d:DataContext="{d:DesignInstance Type=vmexp:FrameExporterViewModel}"
mc:Ignorable="d"
@@ -13,6 +14,9 @@
Height="480"
ShowInTaskbar="False"
WindowStartupLocation="CenterOwner">
<Window.Resources>
<utils:BackgroundToForegroundConverter x:Key="Bg2FgCvter"/>
</Window.Resources>
<DockPanel>
<Border DockPanel.Dock="Bottom">
<WrapPanel HorizontalAlignment="Center">
@@ -105,12 +109,20 @@
</Grid.ColumnDefinitions>
<Label Content="{DynamicResource Str_BackgroundColor}" ToolTip="#AARRGGBB"/>
<DockPanel Grid.Column="1">
<Button DockPanel.Dock="Right" Content="..." Click="ButtonPickColor_Click">
<Border DockPanel.Dock="Right">
<Popup x:Name="_colorPopup" Placement="Right">
<hc:ColorPicker Confirmed="ColorPicker_Confirmed" Canceled="ColorPicker_Canceled"/>
</Popup>
</Border>
<Button DockPanel.Dock="Right"
Content="..."
Foreground="{Binding BackgroundColor, Converter={StaticResource Bg2FgCvter}}"
Click="ButtonPickColor_Click">
<Button.Background>
<SolidColorBrush Color="{Binding BackgroundColor}"/>
</Button.Background>
</Button>
<TextBox x:Name="_colorTextBox" Text="{Binding BackgroundColor}" ToolTip="#AARRGGBB"/>
<TextBox Text="{Binding BackgroundColor}" ToolTip="#AARRGGBB"/>
</DockPanel>
</Grid>

13
SpineViewer/Views/ExporterDialogs/FrameExporterDialog.xaml.cs
View File

@@ -44,7 +44,20 @@ namespace SpineViewer.Views.ExporterDialogs
private void ButtonPickColor_Click(object sender, RoutedEventArgs e)
{
_colorPopup.IsOpen = !_colorPopup.IsOpen;
}
private void ColorPicker_Confirmed(object sender, HandyControl.Data.FunctionEventArgs<Color> e)
{
_colorPopup.IsOpen = false;
var color = e.Info;
var vm = (BaseExporterViewModel)DataContext;
vm.BackgroundColor = color;
}
private void ColorPicker_Canceled(object sender, EventArgs e)
{
_colorPopup.IsOpen = false;
}
}
}

16
SpineViewer/Views/ExporterDialogs/FrameSequenceExporterDialog.xaml
View File

@@ -5,6 +5,7 @@
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:hc="https://handyorg.github.io/handycontrol"
xmlns:local="clr-namespace:SpineViewer.Views"
xmlns:utils="clr-namespace:SpineViewer.Utils"
xmlns:vmexp="clr-namespace:SpineViewer.ViewModels.Exporters"
d:DataContext="{d:DesignInstance Type=vmexp:FrameSequenceExporterViewModel}"
mc:Ignorable="d"
@@ -13,6 +14,9 @@
Height="550"
ShowInTaskbar="False"
WindowStartupLocation="CenterOwner">
<Window.Resources>
<utils:BackgroundToForegroundConverter x:Key="Bg2FgCvter"/>
</Window.Resources>
<DockPanel>
<Border DockPanel.Dock="Bottom">
<WrapPanel HorizontalAlignment="Center">
@@ -105,12 +109,20 @@
</Grid.ColumnDefinitions>
<Label Content="{DynamicResource Str_BackgroundColor}" ToolTip="#AARRGGBB"/>
<DockPanel Grid.Column="1">
<Button DockPanel.Dock="Right" Content="..." Click="ButtonPickColor_Click">
<Border DockPanel.Dock="Right">
<Popup x:Name="_colorPopup" Placement="Right">
<hc:ColorPicker Confirmed="ColorPicker_Confirmed" Canceled="ColorPicker_Canceled"/>
</Popup>
</Border>
<Button DockPanel.Dock="Right"
Content="..."
Foreground="{Binding BackgroundColor, Converter={StaticResource Bg2FgCvter}}"
Click="ButtonPickColor_Click">
<Button.Background>
<SolidColorBrush Color="{Binding BackgroundColor}"/>
</Button.Background>
</Button>
<TextBox x:Name="_colorTextBox" Text="{Binding BackgroundColor}" ToolTip="#AARRGGBB"/>
<TextBox Text="{Binding BackgroundColor}" ToolTip="#AARRGGBB"/>
</DockPanel>
</Grid>

13
SpineViewer/Views/ExporterDialogs/FrameSequenceExporterDialog.xaml.cs
View File

@@ -44,7 +44,20 @@ namespace SpineViewer.Views.ExporterDialogs
private void ButtonPickColor_Click(object sender, RoutedEventArgs e)
{
_colorPopup.IsOpen = !_colorPopup.IsOpen;
}
private void ColorPicker_Confirmed(object sender, HandyControl.Data.FunctionEventArgs<Color> e)
{
_colorPopup.IsOpen = false;
var color = e.Info;
var vm = (BaseExporterViewModel)DataContext;
vm.BackgroundColor = color;
}
private void ColorPicker_Canceled(object sender, EventArgs e)
{
_colorPopup.IsOpen = false;
}
}
}

18
SpineViewer/Views/MainWindow.xaml
View File

@@ -37,6 +37,7 @@
</Style.Triggers>
</Style>
<utils:StringFormatMultiValueConverter x:Key="StrFmtCvter"/>
<utils:BackgroundToForegroundConverter x:Key="Bg2FgCvter"/>
</Window.Resources>
<Window.TaskbarItemInfo>
@@ -941,7 +942,22 @@
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Content="{DynamicResource Str_BackgroundColor}" ToolTip="#AARRGGBB"/>
<TextBox Grid.Column="1" Text="{Binding BackgroundColor}" ToolTip="#AARRGGBB"/>
<DockPanel Grid.Column="1">
<Border DockPanel.Dock="Right">
<Popup x:Name="_colorPopup" Placement="Right">
<hc:ColorPicker Confirmed="ColorPicker_Confirmed" Canceled="ColorPicker_Canceled"/>
</Popup>
</Border>
<Button DockPanel.Dock="Right"
Content="..."
Foreground="{Binding BackgroundColor, Converter={StaticResource Bg2FgCvter}}"
Click="ButtonPickColor_Click">
<Button.Background>
<SolidColorBrush Color="{Binding BackgroundColor}"/>
</Button.Background>
</Button>
<TextBox Text="{Binding BackgroundColor}" ToolTip="#AARRGGBB"/>
</DockPanel>
</Grid>
<!-- 背景图案 -->

32
SpineViewer/Views/MainWindow.xaml.cs
View File

@@ -8,6 +8,7 @@ using SpineViewer.Natives;
using SpineViewer.Resources;
using SpineViewer.Services;
using SpineViewer.Utils;
using SpineViewer.ViewModels.Exporters;
using SpineViewer.ViewModels.MainWindow;
using System.Collections.Specialized;
using System.ComponentModel;
@@ -253,6 +254,28 @@ public partial class MainWindow : Window
#endregion
#region ColorPicker 弹窗事件处理
private void ButtonPickColor_Click(object sender, RoutedEventArgs e)
{
_colorPopup.IsOpen = !_colorPopup.IsOpen;
}
private void ColorPicker_Confirmed(object sender, HandyControl.Data.FunctionEventArgs<Color> e)
{
_colorPopup.IsOpen = false;
var color = e.Info;
var vm = ((MainWindowViewModel)DataContext).SFMLRendererViewModel;
vm.BackgroundColor = color;
}
private void ColorPicker_Canceled(object sender, EventArgs e)
{
_colorPopup.IsOpen = false;
}
#endregion
#region ViewModel PropertyChanged 事件处理
private void SFMLRendererViewModel_PropertyChanged(object? sender, PropertyChangedEventArgs e)
@@ -709,11 +732,10 @@ public partial class MainWindow : Window
private void DebugMenuItem_Click(object sender, RoutedEventArgs e)
{
#if DEBUG
var a = _rootGrid.ColumnDefinitions[0].Width;
var b = _rootGrid.ColumnDefinitions[1].Width;
var c = _rootGrid.ColumnDefinitions[2].Width;
Debug.WriteLine(a);
Debug.WriteLine(_rootGrid.ColumnDefinitions[0].Width.IsStar);
var res = HandyControl.Controls.Dialog.Show<HandyControl.Controls.ColorPicker>();
return;
#endif
}
}