C# Avalonia 03 - LayoutPanels - SimpleInkCanvas

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

1. using System.Runtime.CompilerServices;
2. using System.Resources;
3. using Avalonia.Metadata;
5. [assembly: NeutralResourcesLanguage("zh-CN")]
6. [assembly: XmlnsDefinition("https://github.com/avaloniaui", "Shares.Avalonia")]

复制代码

Canvas类有几点需要注意。
1. 自定义内容区域，是通过[Content]属性来描述Controls类。

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

复制代码

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

1.         public sealed override void Render(DrawingContext context)

复制代码

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

1. using Avalonia;
2. using Avalonia.Controls;
3. using Avalonia.Input;
4. using Avalonia.Media;
5. using System;
6. using System.Collections.Generic;
7. using System.Linq;
9. namespace Shares.Avalonia
10. {
11.     public enum InkEditingMode
12.     {
13.         Ink,
14.         Erase,
15.         Select
16.     }
18.     public class InkStroke
19.     {
20.         public List<Point> Points { get; set; } = new();
21.         public Color Color { get; set; } = Colors.Black;
22.         public double Thickness { get; set; } = 1.0;
23.     }
25.     public class InkCanvasLayer : Control
26.     {
27.         public List<InkStroke> Strokes { get; set; } = new();
28.         public InkStroke? CurrentStroke { get; set; }
29.         public List<InkStroke> SelectedStrokes { get; set; } = new();
30.         public Rect? SelectionRect { get; set; }
31.         public Rect? SelectionBox { get; set; }
33.         public override void Render(DrawingContext context)
34.         {
35.             base.Render(context);
37.             foreach (var stroke in Strokes)
38.             {
39.                 var isSelected = SelectedStrokes.Contains(stroke);
40.                 DrawStroke(context, stroke, isSelected);
41.             }
43.             if (CurrentStroke != null)
44.                 DrawStroke(context, CurrentStroke);
46.             if (SelectionRect.HasValue)
47.             {
48.                 context.DrawRectangle(null,
49.                     new Pen(Brushes.DarkOliveGreen, 1, dashStyle: DashStyle.Dash),
50.                     SelectionRect.Value);
51.             }
53.             if (SelectionBox.HasValue)
54.             {
55.                 var pen = new Pen(Brushes.DarkGray, 1, dashStyle: DashStyle.Dash);
56.                 context.DrawRectangle(null, pen, SelectionBox.Value);
57.             }
58.         }
60.         private void DrawStroke(DrawingContext context, InkStroke stroke, bool isSelected = false)
61.         {
62.             if (stroke.Points.Count < 2) return;
64.             var color = isSelected ? Colors.Black : stroke.Color;
65.             var thickness = isSelected ? stroke.Thickness * 2 : stroke.Thickness;
66.             var pen = new Pen(new SolidColorBrush(color), thickness);
67.             for (int i = 1; i < stroke.Points.Count; i++)
68.             {
69.                 context.DrawLine(pen, stroke.Points[i - 1], stroke.Points[i]);
70.             }
71.         }
72.     }
74.     public class InkCanvas : Canvas
75.     {
76.         private readonly InkCanvasLayer layer;
77.         private List<InkStroke> strokes = new();
78.         private InkStroke? currentStroke;
79.         private Stack<List<InkStroke>> undoStack = new();
80.         private Stack<List<InkStroke>> redoStack = new();
82.         private bool isSelecting = false;
83.         private Rect selectionRect;
84.         private List<InkStroke> selectedStrokes = new();
85.         private Point selectionStart;
87.         private bool isDraggingSelection = false;
88.         private Point lastDragPoint;
90.         public static readonly StyledProperty<Color> StrokeColorProperty =
91.             AvaloniaProperty.Register<InkCanvas, Color>(nameof(StrokeColor), Colors.Black);
92.         public Color StrokeColor
93.         {
94.             get => GetValue(StrokeColorProperty);
95.             set => SetValue(StrokeColorProperty, value);
96.         }
98.         public static readonly StyledProperty<double> StrokeThicknessProperty =
99.             AvaloniaProperty.Register<InkCanvas, double>(nameof(StrokeThickness), 2.0);
100.         public double StrokeThickness
101.         {
102.             get => GetValue(StrokeThicknessProperty);
103.             set => SetValue(StrokeThicknessProperty, value);
104.         }
106.         public static readonly StyledProperty<InkEditingMode> EditingModeProperty =
107.             AvaloniaProperty.Register<InkCanvas, InkEditingMode>(nameof(EditingMode), InkEditingMode.Ink);
108.         public InkEditingMode EditingMode
109.         {
110.             get => GetValue(EditingModeProperty);
111.             set => SetValue(EditingModeProperty, value);
112.         }
114.         public InkCanvas()
115.         {
116.             layer = new InkCanvasLayer();
117.             Children.Add(layer);
119.             PointerPressed += OnPointerPressed;
120.             PointerMoved += OnPointerMoved;
121.             PointerReleased += OnPointerReleased;
123.             this.GetObservable(EditingModeProperty).Subscribe(mode =>
124.             {
125.                 selectedStrokes.Clear();
126.                 layer.SelectedStrokes = selectedStrokes;
127.                 layer.SelectionBox = null;
128.                 layer.InvalidateVisual();
129.             });
131.             Background = Brushes.White;
132.         }
134.         protected override Size ArrangeOverride(Size finalSize)
135.         {
136.             layer.Arrange(new Rect(finalSize));
137.             return base.ArrangeOverride(finalSize);
138.         }
140.         private void OnPointerPressed(object? sender, PointerPressedEventArgs e)
141.         {
142.             var point = e.GetPosition(this);
144.             if (EditingMode == InkEditingMode.Erase)
145.             {
146.                 EraseAtPoint(point);
147.                 return;
148.             }
150.             if (EditingMode == InkEditingMode.Select)
151.             {
152.                 selectionStart = point;
153.                 selectionRect = new Rect(point, point);
155.                 if (selectedStrokes.Any(s => s.Points.Any(p => Distance(p, point) < 5)))
156.                 {
157.                     isDraggingSelection = true;
158.                     lastDragPoint = point;
159.                     return;
160.                 }
162.                 isSelecting = true;
163.                 return;
164.             }
166.             currentStroke = new InkStroke
167.             {
168.                 Color = StrokeColor,
169.                 Thickness = StrokeThickness
170.             };
171.             currentStroke.Points.Add(point);
172.             layer.CurrentStroke = currentStroke;
173.             e.Pointer.Capture(this);
174.         }
176.         private void OnPointerMoved(object? sender, PointerEventArgs e)
177.         {
178.             var point = e.GetPosition(this);
180.             if (currentStroke != null && e.GetCurrentPoint(this).Properties.IsLeftButtonPressed)
181.             {
182.                 currentStroke.Points.Add(point);
183.                 layer.InvalidateVisual();
184.             }
186.             if (isDraggingSelection && e.GetCurrentPoint(this).Properties.IsLeftButtonPressed)
187.             {
188.                 var delta = point - lastDragPoint;
189.                 MoveSelected(delta);
190.                 lastDragPoint = point;
191.                 UpdateSelectionBox();
192.             }
194.             if (isSelecting && e.GetCurrentPoint(this).Properties.IsLeftButtonPressed)
195.             {
196.                 selectionRect = new Rect(selectionStart, point).Normalize();
197.                 layer.SelectionRect = selectionRect;
198.                 layer.InvalidateVisual();
199.             }
200.         }
202.         private void OnPointerReleased(object? sender, PointerReleasedEventArgs e)
203.         {
204.             if (currentStroke != null)
205.             {
206.                 SaveUndoState();
207.                 strokes.Add(currentStroke);
208.                 currentStroke = null;
209.                 layer.CurrentStroke = null;
210.             }
212.             if (isDraggingSelection)
213.             {
214.                 isDraggingSelection = false;
215.             }
217.             if (isSelecting)
218.             {
219.                 isSelecting = false;
220.                 layer.SelectionRect = null;
221.                 SelectStrokesInRect(selectionRect);
222.             }
224.             layer.InvalidateVisual();
225.             e.Pointer.Capture(null);
226.         }
228.         private void SelectStrokesInRect(Rect rect)
229.         {
230.             selectedStrokes.Clear();
231.             foreach (var stroke in strokes)
232.             {
233.                 if (stroke.Points.Any(p => rect.Contains(p)))
234.                 {
235.                     selectedStrokes.Add(stroke);
236.                 }
237.             }
238.             layer.SelectedStrokes = selectedStrokes;
239.             UpdateSelectionBox();
240.         }
242.         private void UpdateSelectionBox()
243.         {
244.             if (selectedStrokes.Count == 0)
245.             {
246.                 layer.SelectionBox = null;
247.                 return;
248.             }
250.             double minX = double.MaxValue, minY = double.MaxValue;
251.             double maxX = double.MinValue, maxY = double.MinValue;
253.             foreach (var stroke in selectedStrokes)
254.             {
255.                 foreach (var p in stroke.Points)
256.                 {
257.                     minX = Math.Min(minX, p.X);
258.                     minY = Math.Min(minY, p.Y);
259.                     maxX = Math.Max(maxX, p.X);
260.                     maxY = Math.Max(maxY, p.Y);
261.                 }
262.             }
264.             layer.SelectionBox = new Rect(minX, minY, maxX - minX, maxY - minY);
265.         }
267.         private void EraseAtPoint(Point point)
268.         {
269.             const double hitRadius = 5;
270.             SaveUndoState();
271.             strokes.RemoveAll(s => s.Points.Exists(p => Distance(p, point) < hitRadius));
272.             layer.Strokes = strokes;
273.             layer.InvalidateVisual();
274.         }
276.         private double Distance(Point a, Point b)
277.         {
278.             var dx = a.X - b.X;
279.             var dy = a.Y - b.Y;
280.             return Math.Sqrt(dx * dx + dy * dy);
281.         }
283.         public void MoveSelected(Vector delta)
284.         {
285.             foreach (var stroke in selectedStrokes)
286.             {
287.                 for (int i = 0; i < stroke.Points.Count; i++)
288.                     stroke.Points[i] += delta;
289.             }
290.             UpdateSelectionBox();
291.             layer.InvalidateVisual();
292.         }
294.         private void SaveUndoState()
295.         {
296.             undoStack.Push(strokes.Select(s => new InkStroke
297.             {
298.                 Points = new List<Point>(s.Points),
299.                 Color = s.Color,
300.                 Thickness = s.Thickness
301.             }).ToList());
302.             redoStack.Clear();
303.             layer.Strokes = strokes;
304.         }
306.         public void Undo()
307.         {
308.             if (undoStack.Count == 0) return;
309.             redoStack.Push(strokes);
310.             strokes = undoStack.Pop();
311.             layer.Strokes = strokes;
312.             layer.InvalidateVisual();
313.         }
315.         public void Redo()
316.         {
317.             if (redoStack.Count == 0) return;
318.             undoStack.Push(strokes);
319.             strokes = redoStack.Pop();
320.             layer.Strokes = strokes;
321.             layer.InvalidateVisual();
322.         }
324.         public IReadOnlyList<InkStroke> Strokes => strokes.AsReadOnly();
325.     }
326. }

复制代码

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

1. <Window xmlns="https://github.com/avaloniaui"
2.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
4.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
5.         Height="300" Width="300"
6.         x:Class="AvaloniaUI.SimpleInkCanvas"
7.         Title="SimpleInkCanvas">
8.     <Grid RowDefinitions="auto,*">
9.         <StackPanel Margin="5" Orientation="Horizontal">
10.             <TextBlock Margin="5">EditingMode: </TextBlock>
11.             <ComboBox Name="lstEditingMode"  VerticalAlignment="Center">
12.             </ComboBox>
13.         </StackPanel>
15.         <InkCanvas Name="inkCanvas" Grid.Row="1" Background="LightYellow" EditingMode="{Binding ElementName=lstEditingMode,Path=SelectedItem}">
16.             <Button Canvas.Top="10" Canvas.Left="10">Hello</Button>
17.             <Image Source="avares://AvaloniaUI/Resources/Images/office.jpg" Canvas.Top="10" Canvas.Left="50"
18.                Width="100" Height="100"/>
19.         </InkCanvas>
20.     </Grid>
21. </Window>

复制代码

SimpleInkCanvas.axaml.cs代码

1. using Avalonia;
2. using Avalonia.Controls;
3. using Avalonia.Markup.Xaml;
4. using Shares.Avalonia;
5. using System;
7. namespace AvaloniaUI;
9. public partial class SimpleInkCanvas : Window
10. {
11.     public SimpleInkCanvas()
12.     {
13.         InitializeComponent();
15.         foreach (InkEditingMode mode in Enum.GetValues(typeof(InkEditingMode)))
16.         {
17.             lstEditingMode.Items.Add(mode);
18.             lstEditingMode.SelectedItem = inkCanvas.EditingMode;
19.         }
20.     }
21. }

复制代码

运行效果

 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！