PCを切り替えるときにInkCanvasの線が適切な境界線でレンダリングされない

Question

UWP InkCanvasを使用して1つのUWP Appをロードして保存ボタンを使用しています。私は1つのラップトップ上でアプリを使って描画を行い、インクをgif（+埋め込みisf）として保存し、gifファイルを別のラップトップに送り、それを試してみました。

同じアプリでこの別のラップトップでインクを開くと、画面に合わない場合と同じように、境界線に描画がクリッピングされます。おそらくラップトップの画面サイズが小さいためです。

InkCanvas全体をScrollviewerでカプセル化してサイズを変更しようとしましたが、描画がInkCanvasズームに従っているため、境界線で描画が残っています。 InkCanvasのレンダートランスフォームと同じです。また、インクをロードするときにStrokeContainerのコピー貼り付けメソッドを試しました。それはうまく動作せず、さらに、すべてのストロークをループして選択して貼り付ける必要があるため、かさばることがわかります。

私は、ラップトップの画面のサイズに関係なく、InkCanvas（推奨）またはStrokesのサイズを自動的にInkCanvas上に表示するように、自動的にサイズを変更する方法を検討しています。私はこれがデフォルトで起こることを期待していましたが、いくぶんそうではありません。私が使用するコードは非常にシンプルですが

は、私はスタートとして、それを提供します。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto" /> 
     <RowDefinition Height="*" /> 
    </Grid.RowDefinitions> 
    <Grid Background="White" Grid.Row="1"> 
     <InkCanvas x:Name="inkCanvas"/> 
    </Grid> 
    <StackPanel> 
      <Button Content="Load" Click="LoadButton_Click"/> 
      <Button Content="Save" Click="SaveButton_Click"/> 
    </StackPanel> 
</Grid> 


    private async void LoadButton_Click(object sender, RoutedEventArgs e) 
    { 
     FileOpenPicker openPicker = new FileOpenPicker(); 
     openPicker.FileTypeFilter.Clear(); 
     openPicker.FileTypeFilter.Add(".isf"); 
     openPicker.FileTypeFilter.Add(".gif"); 

     openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary; 

     StorageFile file = await openPicker.PickSingleFileAsync(); 

     if (file != null) 
     { 
      IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.Read); 

      using (var inputStream = stream.GetInputStreamAt(0)) 
      { 
       await inkCanvas.InkPresenter.StrokeContainer.LoadAsync(inputStream); 
      } 
      stream.Dispose(); 

    } 
    } 

Answer 1

StrokeContainer.SaveAsync()方法はGIFを作成します。私はそれがインクストロークデータをどのように保存しているかを正確にはわかりませんが、それはポイントのポイントと思われます。あなたのInkCanvasは親のGridに基づいて伸びているので、最終的な境界はスクリーンとスクリーン、さらにはサイズ変更されたUWPウィンドウでさえ異なります。

ストロークデータをリロードすると、生成されたポイントが正確に配置されます。それはあなたのために何かを変えることはありません。これは生データです。

データを別の場所に表示する場合は、ポイントに変換を適用できます。ここでは50％で、すべてのデータを縮小する方法の簡単なサンプルです：

var container = inkCanvas.InkPresenter.StrokeContainer; 
var strokes = container.GetStrokes(); 
var bounds = container.BoundingRect; 
var center = new Vector2((float)bounds.Left, (float)bounds.Top); 
var transform = Matrix3x2.CreateScale(.5f, .5f, center); 

foreach (var stroke in strokes) 
{ 
    stroke.PointTransform *= transform; 
} 

あなたはawait container.LoadAsync(inputStream)後にコードのスニペットを置くことができます。

出力の処理方法を決定する必要があります。それはあなたが望むユーザーエクスペリエンスに依存します。出力を拡大/縮小する場合は、上記のスニペットを使用してください。移動する場合は、Matrix3x2.CreateTranslation(...)を使用してください。