MAUI中实现单张图片独立标记并保存功能的技术问题

1. 解决标记同步显示到所有图片的问题 #

• 问题原因：所有截图共用了同一个DrawingView的线条集合，切换图片时旧标记未清除，新标记会同步到所有关联视图。
• 处理步骤：
  • 给ScreenshotImgs集合中的每个截图对象添加独立的标记存储属性：

    public class ScreenshotItem
    {
        public string ImagePath { get; set; }
        // 专门存储当前截图的标记线条
        public ObservableCollection<IDrawingLine> MarkedLines { get; set; } = new();
    }
    

  • 点击截图触发ImageEditTapped事件时，将DrawingView的Lines绑定到当前选中截图的MarkedLines集合：

    private void ImageEditTapped(object sender, EventArgs e)
    {
        var selectedItem = (sender as Image).BindingContext as ScreenshotItem;
        drawingView.Lines = selectedItem.MarkedLines;
        fullimg.Source = ImageSource.FromFile(selectedItem.ImagePath);
    }
    

2. 实现标记保存到对应截图数据源 #

• 问题原因：未将DrawingView的线条集合与对应截图的存储属性关联，导致标记无法同步到数据源。
• 处理步骤：
  • 由于DrawingView的Lines默认是双向绑定，用户绘制的标记会实时同步到当前选中截图的MarkedLines中，因此SavemarksScreenshotView事件无需额外赋值操作。如果需要持久化到本地，可参考以下代码：

    private void SavemarksScreenshotView(object sender, EventArgs e)
    {
        // 遍历所有截图，将标记序列化后存储
        foreach (var item in ScreenshotImgs)
        {
            var linesJson = JsonSerializer.Serialize(item.MarkedLines);
            // 可将linesJson与图片路径关联，保存到本地文件或数据库
        }
        // 执行关闭编辑界面等后续操作
    }
    

3. XAML绑定优化（可选） #

如果采用MVVM模式，建议在ViewModel中维护SelectedScreenshot属性，直接在XAML中绑定：

<toolkit:DrawingView 
    Lines="{Binding SelectedScreenshot.MarkedLines, Mode=TwoWay}"
    BackgroundImageSource="{Binding SelectedScreenshot.ImagePath}"
    />

这样切换选中截图时，DrawingView会自动加载对应图片和已有标记，新绘制的标记也会实时保存到对应对象中。

内容的提问来源于stack exchange，提问作者Xamarin