用ImageBrush背景缩放画布

当我想用背景缩放Canvas时，它不能按我想要的方式工作。背景是相同的，只有Canvas的内容在缩放。但是，如果我将Canvas更改为InkCanvas，它可以很好地工作，但由于InkCanvas不支持MouseLeftButtonDown事件，因此我必须使用Canvas。用ImageBrush背景缩放画布

这是我的代码

<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>

来源

2012-02-14 Malv20

首先，你必须禁用自动拉伸背景图像刷上看到任何缩放效果：

<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你可以为画布设置一个固定大小的一种替代方案：

<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>

来源

2012-02-14 08:37:12 Clemens

感谢这个重播。我的主要目标是：首先将图像作为背景加载并将其调整到我的区域（画布）InkCanvas可以使用此效果（使用）。第二个选项可放大此区域（背景和内容）。我发布的代码以InkCanvas的方式工作。我更喜欢使用Canvas，它的工作方式有点不同，因为它不缩放图像，而只是Canvas的内容。 – Malv20 2012-02-14 10:05:18

请参阅编辑答案的替代方案。我认为你的初始方法使用InkCanvas的原因是它（而不是Canvas）具有预定义的初始大小，ImageBrush将缩放到该大小。 – Clemens 2012-02-14 10:42:33

它也不适用于预定义的初始大小，或者我可能做出某些事情。错误。你试过了吗？ – Malv20 2012-02-14 11:23:44

用ImageBrush背景缩放画布

回答

相关问题