Aracılığıyla paylaş

Metin ve Grafikleri Tümleştirme

SkiaSharp grafikleri ile metin tümleştirmek için işlenen metin dizesinin boyutunu belirlemeyi öğrenin

Bu makalede metni ölçme, metni belirli bir boyuta ölçeklendirme ve metni diğer grafiklerle tümleştirme işlemleri gösterilmektedir:

Dikdörtgenlerle çevrili metin

Bu görüntüde yuvarlatılmış bir dikdörtgen de bulunur. SkiaSharp Canvas sınıfı, dikdörtgen çizme yöntemlerini ve DrawRoundRect yuvarlatılmış köşeleri olan bir dikdörtgen çizme yöntemlerini içerirDrawRect. Bu yöntemler dikdörtgenin bir değer olarak veya başka şekillerde SKRect tanımlanmasını sağlar.

Çerçeveli Metin sayfası, sayfadaki kısa bir metin dizesini ortalar ve yuvarlatılmış dikdörtgenlerden oluşan bir çerçeveyle çevreler. Sınıfı, FramedTextPage nasıl yapıldığını gösterir.

SkiaSharp'ta, metin ve yazı tipi özniteliklerini ayarlamak için sınıfını kullanırsınız SKPaint , ancak metnin işlenmiş boyutunu elde etmek için de kullanabilirsiniz. Aşağıdaki PaintSurface olay işleyicisinin başlangıcı iki farklı MeasureText yöntemi çağırır. İlk MeasureText çağrı basit string bir bağımsız değişkene sahiptir ve geçerli yazı tipi özniteliklerine göre metnin piksel genişliğini döndürür. Program daha sonra nesnenin SKPaint yeni TextSize bir özelliğini işlenen genişliğe, geçerli TextSize özelliğe ve görüntüleme alanının genişliğine göre hesaplar. Bu hesaplamanın amacı, metin dizesinin ekranın genişliğinin %90'ında işlenecek şekilde ayarlanmasıdır TextSize :

void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
    SKImageInfo info = args.Info;
    SKSurface surface = args.Surface;
    SKCanvas canvas = surface.Canvas;

    canvas.Clear();

    string str = "Hello SkiaSharp!";

    // Create an SKPaint object to display the text
    SKPaint textPaint = new SKPaint
    {
        Color = SKColors.Chocolate
    };

    // Adjust TextSize property so text is 90% of screen width
    float textWidth = textPaint.MeasureText(str);
    textPaint.TextSize = 0.9f * info.Width * textPaint.TextSize / textWidth;

    // Find the text bounds
    SKRect textBounds = new SKRect();
    textPaint.MeasureText(str, ref textBounds);
    ...
}

İkinci MeasureText çağrı bir SKRect bağımsız değişkene sahip olduğundan, işlenen metnin hem genişliğini hem de yüksekliğini alır. Height Bu SKRect değerin özelliği, metin dizesinde büyük harflerin, artanların ve alt harflerin varlığına bağlıdır. Örneğin, "mom", "cat" ve "dog" metin dizeleri için farklı Height değerler bildirilir.

Yapının Left ve Top özellikleri SKRect , metin X ve Y konumları 0 olan bir DrawText çağrı tarafından görüntüleniyorsa, işlenen metnin sol üst köşesinin koordinatlarını gösterir. Örneğin, bu program bir i Telefon 7 simülatöründe çalışırken, TextSize ilk çağrısından MeasureTextsonraki hesaplamanın sonucu olarak 90,6254 değeri atanır. SKRect İkinci çağrısından MeasureText alınan değer aşağıdaki özellik değerlerine sahiptir:

  • Left = 6
  • Top = –68
  • Width = 664.8214
  • Height = 88;

Yönteme geçirdiğiniz DrawText X ve Y koordinatlarının metnin sol tarafını taban çizgisinde belirttiğini unutmayın. Değer, Top metnin bu taban çizgisinin 68 piksel üstüne ve (88'den 68 piksel çıkarılarak) taban çizgisinin 20 piksel altına yayıldığını gösterir. Left 6 değeri, metnin çağrıdaki X değerinin DrawText sağında altı piksel başladığını gösterir. Bu, normal karakterler arası aralığı sağlar. Metnin ekranın sol üst köşesinde düzgün bir şekilde görüntülenmesini istiyorsanız, bu Left ve Top değerlerinin negatiflerini , bu örnekte –6 ve 68'in DrawTextX ve Y koordinatları olarak geçirin.

Yapısı SKRect , bazıları işleyicinin geri kalanında PaintSurface kullanılan birkaç kullanışlı özellik ve yöntem tanımlar. MidX ve MidY değerleri dikdörtgenin merkezinin koordinatlarını gösterir. (i Telefon 7 örneğinde bu değerler 338.4107 ve –24'tür.) Aşağıdaki kod, metni ekranda ortalamak için en kolay koordinat hesaplaması için bu değerleri kullanır:

void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
    ...
    // Calculate offsets to center the text on the screen
    float xText = info.Width / 2 - textBounds.MidX;
    float yText = info.Height / 2 - textBounds.MidY;

    // And draw the text
    canvas.DrawText(str, xText, yText, textPaint);
    ...
}

Bilgi SKImageInfo yapısı, türünde SKRectbir Rect özelliği de tanımlar, bu nedenle şunu da hesaplayabilir xText ve yText beğenebilirsiniz:

float xText = info.Rect.MidX - textBounds.MidX;
float yText = info.Rect.MidY - textBounds.MidY;

İşleyiciPaintSurface, her ikisi de bağımsız değişkenlerini SKRectgerektiren iki çağrısıyla DrawRoundRectsona erer. Bu SKRect değer yönteminden MeasureText alınan değeri temel alırSKRect, ancak aynı olamaz. İlk olarak, yuvarlatılmış dikdörtgenin metnin kenarlarını çizmemesi için biraz daha büyük olması gerekir. İkinci olarak, ve Top değerlerinin dikdörtgenin Left konumlandırılacağı sol üst köşeye karşılık gelen boşlukta kaydırılması gerekir. Bu iki iş tarafından tanımlanan ve Inflate yöntemleri tarafından OffsetSKRectgerçekleştirilir:

void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
    ...
    // Create a new SKRect object for the frame around the text
    SKRect frameRect = textBounds;
    frameRect.Offset(xText, yText);
    frameRect.Inflate(10, 10);

    // Create an SKPaint object to display the frame
    SKPaint framePaint = new SKPaint
    {
        Style = SKPaintStyle.Stroke,
        StrokeWidth = 5,
        Color = SKColors.Blue
    };

    // Draw one frame
    canvas.DrawRoundRect(frameRect, 20, 20, framePaint);

    // Inflate the frameRect and draw another
    frameRect.Inflate(10, 10);
    framePaint.Color = SKColors.DarkBlue;
    canvas.DrawRoundRect(frameRect, 30, 30, framePaint);
}

Bundan sonra, yöntemin geri kalanı düz ileriye doğrudur. Kenarlıklar için başka bir SKPaint nesne oluşturur ve iki kez çağırır DrawRoundRect . İkinci çağrı, 10 piksel daha şişirilmiş bir dikdörtgen kullanır. İlk çağrı 20 piksellik bir köşe yarıçapı belirtir. İkincisi 30 piksellik bir köşe yarıçapı olduğundan paralel görünüyorlar:

Çerçeveli Metin sayfasının üçlü ekran görüntüsü

Metin ve çerçeve boyutunun arttığını görmek için telefonunuzu veya simülatörünüzü yan çevirebilirsiniz.

Yalnızca ekranda bir metni ortalamanız gerekiyorsa, metni ölçmeden yaklaşık olarak yapabilirsiniz. Bunun yerine, özelliğini SKPaint numaralandırma üyesi SKTextAlign.Centerolarak ayarlayınTextAlign. Yönteminde DrawText belirttiğiniz X koordinatı, metnin yatay merkezinin nerede konumlandırılacağını gösterir. Ekranın orta noktasını yönteme DrawText geçirirseniz, taban çizgisi dikey olarak ortalanacağından metin yatay olarak ortalanır ve neredeyse dikey olarak ortalanır.

Metin, diğer grafik nesneler gibi ele alınabilir. Basit bir seçenek, metin karakterlerinin ana hattını görüntülemektir:

Ana Hatlı Metin sayfasının üçlü ekran görüntüsü

Bu, nesnenin normal Style özelliğini SKPaint varsayılan ayarından SKPaintStyle.FillSKPaintStyle.Strokeolarak değiştirerek ve bir vuruş genişliği belirterek gerçekleştirilir. PaintSurface Ana Hatlı Metin sayfasının işleyicisi nasıl yapıldığını gösterir:

void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
    SKImageInfo info = args.Info;
    SKSurface surface = args.Surface;
    SKCanvas canvas = surface.Canvas;

    canvas.Clear();

    string text = "OUTLINE";

    // Create an SKPaint object to display the text
    SKPaint textPaint = new SKPaint
    {
        Style = SKPaintStyle.Stroke,
        StrokeWidth = 1,
        FakeBoldText = true,
        Color = SKColors.Blue
    };

    // Adjust TextSize property so text is 95% of screen width
    float textWidth = textPaint.MeasureText(text);
    textPaint.TextSize = 0.95f * info.Width * textPaint.TextSize / textWidth;

    // Find the text bounds
    SKRect textBounds = new SKRect();
    textPaint.MeasureText(text, ref textBounds);

    // Calculate offsets to center the text on the screen
    float xText = info.Width / 2 - textBounds.MidX;
    float yText = info.Height / 2 - textBounds.MidY;

    // And draw the text
    canvas.DrawText(text, xText, yText, textPaint);
}

Bir diğer yaygın grafik nesnesi de bit eşlemdir. Bu, SkiaSharp Bit Eşlemleri bölümünde ayrıntılı olarak ele alınan büyük bir konudur, ancak sonraki makale olan SkiaSharp'ta Bit Eşlem Temelleri daha kısa bir giriş sağlar.

  • Last updated on