イメージマークアップのためのWPFアプリケーションデザインズーム中に相対的なままになる

Question

イメージがロードされたInkCanvasを実装しようとしています。その画像の周りをズームしたりスクロールしたり、画像にマーキングを付けることができる必要があります。

画像のScaleTransformをスライダにバインドしようとすると、画像は拡大されますが、インクは拡大されません。

   <Image Name="ImageWork" HorizontalAlignment="Center"> 
        <Image.LayoutTransform> 
         <ScaleTransform ScaleX="{Binding ElementName=ZoomSlider,Path=Value}" ScaleY="{Binding ElementName=ZoomSlider,Path=Value}" /> 
        </Image.LayoutTransform> 
       </Image> 
      </InkCanvas> 
     </ScrollViewer> 

     <Slider DockPanel.Dock="Top" Name="ZoomSlider" Value="1" Minimum="0.3" Maximum="3" Height="20" ValueChanged="ZoomSlider_ValueChanged"/> 

私は、インク自体の規模を変更しようとしましたが、比較的同じ場所に滞在し、または同じアンカーポイント間でのズーミングないです：

private void ZoomSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e) 
    { 
     if (e.OldValue > 0d) 
     { 
      double factor = e.NewValue/e.OldValue; 
      Matrix scaleMat = new Matrix(); 

      scaleMat.ScaleAt(factor, factor, InkCanvasOnImage.ActualWidth/2, InkCanvasOnImage.ActualHeight/2); 
      InkCanvasOnImage.Strokes.Transform(scaleMat, false); 
     } 

    } 

行う方法私は自分のイメージとインクストロークを一緒にうまく合わせるようにしますか？

Answer 1

あなたは、グリッド内のあなたのイメージとInkcanvasを包む試すことができます。

<Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition Height=“0.9*/> 
      <RowDefinition Height=“0.1*/> 
     </Grid.RowDefinitions> 

    <ScrollViewer Grid.Row=“0”> 
     <Grid>  
      <InkCanvas />  
      <Image />   
      <Grid.LayoutTransform> 
       <ScaleTransform /> 
      </Grid.LayoutTransform> 
     </Grid> 
    <ScrollViewer> 

    <Slider Grid.Row=“1”/> 
    </Grid> 

あなたは相対的なズームを実現したいので、あなたができる画像上だけでなく、他のコンテンツに直接

Answer 2

をグリッドをズームすることができますズームについて以下のコードを参照してください

<ScrollViewer DockPanel.Dock="Top"> 
     <InkCanvas Name="InkCanvasOnImage" Height="203"> 
     <Canvas Height="203" Width="203"> 
      <Canvas.LayoutTransform> 
      <ScaleTransform ScaleX="{Binding ElementName=ZoomSlider,Path=Value}" 
       ScaleY="{Binding ElementName=ZoomSlider,Path=Value}"> 
       </ScaleTransform> 
      </Canvas.LayoutTransform> 
     <Canvas.Background> 
      <ImageBrush ImageSource="YourImageSource" /> 
     </Canvas.Background> 

     //your other contents goes here 

     </Canvas> 
    </InkCanvas> 
    </ScrollViewer> 
    <Slider DockPanel.Dock="Top" Name="ZoomSlider" Value="1" Minimum="0.3" Maximum="3" Height="20" />