C# maui暂时没有官方支持InkCanvas，但是不影响，自己实现一个就行了。目前支持画图，选择，移动和删除。同时支持自定义橡皮擦形状，也支持绑定自定义的形状列表。
实现一个Converter类，以后所有的绑定类型转换都在这个类中实现。
using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; using System.Text; using System.Threading.Tasks; namespace Shares.Utility { public class Converter : IValueConverter { public object? Convert(object? value, Type targetType, object? parameter, System.Globalization.CultureInfo culture) { // Implement conversion logic here if (value is List<string> list) { return string.Join(", ", list); // 自定义分隔符 } else if (value is int intValue && targetType.IsEnum) { return Enum.ToObject(targetType, intValue); // 将整数转换为枚举类型 } return value; } public object? ConvertBack(object? value, Type targetType, object? parameter, System.Globalization.CultureInfo culture) { // Implement conversion back logic here return value; } } }
然后在MyStyles.xaml中添加Converter类的引用，这样以后所有项目都可以使用了，local是
xmlns:local="clr-namespace:Shares.Utility;assembly=Shares"
<!--converter定义--> <local:Converter x:Key="Converter"/>
InkCanvas重写GraphicsView
public class InkCanvas : GraphicsView, IDrawable { public class DrawingPath { private RectF? cachedBounds; private bool isDirty = true; public Guid Id { get; } = Guid.NewGuid(); public PathF Path { get; set; } = new PathF(); public Color? StrokeColor { get; set; } public float StrokeThickness { get; set; } public bool IsSelected { get; set; } public PointF Pos { get; set; } public RectF Bounds { get { if (!isDirty && cachedBounds.HasValue) return cachedBounds.Value; if (Path.Count == 0) { cachedBounds = RectF.Zero; return RectF.Zero; } var points = Path.Points; float minX = float.MaxValue, minY = float.MaxValue; float maxX = float.MinValue, maxY = float.MinValue; foreach (var point in points) { float x = point.X + Pos.X; float y = point.Y + Pos.Y; minX = Math.Min(minX, x); minY = Math.Min(minY, y); maxX = Math.Max(maxX, x); maxY = Math.Max(maxY, y); } cachedBounds = new RectF(minX, minY, maxX - minX, maxY - minY); isDirty = false; return cachedBounds.Value; } } public void InvalidateBounds() => isDirty = true; public void LineTo(float x, float y) { Path.LineTo(x, y); InvalidateBounds(); } public bool IntersectAt(PointF eraserPos, float eraserRadius) { if (Path.Count == 0) return false; // 优化点接触检查 foreach (var point in Path.Points) { float dx = point.X + Pos.X - eraserPos.X; float dy = point.Y + Pos.Y - eraserPos.Y; if (dx * dx + dy * dy <= eraserRadius * eraserRadius) { return true; } } // 优化线段接触检查 if (Path.Count >= 2) { var points = Path.Points; for (int i = 1; i < points.Count(); i++) { var start = new PointF(points.ElementAt(i - 1).X + Pos.X, points.ElementAt(i - 1).Y + Pos.Y); var end = new PointF(points.ElementAt(i).X + Pos.X, points.ElementAt(i).Y + Pos.Y); if (PointToLineDistance(start, end, eraserPos) <= eraserRadius) { return true; } } } return false; } public List<DrawingPath> SplitAt(PointF eraserPos, float eraserRadius) { var newPaths = new List<DrawingPath>(); if (Path.Count < 2) return newPaths; var points = Path.Points; int bestIndex = -1; float minDistance = float.MaxValue; // 1. 检查点接触 for (int i = 0; i < points.Count(); i++) { float dx = points.ElementAt(i).X + Pos.X - eraserPos.X; float dy = points.ElementAt(i).Y + Pos.Y - eraserPos.Y; float distance = dx * dx + dy * dy; if (distance < minDistance) { minDistance = distance; bestIndex = i; } } // 点接触处理 if (bestIndex >= 0 && minDistance <= eraserRadius * eraserRadius) { // 起点处理 if (bestIndex == 0) { if (points.Count() > 1) { var newPath = new DrawingPath { StrokeColor = StrokeColor, StrokeThickness = StrokeThickness, Pos = Pos }; newPath.Path.MoveTo(points.ElementAt(1)); for (int i = 2; i < points.Count(); i++) { newPath.Path.LineTo(points.ElementAt(i)); } newPaths.Add(newPath); } return newPaths; } // 终点处理 if (bestIndex == points.Count() - 1) { if (points.Count() > 1) { var newPath = new DrawingPath { StrokeColor = StrokeColor, StrokeThickness = StrokeThickness, Pos = Pos }; newPath.Path.MoveTo(points.ElementAt(0)); for (int i = 1; i < points.Count() - 1; i++) { newPath.Path.LineTo(points.ElementAt(i)); } newPaths.Add(newPath); } return newPaths; } // 中间点处理 if (bestIndex > 0 && bestIndex < points.Count() - 1) { // 第一段路径 var path1 = new DrawingPath { StrokeColor = StrokeColor, StrokeThickness = StrokeThickness, Pos = Pos }; path1.Path.MoveTo(points.ElementAt(0)); for (int i = 1; i <= bestIndex; i++) { path1.Path.LineTo(points.ElementAt(i)); } newPaths.Add(path1); // 第二段路径 var path2 = new DrawingPath { StrokeColor = StrokeColor, StrokeThickness = StrokeThickness, Pos = Pos }; path2.Path.MoveTo(points.ElementAt(bestIndex)); for (int i = bestIndex + 1; i < points.Count(); i++) { path2.Path.LineTo(points.ElementAt(i)); } newPaths.Add(path2); return newPaths; } } // 2. 线段接触处理 bestIndex = -1; minDistance = float.MaxValue; for (int i = 1; i < points.Count(); i++) { var start = new PointF(points.ElementAt(i - 1).X + Pos.X, points.ElementAt(i - 1).Y + Pos.Y); var end = new PointF(points.ElementAt(i).X + Pos.X, points.ElementAt(i).Y + Pos.Y); float distance = PointToLineDistance(start, end, eraserPos); if (distance < minDistance) { minDistance = distance; bestIndex = i; } } if (bestIndex > 0 && minDistance <= eraserRadius) { // 第一段路径 if (bestIndex > 1) { var path1 = new DrawingPath { StrokeColor = StrokeColor, StrokeThickness = StrokeThickness, Pos = Pos }; path1.Path.MoveTo(points.ElementAt(0)); for (int i = 1; i < bestIndex; i++) { path1.Path.LineTo(points.ElementAt(i)); } newPaths.Add(path1); } // 第二段路径 if (bestIndex < points.Count() - 1) { var path2 = new DrawingPath { StrokeColor = StrokeColor, StrokeThickness = StrokeThickness, Pos = Pos }; path2.Path.MoveTo(points.ElementAt(bestIndex)); for (int i = bestIndex + 1; i < points.Count(); i++) { path2.Path.LineTo(points.ElementAt(i)); } newPaths.Add(path2); } } return newPaths; } } public enum InkCanvasEditingMode { Ink, Select, Erase } public static readonly BindableProperty EditingModeProperty = BindableProperty.Create(nameof(EditingMode), typeof(InkCanvasEditingMode), typeof(InkCanvas), InkCanvasEditingMode.Ink, BindingMode.TwoWay, propertyChanged: OnEditingModeChanged); private static void OnEditingModeChanged(BindableObject bindable, object oldValue, object newValue) { if (bindable is InkCanvas canvas) { canvas.ClearSelection(); canvas.Invalidate(); } } public InkCanvasEditingMode EditingMode { get => (InkCanvasEditingMode)GetValue(EditingModeProperty); set => SetValue(EditingModeProperty, value); } public ObservableCollection<DrawingPath> Paths { get; set; } = new ObservableCollection<DrawingPath>(); public DrawingPath Eraser { get; set;} public float EraserRadius { get; set; } = 15f; // 增大橡皮擦半径 private DrawingPath? currentPath; private RectF? selectionRect; private PointF lastTouchPoint; private bool isMovingSelection; // 橡皮擦轨迹跟踪 private readonly List<PointF> eraserTrail = new List<PointF>(); private const int MaxEraserTrailPoints = 5; public Color StrokeColor { get; set; } = Colors.Black; public Color SelectionColor { get; set; } = Colors.Red; public float SelectionStrokeThickness { get; set; } = 1f; public float StrokeThickness { get; set; } = 1f; public InkCanvas() { Drawable = this; BackgroundColor = Colors.Transparent; Eraser = CreateEraserPath(); StartInteraction += OnTouchStarted; DragInteraction += OnTouchMoved; EndInteraction += OnTouchEnded; } private DrawingPath CreateEraserPath() { var path = new PathF(); var points = new[] { new PointF(107.4f, 13), new PointF(113.7f, 28.8f), new PointF(127.9f, 31.3f), new PointF(117.6f, 43.5f), new PointF(120.1f, 60.8f), new PointF(107.4f, 52.6f), new PointF(94.6f, 60.8f), new PointF(97.1f, 43.5f), new PointF(86.8f, 31.3f), new PointF(101f, 28.8f) }; path.MoveTo(points[0]); for (int i = 1; i < points.Length; i++) { path.LineTo(points[i]); } path.Close(); return new DrawingPath { Path = path, StrokeColor = Colors.Black, StrokeThickness = 1f }; } private void OnTouchStarted(object? sender, TouchEventArgs e) { if (e.Touches.Length == 0) return; var point = e.Touches[0]; lastTouchPoint = new PointF(point.X, point.Y); eraserTrail.Clear(); // 清除历史轨迹 switch (EditingMode) { case InkCanvasEditingMode.Ink: StartInking(lastTouchPoint); break; case InkCanvasEditingMode.Select: StartSelection(lastTouchPoint); break; case InkCanvasEditingMode.Erase: StartErase(lastTouchPoint); eraserTrail.Add(lastTouchPoint); // 添加起始点 break; } Invalidate(); } private void StartInking(PointF startPoint) { currentPath = new DrawingPath { StrokeColor = StrokeColor, StrokeThickness = StrokeThickness, Pos = PointF.Zero }; currentPath.Path.MoveTo(startPoint.X, startPoint.Y); Paths.Add(currentPath); } private void StartSelection(PointF startPoint) { isMovingSelection = Paths.Any(p => p.IsSelected && p.Bounds.Contains(startPoint)); if (!isMovingSelection) { ClearSelection(); var clickedPath = Paths.LastOrDefault(p => p.Bounds.Contains(startPoint)); if (clickedPath != null) { clickedPath.IsSelected = true; isMovingSelection = true; } else { selectionRect = new RectF(startPoint, SizeF.Zero); } } } private void StartErase(PointF startPoint) { Eraser.Pos = new PointF(startPoint.X - Eraser.Path.Bounds.Width / 2, startPoint.Y - Eraser.Path.Bounds.Height / 4); Eraser.IsSelected = true; } private void OnTouchMoved(object? sender, TouchEventArgs e) { if (e.Touches.Length == 0) return; var currentPoint = new PointF(e.Touches[0].X, e.Touches[0].Y); switch (EditingMode) { case InkCanvasEditingMode.Ink: ContinueInking(currentPoint); break; case InkCanvasEditingMode.Select: UpdateSelection(currentPoint); break; case InkCanvasEditingMode.Erase: UpdateEraser(currentPoint); ErasePaths(); break; } Invalidate(); } private void ContinueInking(PointF currentPoint) { if (currentPath == null) return; const float minDistance = 1.0f; float dx = currentPoint.X - lastTouchPoint.X; float dy = currentPoint.Y - lastTouchPoint.Y; if (dx * dx + dy * dy > minDistance * minDistance) { currentPath.LineTo(currentPoint.X, currentPoint.Y); lastTouchPoint = currentPoint; } } private void UpdateSelection(PointF currentPoint) { if (isMovingSelection) { MoveSelectedPaths(currentPoint); } else if (selectionRect.HasValue) { UpdateSelectionRect(currentPoint); } } private void UpdateEraser(PointF currentPoint) { Eraser.Pos = new PointF(currentPoint.X - Eraser.Path.Bounds.Width / 2, currentPoint.Y - Eraser.Path.Bounds.Height / 4); // 添加到橡皮擦轨迹 eraserTrail.Add(Eraser.Pos); if (eraserTrail.Count > MaxEraserTrailPoints) { eraserTrail.RemoveAt(0); } lastTouchPoint = currentPoint; } // 优化擦除逻辑 private void ErasePaths() { // 倒序遍历所有路径 for (int i = Paths.Count - 1; i >= 0; i--) { var path = Paths[i]; // 检查橡皮擦轨迹上的所有点 foreach (var trailPoint in eraserTrail) { if (path.IntersectAt(trailPoint, EraserRadius)) { var newPaths = path.SplitAt(trailPoint, EraserRadius); if (newPaths.Count > 0) { Paths.RemoveAt(i); foreach (var newPath in newPaths) { if (newPath.Path.Count >= 2) // 只添加有效路径 { Paths.Add(newPath); } } break; // 路径已被处理，跳出循环 } else { // 没有新路径表示整个路径应被删除 Paths.RemoveAt(i); break; } } } } } private void MoveSelectedPaths(PointF currentPoint) { float deltaX = currentPoint.X - lastTouchPoint.X; float deltaY = currentPoint.Y - lastTouchPoint.Y; foreach (var path in Paths) { if (path.IsSelected) { path.Pos = new PointF(path.Pos.X + deltaX, path.Pos.Y + deltaY); path.InvalidateBounds(); } } lastTouchPoint = currentPoint; } private void UpdateSelectionRect(PointF currentPoint) { float x = Math.Min(lastTouchPoint.X, currentPoint.X); float y = Math.Min(lastTouchPoint.Y, currentPoint.Y); float width = Math.Abs(currentPoint.X - lastTouchPoint.X); float height = Math.Abs(currentPoint.Y - lastTouchPoint.Y); selectionRect = new RectF(x, y, width, height); } private void OnTouchEnded(object? sender, TouchEventArgs e) { switch (EditingMode) { case InkCanvasEditingMode.Select when selectionRect.HasValue: FinalizeSelection(); break; } currentPath = null; selectionRect = null; isMovingSelection = false; Eraser.IsSelected = false; eraserTrail.Clear(); // 清除橡皮擦轨迹 Invalidate(); } private void FinalizeSelection() { var selection = selectionRect!.Value; foreach (var path in Paths) { if (!selection.IntersectsWith(path.Bounds)) continue; if (selection.Contains(path.Bounds)) { path.IsSelected = true; continue; } foreach (var point in path.Path.Points) { var absolutePoint = new PointF(point.X + path.Pos.X, point.Y + path.Pos.Y); if (selection.Contains(absolutePoint)) { path.IsSelected = true; break; } } } } public void ClearSelection() { foreach (var path in Paths) { path.IsSelected = false; } } public void Draw(ICanvas canvas, RectF dirtyRect) { canvas.FillColor = BackgroundColor; canvas.FillRectangle(dirtyRect); canvas.StrokeLineCap = LineCap.Round; canvas.StrokeLineJoin = LineJoin.Round; // 绘制所有路径 foreach (var path in Paths) { DrawPath(canvas, path); } // 绘制橡皮擦（如果被选中） if (Eraser.IsSelected) { DrawEraser(canvas); } // 绘制选择框 if (selectionRect.HasValue) { DrawSelectionRect(canvas, selectionRect.Value); } } private void DrawPath(ICanvas canvas, DrawingPath path) { var strokeColor = path.StrokeColor ?? Colors.Black; float strokeSize = path.IsSelected ? path.StrokeThickness * 1.5f : path.StrokeThickness; if (!path.IsSelected) { strokeColor = strokeColor.WithAlpha(0.5f); } canvas.StrokeColor = strokeColor; canvas.StrokeSize = strokeSize; canvas.SaveState(); canvas.Translate(path.Pos.X, path.Pos.Y); canvas.DrawPath(path.Path); canvas.RestoreState(); } private void DrawEraser(ICanvas canvas) { canvas.SaveState(); canvas.Translate(Eraser.Pos.X, Eraser.Pos.Y); canvas.Scale(0.2f, 0.2f); canvas.StrokeColor = Eraser.StrokeColor ?? Colors.Black; canvas.StrokeSize = Eraser.StrokeThickness; canvas.FillColor = Color.FromArgb("#FFD700"); canvas.FillPath(Eraser.Path); canvas.DrawPath(Eraser.Path); canvas.RestoreState(); } private void DrawSelectionRect(ICanvas canvas, RectF rect) { canvas.SaveState(); canvas.StrokeColor = SelectionColor; canvas.StrokeSize = SelectionStrokeThickness; canvas.StrokeDashPattern = new float[] { 5, 3 }; canvas.DrawRectangle(rect); canvas.RestoreState(); } // 静态工具方法 public static float Distance(PointF a, PointF b) => (float)Math.Sqrt(Math.Pow(a.X - b.X, 2) + Math.Pow(a.Y - b.Y, 2)); public static float DistanceSquared(PointF a, PointF b) => (a.X - b.X) * (a.X - b.X) + (a.Y - b.Y) * (a.Y - b.Y); public static float PointToLineDistance(PointF lineStart, PointF lineEnd, PointF point) { float l2 = DistanceSquared(lineStart, lineEnd); if (l2 == 0) return Distance(point, lineStart); float t = Math.Max(0, Math.Min(1, Vector2.Dot( new Vector2(point.X - lineStart.X, point.Y - lineStart.Y), new Vector2(lineEnd.X - lineStart.X, lineEnd.Y - lineStart.Y)) / l2)); PointF projection = new PointF( lineStart.X + t * (lineEnd.X - lineStart.X), lineStart.Y + t * (lineEnd.Y - lineStart.Y) ); return Distance(point, projection); } }
SimpleInkCanvas.xaml
<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:Shares.Utility;assembly=Shares" x:Class="MauiViews.MauiDemos.Book._03.SimpleInkCanvas" Title="SimpleInkCanvas" HeightRequest="300" WidthRequest="300"> <Grid RowDefinitions="auto,*"> <StackLayout Margin="5" Orientation="Horizontal"> <Label Text="EditingMode:" Margin="5" VerticalOptions="Center" FontSize="16"/> <Picker x:Name="lstEditingMode" VerticalOptions="Center"/> </StackLayout> <local:InkCanvas Grid.Row="1" BackgroundColor="LightYellow" EditingMode="{Binding Path=SelectedIndex, Source={x:Reference lstEditingMode}, Converter={StaticResource Converter}}"/> <Button Text="Hello" Grid.Row="1" WidthRequest="78" HeightRequest="16" HorizontalOptions="Start" VerticalOptions="Start"/> </Grid> </ContentPage>
对应的cs代码
using static Shares.Utility.InkCanvas; namespace MauiViews.MauiDemos.Book._03; public partial class SimpleInkCanvas : ContentPage { public SimpleInkCanvas() { InitializeComponent(); foreach (InkCanvasEditingMode mode in Enum.GetValues(typeof(InkCanvasEditingMode))) { lstEditingMode.Items.Add(mode.ToString()); lstEditingMode.SelectedIndex = 0; } } }
运行效果
