Windows Ink vuruş verilerini depola ve al

Windows Ink'i destekleyen Windows uygulamaları, mürekkep vuruşlarını bir Mürekkep Seri Hale Dönüştürülmüş Biçimi (ISF) dosyasına seri hale dönüştürüp seri durumdan çıkarabilir. ISF dosyası, tüm mürekkep vuruşu özellikleri ve davranışları için ek meta verileri olan bir GIF görüntüsüdür. Mürekkep etkin olmayan uygulamalar, alfa kanal arka plan saydamlığı da dahil olmak üzere statik GIF görüntüsünü görüntüleyebilir.

Uyarı

ISF, mürekkeplerin en kompakt kalıcı gösterimidir. GIF dosyası gibi bir ikili belge biçimine eklenebilir veya doğrudan Pano'ya yerleştirilebilir.

Mürekkep SeriLeştirilmiş Biçim (ISF) Belirtimi Microsoft İndirme Merkezi'nden indirilebilir.

Portant API'leri: InkCanvas, Windows. UI. Input.Inking

Mürekkep vuruşlarını dosyaya kaydet

Burada, InkCanvas denetiminde çizilen mürekkep vuruşlarını nasıl kaydedebileceğinizi gösteriyoruz.

Serileştirilmiş Biçim (ISF) dosyasından mürekkep vuruşlarını kaydetme ve yükleme bölümünden bu örneği indirin

1. İlk olarak kullanıcı arabirimini ayarlayacağız.

   Kullanıcı arabiriminde "Kaydet", "Yükle" ve "Temizle" düğmeleri ve InkCanvas bulunur.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <StackPanel x:Name="HeaderPanel" Orientation="Horizontal" Grid.Row="0">
            <TextBlock x:Name="Header" 
                       Text="Basic ink store sample" 
                       Style="{ThemeResource HeaderTextBlockStyle}" 
                       Margin="10,0,0,0" />
            <Button x:Name="btnSave" 
                    Content="Save" 
                    Margin="50,0,10,0"/>
            <Button x:Name="btnLoad" 
                    Content="Load" 
                    Margin="50,0,10,0"/>
            <Button x:Name="btnClear" 
                    Content="Clear" 
                    Margin="50,0,10,0"/>
        </StackPanel>
        <Grid Grid.Row="1">
            <InkCanvas x:Name="inkCanvas" />
        </Grid>
    </Grid>

2. Daha sonra bazı temel mürekkep girişi davranışları ayarlarız.

   InkPresenter, hem kalemden hem de fareden gelen giriş verilerini mürekkep vuruşları (InputDeviceTypes) olarak yorumlayacak şekilde yapılandırılmış ve butonlardaki tıklama olayları için dinleyiciler tanımlanmıştır.

public MainPage()
    {
        this.InitializeComponent();

        // Set supported inking device types.
        inkCanvas.InkPresenter.InputDeviceTypes =
            Windows.UI.Core.CoreInputDeviceTypes.Mouse |
            Windows.UI.Core.CoreInputDeviceTypes.Pen;

        // Listen for button click to initiate save.
        btnSave.Click += btnSave_Click;
        // Listen for button click to initiate load.
        btnLoad.Click += btnLoad_Click;
        // Listen for button click to clear ink canvas.
        btnClear.Click += btnClear_Click;
    }

3. Son olarak, mürekkep, Kaydet butonunun tıklama olay işleyicisine kaydedilir.

   FileSavePicker kullanıcının hem dosyayı hem de mürekkep verilerinin kaydedildiği konumu seçmesine olanak tanır.

   Bir dosya seçildikten sonra IRandomAccessStream akışı ReadWrite olarak ayarlanır.

   Ardından SaveAsync çağrısı yaparak InkStrokeContainer tarafından yönetilen mürekkep vuruşlarını akışa seri hale getiriyoruz.

// Save ink data to a file.
    private async void btnSave_Click(object sender, RoutedEventArgs e)
    {
        // Get all strokes on the InkCanvas.
        IReadOnlyList<InkStroke> currentStrokes = inkCanvas.InkPresenter.StrokeContainer.GetStrokes();

        // Strokes present on ink canvas.
        if (currentStrokes.Count > 0)
        {
            // Let users choose their ink file using a file picker.
            // Initialize the picker.
            Windows.Storage.Pickers.FileSavePicker savePicker = 
                new Windows.Storage.Pickers.FileSavePicker();
            savePicker.SuggestedStartLocation = 
                Windows.Storage.Pickers.PickerLocationId.DocumentsLibrary;
            savePicker.FileTypeChoices.Add(
                "GIF with embedded ISF", 
                new List<string>() { ".gif" });
            savePicker.DefaultFileExtension = ".gif";
            savePicker.SuggestedFileName = "InkSample";

            // Show the file picker.
            Windows.Storage.StorageFile file = 
                await savePicker.PickSaveFileAsync();
            // When chosen, picker returns a reference to the selected file.
            if (file != null)
            {
                // Prevent updates to the file until updates are 
                // finalized with call to CompleteUpdatesAsync.
                Windows.Storage.CachedFileManager.DeferUpdates(file);
                // Open a file stream for writing.
                IRandomAccessStream stream = await file.OpenAsync(Windows.Storage.FileAccessMode.ReadWrite);
                // Write the ink strokes to the output stream.
                using (IOutputStream outputStream = stream.GetOutputStreamAt(0))
                {
                    await inkCanvas.InkPresenter.StrokeContainer.SaveAsync(outputStream);
                    await outputStream.FlushAsync();
                }
                stream.Dispose();

                // Finalize write so other apps can update file.
                Windows.Storage.Provider.FileUpdateStatus status =
                    await Windows.Storage.CachedFileManager.CompleteUpdatesAsync(file);

                if (status == Windows.Storage.Provider.FileUpdateStatus.Complete)
                {
                    // File saved.
                }
                else
                {
                    // File couldn't be saved.
                }
            }
            // User selects Cancel and picker returns null.
            else
            {
                // Operation cancelled.
            }
        }
    }

Uyarı

GIF, mürekkep verilerini kaydetmek için desteklenen tek dosya biçimidir. Ancak , LoadAsync yöntemi (sonraki bölümde gösterilmiştir) geriye dönük uyumluluk için ek biçimleri destekler.

Bir dosyadan mürekkep vuruşlarını yükleme

Burada, bir dosyadan mürekkep vuruşlarını nasıl yükleyip ve InkCanvas denetiminde işleyebileceğinizi göstereceğiz.

Serileştirilmiş Biçim (ISF) dosyasından mürekkep vuruşlarını kaydetme ve yükleme bölümünden bu örneği indirin

1. İlk olarak kullanıcı arabirimini ayarlayacağız.

   Kullanıcı arabiriminde "Kaydet", "Yükle" ve "Temizle" düğmeleri ve InkCanvas bulunur.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <StackPanel x:Name="HeaderPanel" Orientation="Horizontal" Grid.Row="0">
            <TextBlock x:Name="Header" 
                       Text="Basic ink store sample" 
                       Style="{ThemeResource HeaderTextBlockStyle}" 
                       Margin="10,0,0,0" />
            <Button x:Name="btnSave" 
                    Content="Save" 
                    Margin="50,0,10,0"/>
            <Button x:Name="btnLoad" 
                    Content="Load" 
                    Margin="50,0,10,0"/>
            <Button x:Name="btnClear" 
                    Content="Clear" 
                    Margin="50,0,10,0"/>
        </StackPanel>
        <Grid Grid.Row="1">
            <InkCanvas x:Name="inkCanvas" />
        </Grid>
    </Grid>

2. Daha sonra bazı temel mürekkep girişi davranışları ayarlarız.

   InkPresenter, hem kalemden hem de fareden gelen giriş verilerini mürekkep vuruşları (InputDeviceTypes) olarak yorumlayacak şekilde yapılandırılmış ve butonlardaki tıklama olayları için dinleyiciler tanımlanmıştır.

public MainPage()
    {
        this.InitializeComponent();

        // Set supported inking device types.
        inkCanvas.InkPresenter.InputDeviceTypes =
            Windows.UI.Core.CoreInputDeviceTypes.Mouse |
            Windows.UI.Core.CoreInputDeviceTypes.Pen;

        // Listen for button click to initiate save.
        btnSave.Click += btnSave_Click;
        // Listen for button click to initiate load.
        btnLoad.Click += btnLoad_Click;
        // Listen for button click to clear ink canvas.
        btnClear.Click += btnClear_Click;
    }

3. Son olarak, yükle düğmesinin tıklama olayı işleyicisine mürekkep yükleyeceğiz .

   FileOpenPicker kullanıcının hem dosyayı hem de kaydedilen mürekkep verilerinin nereden alınacağı konumu seçmesine olanak tanır.

   Bir dosya seçildikten sonra, bir IRandomAccessStream akışı Read modunda açılır.

   Ardından LoadAsync öğesini çağırarak kaydedilen mürekkep vuruşlarını okuyup seri durumdan çıkararak InkStrokeContainer içine yükleriz. Vuruşların InkStrokeContainer'a yüklenmesi, InkPresenter'ın bunları hemen InkCanvas üzerinde işlemeye başlayacağı anlamına gelir.

   Uyarı

   InkStrokeContainer içindeki tüm mevcut vuruşlar, yeni vuruşlar yüklenmeden önce temizlenir.

// Load ink data from a file.
private async void btnLoad_Click(object sender, RoutedEventArgs e)
{
    // Let users choose their ink file using a file picker.
    // Initialize the picker.
    Windows.Storage.Pickers.FileOpenPicker openPicker =
        new Windows.Storage.Pickers.FileOpenPicker();
    openPicker.SuggestedStartLocation =
        Windows.Storage.Pickers.PickerLocationId.DocumentsLibrary;
    openPicker.FileTypeFilter.Add(".gif");
    // Show the file picker.
    Windows.Storage.StorageFile file = await openPicker.PickSingleFileAsync();
    // User selects a file and picker returns a reference to the selected file.
    if (file != null)
    {
        // Open a file stream for reading.
        IRandomAccessStream stream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);
        // Read from file.
        using (var inputStream = stream.GetInputStreamAt(0))
        {
            await inkCanvas.InkPresenter.StrokeContainer.LoadAsync(inputStream);
        }
        stream.Dispose();
    }
    // User selects Cancel and picker returns null.
    else
    {
        // Operation cancelled.
    }
}

Uyarı

GIF, mürekkep verilerini kaydetmek için desteklenen tek dosya biçimidir. Ancak , LoadAsync yöntemi geriye dönük uyumluluk için aşağıdaki biçimleri destekler.

Biçim	Açıklama
InkSerializedFormat	ISF kullanılarak kalıcı hale getirilen mürekkebi tanımlar. Bu, mürekkep en kompakt kalıcı gösterimidir. İkili belge biçimine eklenebilir veya doğrudan Pano'ya yerleştirilebilir.
Base64InkSerializedFormat	ISF'yi base64 akışı olarak kodlayarak kalıcı hale getirilen mürekkebi belirtir. Bu biçim, mürekkep bir XML veya HTML dosyasında doğrudan kodlanabilmesi için sağlanır.
Gif	Dosyaya eklenmiş meta veriler olarak ISF içeren bir GIF dosyası kullanılarak kalıcı hale gelen mürekkep belirtir. Bu, mürekkep etkin olmayan uygulamalarda mürekkep görüntülenmesini ve mürekkep etkin bir uygulamaya geri döndüğünde tam mürekkep doğruluğunu korumasını sağlar. Bu biçim, bir HTML dosyası içindeki mürekkep içeriğini taşırken ve mürekkep ve mürekkep olmayan uygulamalar tarafından kullanılabilir hale getirmek için idealdir.
Base64Gif	Base64 ile kodlanmış bir güçlendirilmiş GIF kullanarak kalıcı hale getirilen mürekkebi belirtir. Bu biçim, mürekkep daha sonra görüntüye dönüştürülmek üzere doğrudan XML veya HTML dosyasında kodlanacaksa sağlanır. Bunun olası bir kullanımı, tüm mürekkep bilgilerini içerecek şekilde oluşturulmuş bir XML biçimindedir ve Genişletilebilir Stil Sayfası Dil Dönüştürmeleri (XSLT) aracılığıyla HTML oluşturmak için kullanılır.

Panoya mürekkep vuruşlarını kopyalayıp yapıştırın

Burada, uygulamalar arasında mürekkep vuruşlarını aktarmak için panonun nasıl kullanılacağını göstereceğiz.

Pano işlevselliğini desteklemek için yerleşik InkStrokeContainer kesme ve kopyalama komutları bir veya daha fazla mürekkep vuruşunun seçilmesini gerektirir.

Bu örnekte, kalem varil düğmesi (veya sağ fare düğmesi) ile giriş değiştirildiğinde vuruş seçimini etkinleştireceğiz. Vuruş seçiminin nasıl uygulandığına ilişkin eksiksiz bir örnek için bkz. Kalem ve ekran kalemi etkileşimlerinde gelişmiş işleme için geçiş girişi.

Panodaki mürekkep vuruşlarını kaydet ve yükle örneğinden bu örneği indirin.

1. İlk olarak kullanıcı arabirimini ayarlayacağız.

   Kullanıcı arabiriminde "Kes", "Kopyala", "Yapıştır" ve "Temizle" düğmelerinin yanı sıra InkCanvas ve seçim tuvali bulunur.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <StackPanel x:Name="HeaderPanel" Orientation="Horizontal" Grid.Row="0">
            <TextBlock x:Name="tbHeader" 
                       Text="Basic ink store sample" 
                       Style="{ThemeResource HeaderTextBlockStyle}" 
                       Margin="10,0,0,0" />
            <Button x:Name="btnCut" 
                    Content="Cut" 
                    Margin="20,0,10,0"/>
            <Button x:Name="btnCopy" 
                    Content="Copy" 
                    Margin="20,0,10,0"/>
            <Button x:Name="btnPaste" 
                    Content="Paste" 
                    Margin="20,0,10,0"/>
            <Button x:Name="btnClear" 
                    Content="Clear" 
                    Margin="20,0,10,0"/>
        </StackPanel>
        <Grid x:Name="gridCanvas" Grid.Row="1">
            <!-- Canvas for displaying selection UI. -->
            <Canvas x:Name="selectionCanvas"/>
            <!-- Inking area -->
            <InkCanvas x:Name="inkCanvas"/>
        </Grid>
    </Grid>

2. Daha sonra bazı temel mürekkep girişi davranışları ayarlarız.

   InkPresenter, hem kalemden hem de fareden gelen giriş verilerini mürekkep vuruşları (InputDeviceTypes) olarak yorumlamak için yapılandırılır. Düğmelerdeki tıklama olaylarının yanı sıra seçim işlevselliği için işaretçi ve çizgi olayları için dinleyiciler de burada tanımlanır.

   Vuruş seçiminin nasıl uygulandığına ilişkin eksiksiz bir örnek için bkz. Kalem ve ekran kalemi etkileşimlerinde gelişmiş işleme için geçiş girişi.

public MainPage()
    {
        this.InitializeComponent();

        // Set supported inking device types.
        inkCanvas.InkPresenter.InputDeviceTypes =
            Windows.UI.Core.CoreInputDeviceTypes.Mouse |
            Windows.UI.Core.CoreInputDeviceTypes.Pen;

        // Listen for button click to cut ink strokes.
        btnCut.Click += btnCut_Click;
        // Listen for button click to copy ink strokes.
        btnCopy.Click += btnCopy_Click;
        // Listen for button click to paste ink strokes.
        btnPaste.Click += btnPaste_Click;
        // Listen for button click to clear ink canvas.
        btnClear.Click += btnClear_Click;

        // By default, the InkPresenter processes input modified by 
        // a secondary affordance (pen barrel button, right mouse 
        // button, or similar) as ink.
        // To pass through modified input to the app for custom processing 
        // on the app UI thread instead of the background ink thread, set 
        // InputProcessingConfiguration.RightDragAction to LeaveUnprocessed.
        inkCanvas.InkPresenter.InputProcessingConfiguration.RightDragAction =
            InkInputRightDragAction.LeaveUnprocessed;

        // Listen for unprocessed pointer events from modified input.
        // The input is used to provide selection functionality.
        inkCanvas.InkPresenter.UnprocessedInput.PointerPressed +=
            UnprocessedInput_PointerPressed;
        inkCanvas.InkPresenter.UnprocessedInput.PointerMoved +=
            UnprocessedInput_PointerMoved;
        inkCanvas.InkPresenter.UnprocessedInput.PointerReleased +=
            UnprocessedInput_PointerReleased;

        // Listen for new ink or erase strokes to clean up selection UI.
        inkCanvas.InkPresenter.StrokeInput.StrokeStarted +=
            StrokeInput_StrokeStarted;
        inkCanvas.InkPresenter.StrokesErased +=
            InkPresenter_StrokesErased;
    }

3. Son olarak, vuruş seçimi desteği eklendikten sonra Kes, Kopyala ve Yapıştır düğmelerinin tıklama olayı işleyicilerinde pano işlevselliğini uygularız.

   Kesme işlemi için ilk olarak InkStrokeContainer üzerinde CopySelectedToClipboard çağrısı yapacağız ve ardından InkPresenter'ı kullanacağız.

   Ardından mürekkep tuvalinden vuruşları kaldırmak için DeleteSelected çağrısı yapıyoruz.

   Son olarak, seçim tuvalinden tüm seçim çizgilerini sileriz.

private void btnCut_Click(object sender, RoutedEventArgs e)
    {
        inkCanvas.InkPresenter.StrokeContainer.CopySelectedToClipboard();
        inkCanvas.InkPresenter.StrokeContainer.DeleteSelected();
        ClearSelection();
    }

// Clean up selection UI.
    private void ClearSelection()
    {
        var strokes = inkCanvas.InkPresenter.StrokeContainer.GetStrokes();
        foreach (var stroke in strokes)
        {
            stroke.Selected = false;
        }
        ClearDrawnBoundingRect();
    }

    private void ClearDrawnBoundingRect()
    {
        if (selectionCanvas.Children.Any())
        {
            selectionCanvas.Children.Clear();
            boundingRect = Rect.Empty;
        }
    }

Kopyalama için CopySelectedToClipboard'ı InkStrokeContainer'da InkPresenter üzerinde çağırıyoruz.

private void btnCopy_Click(object sender, RoutedEventArgs e)
    {
        inkCanvas.InkPresenter.StrokeContainer.CopySelectedToClipboard();
    }

Yapıştırma için, panodaki içeriğin mürekkep tuvaline yapıştırılabilmesini sağlamak için CanPasteFromClipboard'u çağırırız.

Bu durumda PasteFromClipboard fonksiyonunu çağırarak pano mürekkep vuruşlarını InkStrokeContainer içine ekleriz, bu da InkPresenter tarafından mürekkep tuvaline vuruşları işler.

private void btnPaste_Click(object sender, RoutedEventArgs e)
    {
        if (inkCanvas.InkPresenter.StrokeContainer.CanPasteFromClipboard())
        {
            inkCanvas.InkPresenter.StrokeContainer.PasteFromClipboard(
                new Point(0, 0));
        }
        else
        {
            // Cannot paste from clipboard.
        }
    }

İlgili makaleler

• Kalem ve ekran kalemi etkileşimleri

Konu örnekleri

• Mürekkep SeriLeştirilmiş Biçim (ISF) dosyasından mürekkep vuruşlarını kaydetme ve yükleme
• Mürekkep vuruşlarını panodan kaydet ve yükle

Diğer örnekler

• Simple mürekkep örneği (C#/C++)
• Karmaşık mürekkep örneği (C++)
• Ink örneği (JavaScript)
• Başlarken Öğreticisi: Windows uygulamanızda mürekkep desteği
• Boyama kitabı örneği
• Aile notları örneği