C# Avalonia 03 - LayoutPanels - SimpleInkCanvas

这次继承C# Avalonia官方自带的Canvas，扩展一个InkCanvas，兼容Canvas的所有功能。为了简化自定义命名控件，建议把自定义控件加入到默认空间。

AssemblyInfo.cs代码如下

using System.Runtime.CompilerServices;
using System.Resources;
using Avalonia.Metadata;

[assembly: NeutralResourcesLanguage("zh-CN")]
[assembly: XmlnsDefinition("https://github.com/avaloniaui", "Shares.Avalonia")]

Canvas类有几点需要注意。

1. 自定义内容区域，是通过[Content]属性来描述Controls类。

        [Content]
        public Controls Children { get; } = new Controls();

2.　Render是sealed，所以不支持重写Render。

        public sealed override void Render(DrawingContext context)

现在，我们在Shares.Avalonia共享项目中，创建一个ControlExtensions.cs，实现InkCanvas类。代码如下

using Avalonia;
using Avalonia.Controls;
using Avalonia.Input;
using Avalonia.Media;
using System;
using System.Collections.Generic;
using System.Linq;

namespace Shares.Avalonia
{
    public enum InkEditingMode
    {
        Ink,
        Erase,
        Select
    }

    public class InkStroke
    {
        public List<Point> Points { get; set; } = new();
        public Color Color { get; set; } = Colors.Black;
        public double Thickness { get; set; } = 1.0;
    }

    public class InkCanvasLayer : Control
    {
        public List<InkStroke> Strokes { get; set; } = new();
        public InkStroke? CurrentStroke { get; set; }
        public List<InkStroke> SelectedStrokes { get; set; } = new();
        public Rect? SelectionRect { get; set; }
        public Rect? SelectionBox { get; set; }

        public override void Render(DrawingContext context)
        {
            base.Render(context);

            foreach (var stroke in Strokes)
            {
                var isSelected = SelectedStrokes.Contains(stroke);
                DrawStroke(context, stroke, isSelected);
            }

            if (CurrentStroke != null)
                DrawStroke(context, CurrentStroke);

            if (SelectionRect.HasValue)
            {
                context.DrawRectangle(null,
                    new Pen(Brushes.DarkOliveGreen, 1, dashStyle: DashStyle.Dash),
                    SelectionRect.Value);
            }

            if (SelectionBox.HasValue)
            {
                var pen = new Pen(Brushes.DarkGray, 1, dashStyle: DashStyle.Dash);
                context.DrawRectangle(null, pen, SelectionBox.Value);
            }
        }

        private void DrawStroke(DrawingContext context, InkStroke stroke, bool isSelected = false)
        {
            if (stroke.Points.Count < 2) return;

            var color = isSelected ? Colors.Black : stroke.Color;
            var thickness = isSelected ? stroke.Thickness * 2 : stroke.Thickness;
            var pen = new Pen(new SolidColorBrush(color), thickness);
            for (int i = 1; i < stroke.Points.Count; i++)
            {
                context.DrawLine(pen, stroke.Points[i - 1], stroke.Points[i]);
            }
        }
    }

    public class InkCanvas : Canvas
    {
        private readonly InkCanvasLayer layer;
        private List<InkStroke> strokes = new();
        private InkStroke? currentStroke;
        private Stack<List<InkStroke>> undoStack = new();
        private Stack<List<InkStroke>> redoStack = new();

        private bool isSelecting = false;
        private Rect selectionRect;
        private List<InkStroke> selectedStrokes = new();
        private Point selectionStart;

        private bool isDraggingSelection = false;
        private Point lastDragPoint;

        public static readonly StyledProperty<Color> StrokeColorProperty =
            AvaloniaProperty.Register<InkCanvas, Color>(nameof(StrokeColor), Colors.Black);
        public Color StrokeColor
        {
            get => GetValue(StrokeColorProperty);
            set => SetValue(StrokeColorProperty, value);
        }

        public static readonly StyledProperty<double> StrokeThicknessProperty =
            AvaloniaProperty.Register<InkCanvas, double>(nameof(StrokeThickness), 2.0);
        public double StrokeThickness
        {
            get => GetValue(StrokeThicknessProperty);
            set => SetValue(StrokeThicknessProperty, value);
        }

        public static readonly StyledProperty<InkEditingMode> EditingModeProperty =
            AvaloniaProperty.Register<InkCanvas, InkEditingMode>(nameof(EditingMode), InkEditingMode.Ink);
        public InkEditingMode EditingMode
        {
            get => GetValue(EditingModeProperty);
            set => SetValue(EditingModeProperty, value);
        }

        public InkCanvas()
        {
            layer = new InkCanvasLayer();
            Children.Add(layer);

            PointerPressed += OnPointerPressed;
            PointerMoved += OnPointerMoved;
            PointerReleased += OnPointerReleased;

            this.GetObservable(EditingModeProperty).Subscribe(mode =>
            {
                selectedStrokes.Clear();
                layer.SelectedStrokes = selectedStrokes;
                layer.SelectionBox = null;
                layer.InvalidateVisual();
            });

            Background = Brushes.White;
        }

        protected override Size ArrangeOverride(Size finalSize)
        {
            layer.Arrange(new Rect(finalSize));
            return base.ArrangeOverride(finalSize);
        }

        private void OnPointerPressed(object? sender, PointerPressedEventArgs e)
        {
            var point = e.GetPosition(this);

            if (EditingMode == InkEditingMode.Erase)
            {
                EraseAtPoint(point);
                return;
            }

            if (EditingMode == InkEditingMode.Select)
            {
                selectionStart = point;
                selectionRect = new Rect(point, point);

                if (selectedStrokes.Any(s => s.Points.Any(p => Distance(p, point) < 5)))
                {
                    isDraggingSelection = true;
                    lastDragPoint = point;
                    return;
                }

                isSelecting = true;
                return;
            }

            currentStroke = new InkStroke
            {
                Color = StrokeColor,
                Thickness = StrokeThickness
            };
            currentStroke.Points.Add(point);
            layer.CurrentStroke = currentStroke;
            e.Pointer.Capture(this);
        }

        private void OnPointerMoved(object? sender, PointerEventArgs e)
        {
            var point = e.GetPosition(this);

            if (currentStroke != null && e.GetCurrentPoint(this).Properties.IsLeftButtonPressed)
            {
                currentStroke.Points.Add(point);
                layer.InvalidateVisual();
            }

            if (isDraggingSelection && e.GetCurrentPoint(this).Properties.IsLeftButtonPressed)
            {
                var delta = point - lastDragPoint;
                MoveSelected(delta);
                lastDragPoint = point;
                UpdateSelectionBox();
            }

            if (isSelecting && e.GetCurrentPoint(this).Properties.IsLeftButtonPressed)
            {
                selectionRect = new Rect(selectionStart, point).Normalize();
                layer.SelectionRect = selectionRect;
                layer.InvalidateVisual();
            }
        }

        private void OnPointerReleased(object? sender, PointerReleasedEventArgs e)
        {
            if (currentStroke != null)
            {
                SaveUndoState();
                strokes.Add(currentStroke);
                currentStroke = null;
                layer.CurrentStroke = null;
            }

            if (isDraggingSelection)
            {
                isDraggingSelection = false;
            }

            if (isSelecting)
            {
                isSelecting = false;
                layer.SelectionRect = null;
                SelectStrokesInRect(selectionRect);
            }

            layer.InvalidateVisual();
            e.Pointer.Capture(null);
        }

        private void SelectStrokesInRect(Rect rect)
        {
            selectedStrokes.Clear();
            foreach (var stroke in strokes)
            {
                if (stroke.Points.Any(p => rect.Contains(p)))
                {
                    selectedStrokes.Add(stroke);
                }
            }
            layer.SelectedStrokes = selectedStrokes;
            UpdateSelectionBox();
        }

        private void UpdateSelectionBox()
        {
            if (selectedStrokes.Count == 0)
            {
                layer.SelectionBox = null;
                return;
            }

            double minX = double.MaxValue, minY = double.MaxValue;
            double maxX = double.MinValue, maxY = double.MinValue;

            foreach (var stroke in selectedStrokes)
            {
                foreach (var p in stroke.Points)
                {
                    minX = Math.Min(minX, p.X);
                    minY = Math.Min(minY, p.Y);
                    maxX = Math.Max(maxX, p.X);
                    maxY = Math.Max(maxY, p.Y);
                }
            }

            layer.SelectionBox = new Rect(minX, minY, maxX - minX, maxY - minY);
        }

        private void EraseAtPoint(Point point)
        {
            const double hitRadius = 5;
            SaveUndoState();
            strokes.RemoveAll(s => s.Points.Exists(p => Distance(p, point) < hitRadius));
            layer.Strokes = strokes;
            layer.InvalidateVisual();
        }

        private double Distance(Point a, Point b)
        {
            var dx = a.X - b.X;
            var dy = a.Y - b.Y;
            return Math.Sqrt(dx * dx + dy * dy);
        }

        public void MoveSelected(Vector delta)
        {
            foreach (var stroke in selectedStrokes)
            {
                for (int i = 0; i < stroke.Points.Count; i++)
                    stroke.Points[i] += delta;
            }
            UpdateSelectionBox();
            layer.InvalidateVisual();
        }

        private void SaveUndoState()
        {
            undoStack.Push(strokes.Select(s => new InkStroke
            {
                Points = new List<Point>(s.Points),
                Color = s.Color,
                Thickness = s.Thickness
            }).ToList());
            redoStack.Clear();
            layer.Strokes = strokes;
        }

        public void Undo()
        {
            if (undoStack.Count == 0) return;
            redoStack.Push(strokes);
            strokes = undoStack.Pop();
            layer.Strokes = strokes;
            layer.InvalidateVisual();
        }

        public void Redo()
        {
            if (redoStack.Count == 0) return;
            undoStack.Push(strokes);
            strokes = redoStack.Pop();
            layer.Strokes = strokes;
            layer.InvalidateVisual();
        }

        public IReadOnlyList<InkStroke> Strokes => strokes.AsReadOnly();
    }
}

SimpleInkCanvas.axaml代码，其中office.jpg要把属性设置为AvaloniaResource。目前AvaloniaResource除了对axaml有bug外，其他资源是没问题。

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        Height="300" Width="300"
        x:Class="AvaloniaUI.SimpleInkCanvas"
        Title="SimpleInkCanvas">
    <Grid RowDefinitions="auto,*">
        <StackPanel Margin="5" Orientation="Horizontal">
            <TextBlock Margin="5">EditingMode: </TextBlock>
            <ComboBox Name="lstEditingMode"  VerticalAlignment="Center">
            </ComboBox>
        </StackPanel>

        <InkCanvas Name="inkCanvas" Grid.Row="1" Background="LightYellow" EditingMode="{Binding ElementName=lstEditingMode,Path=SelectedItem}">
            <Button Canvas.Top="10" Canvas.Left="10">Hello</Button>
            <Image Source="avares://AvaloniaUI/Resources/Images/office.jpg" Canvas.Top="10" Canvas.Left="50"
               Width="100" Height="100"/>
        </InkCanvas>
    </Grid>
</Window>

SimpleInkCanvas.axaml.cs代码

using Avalonia;
using Avalonia.Controls;
using Avalonia.Markup.Xaml;
using Shares.Avalonia;
using System;

namespace AvaloniaUI;

public partial class SimpleInkCanvas : Window
{
    public SimpleInkCanvas()
    {
        InitializeComponent();

        foreach (InkEditingMode mode in Enum.GetValues(typeof(InkEditingMode)))
        {
            lstEditingMode.Items.Add(mode);
            lstEditingMode.SelectedItem = inkCanvas.EditingMode;
        }
    }
}

运行效果