Öğretici: Windows uygulamanızda mürekkep desteği

Surface Pen (Microsoft Store) adresinden satın alınabilir).

Bu öğretici, Windows Mürekkeple yazma ve çizmeyi destekleyen temel bir Windows uygulaması oluşturma adımlarını gösterir. Her adımda ele alınan çeşitli özellikleri ve ilişkili Windows Ink API'lerini göstermek için GitHub (bkz. Örnek kodu) indirebileceğiniz örnek bir uygulamadan kod parçacıkları kullanırız (bkz. Windows Ink platformunun bileşenleri).

Aşağıdakilere odaklanıyoruz:

• Temel mürekkep desteği ekleme
• Mürekkep araç çubuğu ekleme
• El yazısı tanımayı destekleme
• Temel şekil tanımayı destekleme
• Mürekkebi kaydetme ve yükleme

Bu özelliklerin uygulanması hakkında daha fazla ayrıntı için bkz. Windows uygulamalarında kalem etkileşimleri ve Windows Ink.

Introduction

Windows Mürekkep ile müşterilerinize hızlı, el yazısı notlardan ek açıklamalardan beyaz tahta tanıtımlarına ve mimari ve mühendislik çizimlerinden kişisel başyapıtlara kadar neredeyse tüm kalem ve kağıt deneyiminin dijital eşdeğerini sağlayabilirsiniz.

Önkoşullar

• Windows 10 veya Windows 11 geçerli sürümünü çalıştıran bir bilgisayar (veya sanal makine)
• Visual Studio, UWP geliştirme için yapılandırıldı.
• [İSTEĞE BAĞLı] Dijital kalem ve bu dijital kalemden girişi destekleyen ekranlı bir bilgisayar.

Uyarı

Windows Mürekkep, en iyi Windows Mürekkep deneyimi için fare ve dokunmayla çizimi desteklese de (bu öğreticinin 3. adımında bunun nasıl yapılacağını göstereceğiz), ancak dijital kaleminiz ve bu dijital kalemden girişi destekleyen ekranlı bir bilgisayarınız olmasını öneririz.

Örnek kodu

Bu öğretici boyunca, ele alınan kavramları ve işlevleri göstermek için örnek bir mürekkep uygulaması kullanacağız.

bu Visual Studio örneği ve kaynak kodunu GitHub adresinden windows-appsample-get-started-ink örneğinden indirin:

1. Yeşil Kopyala veya indir düğmesini seçin
   
2. GitHub hesabınız varsa Open in Visual Studio
3. GitHub hesabınız yoksa veya projenin yalnızca yerel bir kopyasını istiyorsanız, Zip indir'i seçin (en son güncelleştirmeleri indirmek için düzenli olarak yeniden denetlemeniz gerekir)

Önemli

Örnekteki kodun çoğu yorum satırı olarak ayarlanmıştır. Her adımda ilerlediğimizde, kodun çeşitli bölümlerini yorum satırından çıkarmanız istenir. Visual Studio kod satırlarını vurgulayın ve CTRL-K ve ardından CTRL-U tuşlarına basın.

Windows Ink platformunun bileşenleri

Bu nesneler, Windows uygulamalar için mürekkep oluşturma deneyiminin büyük bir kısmını sağlar.

Bileşen	Açıklama
InkCanvas	Kalemden gelen tüm girişleri varsayılan olarak mürekkep vuruşu veya silme işlemi olarak alan ve görüntüleyen bir XAML UI platformu denetimi.
InkPresenter	InkCanvas denetimiyle birlikte örneklenen bir arka plan kod nesnesi (InkCanvas.InkPresenter özelliği aracılığıyla). Bu nesne , InkCanvas tarafından kullanıma sunulan tüm varsayılan mürekkep oluşturma işlevlerinin yanı sıra ek özelleştirme ve kişiselleştirme için kapsamlı bir API kümesi sağlar.
InkToolbar	İlişkili bir InkCanvas'ta mürekkeple ilgili özellikleri etkinleştiren özelleştirilebilir ve genişletilebilir düğme koleksiyonunu içeren bir XAML UI platform denetimi.
IInkD2DRenderer Bu işlevi burada ele almayacağız, daha fazla bilgi için bkz. Complex mürekkep örneği.	Mürekkep vuruşlarının, varsayılan InkCanvas denetimi yerine Evrensel Windows uygulamasının belirlenen Direct2D aygıt bağlamında işlenmesini mümkün kılar.

1. Adım: Örneği çalıştırma

RadialController örnek uygulamasını indirdikten sonra çalıştığını doğrulayın:

1. Örnek projeyi Visual Studio açın.

2. Çözüm Platformları açılan listesini Arm olmayan bir seçenek olarak ayarlayın.

3. Derlemek, dağıtmak ve çalıştırmak için F5 tuşuna basın.

   Uyarı

   Alternatif olarak Hata Ayıklama>Başlat hata ayıklama menü öğesini veya burada gösterilen Yerel Makine Çalıştırma düğmesini seçebilirsiniz.

Uygulama penceresi açılır ve birkaç saniye boyunca bir tanıtım ekranı göründükten sonra ilk ekranı görürsünüz.

Tamam, şimdi bu öğreticinin geri kalanında kullanacağımız temel Windows uygulamasına sahibiz. Aşağıdaki adımlarda mürekkep işlevimizi ekleyeceğiz.

2. Adım: Temel mürekkep oluşturma özelliğini desteklemek için InkCanvas kullanma

Belki de uygulamanın ilk biçiminde kalemle herhangi bir şey çizmenize izin vermediğini fark etmiş olabilirsiniz (bununla birlikte, uygulamayla etkileşim kurmak için kalemi standart bir işaretçi cihazı olarak kullanabilirsiniz).

Şimdi bu adımda bu küçük eksiklikleri düzeltelim.

Temel mürekkep oluşturma işlevselliği eklemek için uygulamanızın uygun sayfasına bir InkCanvas denetimi yerleştirmeniz gerekir.

Uyarı

InkCanvas, alt öğeleri otomatik olarak boyutlandıran bir öğenin alt öğesi olmadığı sürece, varsayılan olarak sıfır yükseklik ve genişlik özelliklerine sahiptir.

Örnekte:

1. MainPage.xaml.cs dosyasını açın.
2. Bu adımın başlığıyla işaretlenmiş kodu bulun ("// Adım 2: Temel mürekkep oluşturma özelliğini desteklemek için InkCanvas kullanma").
3. Aşağıdaki satırları yorumdan çıkarın. (Bu başvurular, sonraki adımlarda kullanılan işlevler için gereklidir).

    using Windows.UI.Input.Inking;
    using Windows.UI.Input.Inking.Analysis;
    using Windows.UI.Xaml.Shapes;
    using Windows.Storage.Streams;

4. MainPage.xaml dosyasını açın.
5. Bu adımın başlığıyla işaretlenmiş kodu bulun ("<-- Adım 2: InkCanvas ile temel mürekkep oluşturma -->").
6. Aşağıdaki satırın yorumunu kaldırın.

    <InkCanvas x:Name="inkCanvas" />

Hepsi bu kadar!

Şimdi uygulamayı yeniden çalıştırın. Devam edin ve karalayın, adınızı yazın veya (ayna tutuyorsanız veya çok iyi bir hafızanız varsa) kendi portrenizi çizin.

3. Adım: Dokunma ve fare ile mürekkep desteği

Varsayılan olarak, mürekkeplerin yalnızca kalem girişi için desteklendiğini fark edeceksiniz. Parmağınızla, farenizle veya dokunmatik yüzeyinizle yazmaya veya çizmeye çalışırsanız hayal kırıklığına uğrarsınız.

Üzüntüyü neşeye çevirmek için ikinci bir kod satırı eklemeniz gerekir. Bu kez, InkCanvas'ı tanımladığınız XAML dosyasının kod arka planındadır.

Bu adımda, InkCanvas'ınızdaki mürekkep girişinin (standart ve değiştirilmiş) giriş, işleme ve işleme işlemlerinin daha ayrıntılı bir şekilde yönetilmesini sağlayan InkPresenter nesnesini tanıtacağız.

Uyarı

Standart mürekkep girişi (kalem ucu veya silgi ucu/düğmesi), kalem gövde düğmesi, sağ fare düğmesi veya benzer bir mekanizma gibi ikincil donanım özelliğiyle değişmez.

Fare ve dokunmatik mürekkep oluşturmayı etkinleştirmek için InkPresenter'ınInputDeviceTypes özelliğini istediğiniz CoreInputDeviceTypes değerlerinin birleşimine ayarlayın.

Örnekte:

1. MainPage.xaml.cs dosyasını açın.
2. Bu adımın başlığıyla işaretlenmiş kodu bulun ("// Adım 3: Dokunma ve fare ile mürekkep oluşturma desteği").
3. Aşağıdaki satırları yorumdan çıkarın.

    inkCanvas.InkPresenter.InputDeviceTypes =
        Windows.UI.Core.CoreInputDeviceTypes.Mouse | 
        Windows.UI.Core.CoreInputDeviceTypes.Touch | 
        Windows.UI.Core.CoreInputDeviceTypes.Pen;

Uygulamayı yeniden çalıştırdığınızda, tüm bilgisayarda parmakla boyama hayallerinizin gerçek olduğunu göreceksiniz!

Uyarı

Giriş cihazı türlerini belirtirken, bu özelliğin ayarlanması varsayılan InkCanvas ayarını geçersiz kıldığından, her bir giriş türü (kalem dahil) için desteği belirtmeniz gerekir.

4. Adım: Mürekkep araç çubuğu ekleme

InkToolbar, mürekkeple ilgili özellikleri etkinleştirmek için özelleştirilebilir ve genişletilebilir düğme koleksiyonu sağlayan bir UWP platform denetimidir.

InkToolbar varsayılan olarak, kullanıcıların kalem, kalem, vurgulayıcı veya silgi arasında hızlı bir şekilde seçim yapmasına olanak tanıyan temel bir düğme kümesi içerir. Bu düğmelerden herhangi biri bir kalıpla (cetvel veya protraktör) birlikte kullanılabilir. Kalem, kurşunkalem ve vurgulayıcı düğmelerinin her biri, mürekkep rengini ve vuruş boyutunu seçmek için bir açılır menü sunar.

Mürekkep oluşturma uygulamasına varsayılan bir InkToolbar eklemek için, bunu InkCanvas ile aynı sayfaya yerleştirmeniz ve iki denetimi ilişkilendirmeniz gerekir.

Örnekte

1. MainPage.xaml dosyasını açın.
2. Bu adımın başlığıyla işaretlenmiş kodu bulun ("<-- 4. Adım: Mürekkep araç çubuğu ekleme -->").
3. Aşağıdaki satırları yorumdan çıkarın.

    <InkToolbar x:Name="inkToolbar" 
                        VerticalAlignment="Top" 
                        Margin="10,0,10,0"
                        TargetInkCanvas="{x:Bind inkCanvas}">
    </InkToolbar>

Uyarı

Kullanıcı arabirimini ve kodu olabildiğince düzenli ve basit tutmak için temel bir Grid düzeni kullanır ve InkToolbar'ı, bir grid satırında InkCanvas'tan sonra bildiririz. InkCanvas'dan önce bildirirseniz, InkToolbar önce işlenir, bu da tuvalin altında kalmasına ve kullanıcıya erişilememesine neden olur.

Şimdi InkToolbar'ı görmek için uygulamayı yeniden çalıştırın ve bazı araçları deneyin.

Sınama: Özel düğme ekleme

Aşağıda özel bir InkToolbar (Windows Ink Çalışma Alanı'ndaki Taslak Sayfası'ndan) bir örnek verilmiştir.

InkToolbar özelleştirme hakkında daha fazla ayrıntı için bkz. Windows uygulama mürekkep oluşturma uygulamasına InkToolbar ekleme.

5. Adım: El yazısı tanımayı destekleme

Artık uygulamanızda yazı yazıp çizim yapabileceğinize göre, şimdi bu karalamalarla yararlı bir şeyler yapmaya çalışalım.

Bu adımda, Windows Mürekkep'in el yazısı tanıma özelliklerini kullanarak yazdıklarını çözmeye çalışacağız.

Uyarı

El yazısı tanıma, Kalem ve Windows Mürekkebi ayarları aracılığıyla geliştirilebilir.

1. Başlat menüsünü açın ve Ayarlar'ı seçin.
2. Ayarlar ekranından Cihazlar>Kalem ve Windows Mürekkebi öğesini seçin.
3. El Yazısı Kişiselleştirme iletişim kutusunu açmak için El yazımı tanıyın'ı seçin.

Örnekte:

1. MainPage.xaml dosyasını açın.
2. Bu adımın başlığıyla işaretlenmiş kodu bulun ("<-- 5. Adım: El yazısı tanımayı destekleme -->").
3. Aşağıdaki satırları yorumdan çıkarın.

    <Button x:Name="recognizeText" 
            Content="Recognize text"  
            Grid.Row="0" Grid.Column="0"
            Margin="10,10,10,10"
            Click="recognizeText_ClickAsync"/>
    <TextBlock x:Name="recognitionResult" 
                Text="Recognition results: "
                VerticalAlignment="Center" 
                Grid.Row="0" Grid.Column="1"
                Margin="50,0,0,0" />

4. MainPage.xaml.cs dosyasını açın.
5. Bu adımın başlığıyla işaretlenmiş kodu bulun ("5. Adım: El yazısı tanımayı destekleme").
6. Aşağıdaki satırları yorumdan çıkarın.

• Bunlar, bu adım için gereken genel değişkenlerdir.

    InkAnalyzer analyzerText = new InkAnalyzer();
    IReadOnlyList<InkStroke> strokesText = null;
    InkAnalysisResult resultText = null;
    IReadOnlyList<IInkAnalysisNode> words = null;

• Bu, tanıma işlemini yaptığımız Metni tanı düğmesinin işleyicisidir.

    private async void recognizeText_ClickAsync(object sender, RoutedEventArgs e)
    {
        strokesText = inkCanvas.InkPresenter.StrokeContainer.GetStrokes();
        // Ensure an ink stroke is present.
        if (strokesText.Count > 0)
        {
            analyzerText.AddDataForStrokes(strokesText);

            resultText = await analyzerText.AnalyzeAsync();

            if (resultText.Status == InkAnalysisStatus.Updated)
            {
                words = analyzerText.AnalysisRoot.FindNodes(InkAnalysisNodeKind.InkWord);
                foreach (var word in words)
                {
                    InkAnalysisInkWord concreteWord = (InkAnalysisInkWord)word;
                    foreach (string s in concreteWord.TextAlternates)
                    {
                        recognitionResult.Text += s;
                    }
                }
            }
            analyzerText.ClearDataForAllStrokes();
        }
    }

7. Uygulamayı yeniden çalıştırın, bir şey yazın ve ardından Metni tanı düğmesine tıklayın
8. Tanıma sonuçları düğmenin yanında görüntülenir

Sınama 1: Uluslararası tanıma

Windows Mürekkep, Windows tarafından desteklenen dillerin birçoğu için metin tanımayı destekler. Her dil paketi, dil paketiyle birlikte yüklenebilen bir el yazısı tanıma altyapısı içerir.

Yüklü el yazısı tanıma altyapılarını sorgulayarak belirli bir dili hedefle.

Uluslararası el yazısı tanıma hakkında daha fazla bilgi için Windows Mürekkep vuruşlarını metin olarak tanıma bölümüne bakın.

Sınama 2: Dinamik tanıma

Bu öğreticide, tanımayı başlatmak için bir düğmeye basılması gerekir. Ayrıca, temel bir zamanlama işlevi kullanarak dinamik tanıma da gerçekleştirebilirsiniz.

Dinamik tanıma hakkında daha fazla bilgi için bkz. Windows mürekkep vuruşlarını metin olarak tanıma.

6. Adım: Şekilleri tanıma

Şimdi el yazısı notlarınızı biraz daha okunaklı bir şeye dönüştürebilirsiniz. Peki ya sabah Flowcharters Anonim toplantınızdan gelen titrek, kafeinli karalamalar?

Uygulamanız mürekkep analizini kullanarak aşağıdakiler de dahil olmak üzere bir dizi temel şekli tanıyabilir:

• Circle
• Elmas
• Çizim
• Elips
• Eşkenar Üçgen
• Altıgen
• İkizkenar Üçgen
• Paralelkenar
• Pentagon
• Dörtgen
• Dikdörtgen
• RightTriangle
• Square
• Yamuk
• Triangle

Bu adımda, Windows Mürekkep'in şekil tanıma özelliklerini kullanarak karalaçlarınızı temizlemeye çalışacağız.

Bu örnekte mürekkep vuruşlarını yeniden çizmeye çalışmıyoruz (ancak bu mümkündür). Bunun yerine, InkCanvas'ın altına özgün mürekkepten türetilen eşdeğer Elipse veya Çokgen nesneler çizdiğimiz standart bir tuval ekleriz. Ardından ilgili mürekkep vuruşlarını sileriz.

Örnekte:

1. MainPage.xaml dosyasını açma
2. Bu adımın başlığıyla işaretlenmiş kodu bulun ("<-- Adım 6: Şekilleri tanıma -->")
3. Bu satırı yorumdan çıkarın.

   <Canvas x:Name="canvas" />

   And these lines.

    <Button Grid.Row="1" x:Name="recognizeShape" Click="recognizeShape_ClickAsync"
        Content="Recognize shape" 
        Margin="10,10,10,10" />

4. MainPage.xaml.cs dosyasını açma
5. Bu adımın başlığıyla işaretlenmiş kodu bulun ("// 6. Adım: Şekilleri tanıma")
6. Şu satırların açıklamalarını kaldırın:

    private async void recognizeShape_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

    private void DrawEllipse(InkAnalysisInkDrawing shape)
    {
        ...
    }

    private void DrawPolygon(InkAnalysisInkDrawing shape)
    {
        ...
    }

7. Uygulamayı çalıştırın, bazı şekiller çizin ve Şekli tanı düğmesine tıklayın

İşte dijital peçeteden gelen ilkel akış çizelgesi örneği.

Şekil tanımadan sonra aynı akış çizelgesi aşağıdadır.

7. Adım: Mürekkep kaydetme ve yükleme

Karalama işlemini bitirdiniz ve gördüklerinizi beğendiniz ama birkaç şeyi daha sonra değiştirmek isteyebileceğinizi mi düşünüyorsunuz? Mürekkep vuruşlarınızı bir Mürekkep Serileştirilmiş Biçim (ISF) dosyasına kaydedebilir ve ilham geldiğinde düzenlemek üzere yükleyebilirsiniz.

ISF dosyası, mürekkep vuruşu özelliklerini ve davranışlarını açıklayan ek meta veriler içeren temel bir GIF görüntüsüdür. Mürekkep etkin olmayan uygulamalar ek meta verileri yoksayabilir ve temel GIF görüntüsünü (alfa kanal arka plan saydamlığı dahil) yüklemeye devam edebilir.

Uyarı

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

Bu adımda, mürekkep araç çubuğunun yanında bulunan Kaydet ve Yükle düğmelerini bağlayacağız.

Örnekte:

1. MainPage.xaml dosyasını açın.
2. Bu adımın başlığıyla işaretlenmiş kodu bulun ("<-- Adım 7: Mürekkep kaydetme ve yükleme -->").
3. Aşağıdaki satırları yorumdan çıkarın.

    <Button x:Name="buttonSave" 
            Content="Save" 
            Click="buttonSave_ClickAsync"
            Width="100"
            Margin="5,0,0,0"/>
    <Button x:Name="buttonLoad" 
            Content="Load"  
            Click="buttonLoad_ClickAsync"
            Width="100"
            Margin="5,0,0,0"/>

4. MainPage.xaml.cs dosyasını açın.
5. Bu adımın başlığıyla işaretlenmiş kodu bulun ("// Adım 7: Mürekkep kaydetme ve yükleme").
6. Aşağıdaki satırları yorumdan çıkarın.

    private async void buttonSave_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

    private async void buttonLoad_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

7. Uygulamayı çalıştırın ve bir şeyler çizin.
8. Kaydet düğmesini seçin ve çiziminizi kaydedin.
9. Mürekkeli silin veya uygulamayı yeniden başlatın.
10. Yükle düğmesini seçin ve az önce kaydettiğiniz mürekkep dosyasını açın.

Sınama: Mürekkep vuruşlarını kopyalayıp yapıştırmak için panoyu kullanma

Windows Ink, mürekkep vuruşlarını panoya kopyalamayı ve panodan yapıştırmayı da destekler.

Panoyu mürekkeple kullanma hakkında daha fazla bilgi için bkz. Windows Ink vuruş verilerini saklama ve alma.

Özet

Tebrikler, Input: Windows uygulamanızda mürekkep desteği öğreticisini tamamladınız! Windows uygulamalarınızda mürekkep desteklemek için gereken temel kodu ve Windows Ink platformu tarafından desteklenen daha zengin kullanıcı deneyimlerinden bazılarını nasıl sağlayabileceklerini gösterdik.

İlgili makaleler

• Windows uygulamalarında Kalem etkileşimleri ve Windows Ink

Örnekleri

• Mürekkep analizi örneği (temel) (C#)
• Mürekkep el yazısı tanıma örneği (C#)
• 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
• Mürekkep araç çubuğu konumu ve yönlendirme örneği (temel)
• Mürekkep araç çubuğu konumu ve yönlendirme örneği (dinamik)
• 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