使用 XAML/WPF 实现复杂曲线编辑器的策略

Question

我想实现一个相当复杂的曲线编辑器，它必须支持通常的要求，例如：

• 可自由缩放和可移动的轴
• 每个曲线点有不同的插值类型（线性、三次、样条曲线）
• 切线（连接和断开）
• 选择一个或多个点进行编辑（移动、缩放、删除）通过栅栏或单击
• 仅显示选定曲线点的手柄和高亮显示

我不我不想操作实际的 WPF 曲线，而是使用具有键/值/切线集的现有模型，并从我们的实现中采样曲线的精确形状。

我已经积累了一些实现自定义用户控件和模板的经验。但我想确保我不会错过任何明显的解决方案。我计划拥有这个通用的 XAML 树：

• CurveEditor - 包含所有内容的窗口
  • MainThumb：启用拖动和缩放编辑器范围
  • XAxis：用户控件在左侧渲染一些比例
  • YAxis：用户控件在底部渲染一些比例
  • 曲线：容纳曲线的画布
    • 曲线：单条曲线的用户控件
      • CurveName - 曲线标签
      • CurveLine - DrawingVisual 将通过采样样条函数的内部实现来渲染实际曲线。
      • CurveEditPoints - 保存所有编辑点的画布
        • CurveEditPoint - 用于单个编辑点的用户控件
          • LeftTangent - 左切线手柄的用户控件
            • LeftTangentThumb - 用于修改手柄
          • RightTangent - 右切线手柄的用户控件
            • RightTangentThumb - 用于修改手柄
        • CurvePointCenter - 实际点的可视化、选择状态和插值类型。
          • CurvePointThumb - 用于选择并拖动点的拇指

我知道，这是一个相当复杂的问题，我并不要求实际的实现。我对以下问题感兴趣：

1. 您能否推荐任何可能对我有帮助的教程或书籍（我已经获得了 Illustrator WPF、WPF Control Development Unleashed 以及其他一些）
2. 像 Tangents 这样的次要元素应该是单独的 UserControls 吗？
3. 什么容器最适合托管各个“曲线”、“编辑点”和“切线”。现在，我使用 Canvas 和 Canvas.SetLeft/SetTop 来定位子项，但这感觉“奇怪”。
4. 我应该使用像 Path 或 DrawingVisual-Classes 这样的“形状”来实现实际的表示吗？路径是直截了当的，但我担心数百个曲线点的性能。
5. 我应该使用变换来旋转切线还是可以在文件后面的代码中进行一些三角测量数学？
6. 该结构大致有意义吗，或者您是否建议采用完全不同的方法？

Answer 1

1. 您似乎手头有合适的工具，WPF Unleashed 非常棒，但我想您已经拥有了。

2. 在以下情况之一中创建单独的用户控件：

   • 您在各处使用相同的 xaml（DRY）
   • 您的 xaml 文件变得太大（取出一些组件）
   • 您需要从某个类继承

3. 这取决于你想要多少代码隐藏。
   正如您在评论中所建议的，您可以使用 ItemsControl 作为容器，用于需要在多个项目之间进行选择的地方。因此这也可以在曲线级别上完成，而不仅仅是在曲线上的点级别上完成。根据您想要如何处理实际直线和曲线的绘制，您甚至可以拥有一个 ItemsControl。 （附带说明：不过，您不会拥有开箱即用的虚拟化，因为您的项目不会具有恒定的高度）

4. 路径可以容纳数百个曲线点。如果你有 10,000 个，我想说你可能会遇到问题。
5. 无法想象这里应该如何使用变换，也许在装饰器内部。
6. 你的结构看起来不错。你将能够实现这一切。我会建议我如何做到这一点：

首先使用 MVVM。

• 曲线编辑器
  ListBox(Panel=Canvas)(ItemsSource=Curves)(ItemTemplate=CurveControl)

• CurveControl

  • Canvas(Background=Transparent) <= 我不确定标准是否是白色，但你不想重叠其他曲线...
    • 曲线名称
    • ListBox（面板=画布（背景=透明））（ItemsSource=CurveParts）
    • ListBox（面板=画布（背景=透明））（ItemsSource=CurvePoints）（ItemTemplate=>EditPointControl）

• EditPointControl

  • 画布
    • Thumb(Template = Ellipse) (Name=CenterHandle)（带有一些用于选择和隐藏切线的视觉状态）
    • 拇指（模板=椭圆）（名称=LeftHandle）
    • 拇指（模板=椭圆）（名称=RightHandle）
    • 线（将 X/Y 绑定到 Centerpoint 和 LeftHandlePoint）
    • 线（将 X/Y 绑定到 Centerpoint 和 RightHandlePoint）

我已声明为 ListBox 设置 ItemTemplate。但是，您可以根据需要设置列表框的样式（我认为标准样式包括边框，您可能需要删除它或设置 bordersize=0）并设置 ItemContainerStyle 并绑定到 IsSelected，以便您可以从 ViewModel 控制 IsSelected（查看 此处了解我的意思）。

所以视图模型看起来像这样：

- CurveEditorViewModel
    - ObservableCollection<CurveViewModel> Curves


- CurveViewModel
    - string Label
    - (Point LabelPlacement)
    - bool IsSelected
    - ObservableCollection<CurvePointViewModel> CurvePoints
    - ObservableCollection<CurvePartViewModel> CurveParts


- CurvePointViewModel
    - Point Position
    - bool IsSelected
    - Point LeftHandle
    - Point RightHandle

- CurvePartViewModel
    - CurvePointViewModel StartPoint
    - CurvePointViewModel EndPoint
    - Path CurvePath

在这里你可以订阅 CurvePointViewModel 的 PropertyChanged 并重新计算你公开的路径。

我可能会不断改进，但这只是我的第一个猜测。

您可能需要注意一些细节。例如：拇指的样式可能是中间有一个可见的圆圈，周围有一个不可见的大圆圈，背景=透明。这样你就可以让你的可见圆圈变小，但让用户在小圆圈周围的区域使用拇指。

编辑：

这是拇指的示例：

        <Thumb Width="8" Height="8" Cursor="Hand" Margin="-4">
            <Thumb.Template>
                <ControlTemplate TargetType="Thumb">
                    <Grid>
                        <Ellipse Fill="Transparent" Margin="-6"/>
                        <Ellipse Stroke="Red" StrokeThickness="2"/>
                    </Grid>
                </ControlTemplate>
            </Thumb.Template>
        </Thumb>

当您想将其放置在画布上的特定点时，将边距设置为减去宽度和高度的一半会将圆的中心放置在该点上。此外，如果内部椭圆具有透明填充且边距为 -6，您将在内部（较小）圆周围获得一个大 6px 的半径，您可以在其中拖动拇指。