使用ImageBrush背景缩放画布

本文关键字：缩放 背景 ImageBrush 使用 | 更新日期: 2023-09-27 18:24:44

当我想用背景缩放Canvas时，它无法按我想要的方式工作。背景是相同的，只有画布的内容是缩放的。但如果我将Canvas更改为InkCanvas，效果会很好，但由于InkCanver不支持MouseLeftButtonDown事件，我不得不使用Canvas。

这是我的代码

 <ScrollViewer Grid.Column="1" HorizontalScrollBarVisibility="Visible">
        <Canvas x:Name="CanvasChart" MouseMove="CanvasChart_MouseMove" MouseLeave="CanvasChart_MouseLeave"  
                   Grid.Column="1" Margin="20 20 20 20">
            <Canvas.Background >
                <ImageBrush Stretch="UniformToFill"  ImageSource="D:'Praca'JanarMapy'JanarMapy'Maps'Montenegro_Map.png"></ImageBrush>
            </Canvas.Background>
            <Canvas.LayoutTransform>
                <ScaleTransform 
                                ScaleX="{Binding Path=Value, ElementName=zoomSlider}"
                                ScaleY="{Binding Path=Value, ElementName=zoomSlider}"/>
            </Canvas.LayoutTransform>
        </Canvas>
    </ScrollViewer>

使用ImageBrush背景缩放画布

首先，您必须禁用背景ImageBrush的自动拉伸才能看到任何缩放效果：

<ImageBrush Stretch="None" ... />

但请注意，笔刷不参与布局计算。如果您打算通过缩放变换来调整ScrollViewer的内容大小，则应考虑以下解决方案，其中网格的大小始终至少为图像的大小。

<ScrollViewer Grid.Column="1" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible">
    <Grid Margin="20 20 20 20">
        <Grid.LayoutTransform>
            <ScaleTransform ScaleX="{Binding Path=Value, ElementName=zoomSlider}" 
                            ScaleY="{Binding Path=Value, ElementName=zoomSlider}"/>
        </Grid.LayoutTransform>
        <Image Source="D:'Praca'JanarMapy'JanarMapy'Maps'Montenegro_Map.png"
               Stretch="None"/>
        <Canvas x:Name="CanvasChart"/>
    </Grid>
</ScrollViewer>

作为一种与InkCanvas工作方式类似的替代方案，您可以为Canvas设置固定大小：

<ScrollViewer Grid.Column="1" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible">
    <Canvas x:Name="CanvasChart" Margin="20 20 20 20"
            Width="500" Height="400">
        <Canvas.Background >
            <ImageBrush Stretch="UniformToFill" ImageSource="D:'Praca'JanarMapy'JanarMapy'Maps'Montenegro_Map.png"/>
        </Canvas.Background>
        <Canvas.LayoutTransform>
            <ScaleTransform ScaleX="{Binding Path=Value, ElementName=zoomSlider}" 
                            ScaleY="{Binding Path=Value, ElementName=zoomSlider}"/>
        </Canvas.LayoutTransform>
    </Canvas>
</ScrollViewer>
相关文章：