Intégration de texte et de graphisme

Découvrez comment déterminer la taille de la chaîne de texte rendue pour intégrer du texte aux graphiques SkiaSharp

Cet article montre comment mesurer le texte, mettre à l’échelle le texte à une taille particulière et intégrer du texte à d’autres graphiques :

Cette image inclut également un rectangle arrondi. La classe SkiaSharp Canvas inclut des DrawRect méthodes pour dessiner un rectangle et DrawRoundRect des méthodes pour dessiner un rectangle avec des angles arrondis. Ces méthodes permettent au rectangle d’être défini comme une SKRect valeur ou d’une autre manière.

La page Texte encadré centre une chaîne de texte courte sur la page et l’entoure d’un cadre composé d’une paire de rectangles arrondis. La FramedTextPage classe montre comment elle est effectuée.

Dans SkiaSharp, vous utilisez la SKPaint classe pour définir des attributs de texte et de police, mais vous pouvez également l’utiliser pour obtenir la taille rendue du texte. Le début du gestionnaire d’événements suivant PaintSurface appelle deux méthodes différentes MeasureText . Le premier MeasureText appel a un argument simple string et retourne la largeur du pixel du texte en fonction des attributs de police actuels. Le programme calcule ensuite une nouvelle TextSize propriété de l’objet SKPaint en fonction de cette largeur rendue, de la propriété actuelle TextSize et de la largeur de la zone d’affichage. Ce calcul est destiné à définir TextSize afin que la chaîne de texte soit affichée à 90 % de la largeur de l’écran :

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);
    ...
}

Le deuxième MeasureText appel a un SKRect argument, de sorte qu’il obtient à la fois une largeur et une hauteur du texte rendu. La Height propriété de cette SKRect valeur dépend de la présence de lettres majuscules, d’croissants et de décroissants dans la chaîne de texte. Différentes Height valeurs sont signalées pour les chaînes de texte « mom », « cat » et « dog », par exemple.

Les Left propriétés et Top les propriétés de la SKRect structure indiquent les coordonnées du coin supérieur gauche du texte rendu si le texte est affiché par un DrawText appel avec des positions X et Y de 0. Par exemple, lorsque ce programme s’exécute sur un simulateur i Téléphone 7, TextSize la valeur 90.6254 est affectée en conséquence du calcul suivant le premier appel à MeasureText. La SKRect valeur obtenue à partir du deuxième appel pour MeasureText avoir les valeurs de propriété suivantes :

• Left = 6
• Top = –68
• Width = 664,8214
• Height = 88 ;

N’oubliez pas que les coordonnées X et Y que vous passez à la DrawText méthode spécifient le côté gauche du texte à la ligne de base. La Top valeur indique que le texte étend 68 pixels au-dessus de cette ligne de base et (en soustrayant 68 à 88) 20 pixels en dessous de la ligne de base. La Left valeur 6 indique que le texte commence à six pixels à droite de la valeur X dans l’appel DrawText . Cela permet un espacement inter-caractères normal. Si vous souhaitez afficher le texte dans le coin supérieur gauche de l’affichage, passez les négatifs de ces Left valeurs Top en tant que coordonnées X et Y de DrawText, dans cet exemple, –6 et 68.

La SKRect structure définit plusieurs propriétés et méthodes pratiques, dont certaines sont utilisées dans le reste du PaintSurface gestionnaire. Les MidX valeurs et MidY indiquent les coordonnées du centre du rectangle. (Dans l’exemple i Téléphone 7, ces valeurs sont 338.4107 et –24.) Le code suivant utilise ces valeurs pour le calcul le plus simple des coordonnées pour centrer le texte sur l’affichage :

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);
    ...
}

La SKImageInfo structure d’informations définit également une Rect propriété de type SKRect. Vous pouvez donc également calculer xText et yText comme suit :

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

Le PaintSurface gestionnaire se termine par deux appels à DrawRoundRect, dont les deux nécessitent des arguments .SKRect Cette SKRect valeur est basée sur la SKRect valeur obtenue à partir de la MeasureText méthode, mais elle ne peut pas être la même. Tout d’abord, il doit être un peu plus grand afin que le rectangle arrondi ne dessine pas sur les bords du texte. Deuxièmement, il doit être décalé dans l’espace afin que les valeurs et Top les Left valeurs correspondent au coin supérieur gauche où le rectangle doit être positionné. Ces deux tâches sont effectuées par les OffsetInflate méthodes définies par SKRect:

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);
}

Après cela, le reste de la méthode est simple. Il crée un autre SKPaint objet pour les bordures et appelle DrawRoundRect deux fois. Le deuxième appel utilise un rectangle gonflé d’un autre 10 pixels. Le premier appel spécifie un rayon d’angle de 20 pixels. La seconde a un rayon d’angle de 30 pixels, donc ils semblent être parallèles :

Vous pouvez tourner votre téléphone ou simulateur côte à côte pour voir le texte et le cadre augmenter la taille.

Si vous n’avez besoin que de centrer du texte sur l’écran, vous pouvez le faire environ sans mesurer le texte. Définissez plutôt la TextAlign propriété du SKPaint membre SKTextAlign.Centerd’énumération . La coordonnée X que vous spécifiez dans la DrawText méthode indique ensuite où le centre horizontal du texte est positionné. Si vous passez le point intermédiaire de l’écran à la DrawText méthode, le texte est centré horizontalement et presque centré verticalement, car la ligne de base est centrée verticalement.

Le texte peut être traité comme n’importe quel autre objet graphique. Une option simple consiste à afficher le contour des caractères de texte :

Pour ce faire, il suffit de modifier la propriété normale Style de l’objet SKPaint de son paramètre par défaut sur SKPaintStyle.FillSKPaintStyle.Stroke, et en spécifiant une largeur de trait. Le PaintSurface gestionnaire de la page Texte hiérarchique montre comment procéder :

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);
}

Un autre objet graphique courant est la bitmap. Il s’agit d’une grande rubrique abordée en détail dans la section SkiaSharp Bitmaps, mais l’article suivant, Bitmap Basics in SkiaSharp, fournit une brève introduction.

Liens associés

• API SkiaSharp