C# ScrollViewer中画布中的图像

所以我在ScrollViewer中看到了这个图像（图像可以平移和缩放）：

现在，我想画在我的图像上（只是一些用于标记的矩形）。我猜直接绘制到图像上（没有系统绘制…）是不可能的

我尝试使用画布（以便添加矩形对象），如下所示：

<ScrollViewer x:Name="imageScrollViewer" SizeChanged="image_SizeChanged" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Visible">
    <ScrollViewer.InputBindings>
        <KeyBinding Key="PageDown" Command="local:MainWindow.NextPage" />
        <KeyBinding Key="PageUp" Command="local:MainWindow.PreviousPage" />
    </ScrollViewer.InputBindings>
    <Canvas x:Name="canvas">
        <Image x:Name="image" Stretch="Uniform" RenderOptions.BitmapScalingMode="Fant" RenderOptions.EdgeMode="Aliased"
    MouseMove="image_MouseMove" MouseLeftButtonDown="image_MouseLeftButtonDown" SizeChanged="image_SizeChanged">
            <Image.LayoutTransform>
                <ScaleTransform x:Name="scaleTransform" ScaleX="1" ScaleY="1" CenterX="0" CenterY="0" />
            </Image.LayoutTransform>
        </Image>
    </Canvas>
</ScrollViewer>

现在，我的图像不再是平移或缩放的，因为画布“破坏”了我的整个布局和功能。在我的代码背后，我真的依赖于图像（它的实际宽度/实际高度，等等），因为我捕获鼠标位置，然后决定它是否悬停在图像的标记上

---

有什么想法吗？

您可以a）将画布宽度/高度绑定到图像宽度/高度，以便坐标相同，b）使用可写位图并在实际位图上绘图。

我已经尝试了您的第一种方法，但效果不好。WriteableBitmap看起来不错，但是DrawingVisual对于矩形这样简单的东西不是更好吗？我知道如何使用DrawingVisual的DrawingContext创建和绘制，但我不知道如何告诉它“以此ImageSource为基础”，因为我想编辑现有的ImageSource。我以前使用过第一种方法，效果很好。也许鼠标按下时坐标变换不正确。每秒，如果您希望保存已混合绘图内容的位图，则可写位图很好。如果希望将它们分开，请使用DrawingVisual。DrawingVisual有一个DrawImage，你先用它，然后是矩形。我最后用了DrawingVisual，先调用DrawImage，然后再画矩形，这很有魅力，速度也很快！谢谢

<ScrollViewer x:Name="imageScrollViewer" SizeChanged="image_SizeChanged" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Visible">
    <ScrollViewer.InputBindings>
        <KeyBinding Key="PageDown" Command="local:MainWindow.NextPage" />
        <KeyBinding Key="PageUp" Command="local:MainWindow.PreviousPage" />
    </ScrollViewer.InputBindings>
    <Canvas x:Name="canvas">
        <Image x:Name="image" Stretch="Uniform" RenderOptions.BitmapScalingMode="Fant" RenderOptions.EdgeMode="Aliased"
    MouseMove="image_MouseMove" MouseLeftButtonDown="image_MouseLeftButtonDown" SizeChanged="image_SizeChanged">
            <Image.LayoutTransform>
                <ScaleTransform x:Name="scaleTransform" ScaleX="1" ScaleY="1" CenterX="0" CenterY="0" />
            </Image.LayoutTransform>
        </Image>
    </Canvas>
</ScrollViewer>