updated sample outline text

pull/1/head
Marc CHEVALDONNE 8 months ago
parent 4b7b1aa029
commit cd1750e6ac

@ -0,0 +1,14 @@
{
// Utilisez IntelliSense pour en savoir plus sur les attributs possibles.
// Pointez pour afficher la description des attributs existants.
// Pour plus d'informations, visitez : https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": ".NET MAUI",
"type": "maui",
"request": "launch",
"preLaunchTask": "maui: Build"
}
]
}

@ -89,6 +89,33 @@
BackgroundColor="DarkSalmon"
Ratio="0.9"/>
<Label Text="Binding"/>
<Grid ColumnDefinitions="*,*">
<views:LabelOutline Text="{Binding Text}"
Stroke="Red"
Fill="Yellow"
StrokeWidth="{Binding StrokeWidth}"
HeightRequest="50"
FontFamily="{Binding FontFamily}"
TextSize="50"
Aspect="Center"
BackgroundColor="DarkSalmon"
Ratio="0.9"/>
<VerticalStackLayout Grid.Column="1">
<Entry Text="{Binding Text}"/>
<Stepper Maximum="5" Minimum="0" Value="{Binding StrokeWidth}"/>
<Picker SelectedItem="{Binding FontFamily}">
<Picker.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>OpenSansRegular</x:String>
<x:String>Equestria</x:String>
</x:Array>
</Picker.ItemsSource>
</Picker>
</VerticalStackLayout>
</Grid>
</VerticalStackLayout>
</ScrollView>
</ContentPage>

@ -1,4 +1,5 @@
using SkiaSharp;
using System.ComponentModel;
using SkiaSharp;
using SkiaSharp.Views.Maui;
namespace ex_OutlineText;
@ -8,6 +9,7 @@ public partial class MainPage : ContentPage
public MainPage()
{
InitializeComponent();
BindingContext = new SimpleVM();
}
}

@ -15,7 +15,7 @@ public static class MauiProgram
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
fonts.AddFont("Friendfship Magic - Equestria.ttf", "FriendfshipMagicEquestria");
fonts.AddFont("Friendfship Magic - Equestria.ttf", "Equestria");
});
#if DEBUG

@ -0,0 +1,47 @@
using System.ComponentModel;
using System.Runtime.CompilerServices;
namespace ex_OutlineText;
public class SimpleVM : INotifyPropertyChanged
{
public string Text
{
get => text;
set
{
text = value;
OnPropertyChanged();
}
}
private string text = "Prout";
public float StrokeWidth
{
get => strokeWidth;
set
{
strokeWidth = value;
OnPropertyChanged();
}
}
private float strokeWidth;
public string FontFamily
{
get => font;
set
{
font = value;
OnPropertyChanged();
}
}
private string font = "Equestria";
public void OnPropertyChanged([CallerMemberName] string pptyName = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(pptyName));
}
public event PropertyChangedEventHandler? PropertyChanged;
}

@ -4,7 +4,7 @@
xmlns:views="clr-namespace:SkiaSharp.Views.Maui.Controls;assembly=SkiaSharp.Views.Maui.Controls"
x:Class="ex_OutlineText.Views.LabelOutline"
x:Name="root">
<views:SKCanvasView PaintSurface="OnPainting"
<views:SKCanvasView PaintSurface="OnPainting" x:Name="canvasView"
HeightRequest="{Binding ActualHeight, x:Reference=root}"
WidthRequest="{Binding ActualWidth, x:Reference=root}"/>
</ContentView>

@ -15,7 +15,8 @@ public partial class LabelOutline : ContentView
= BindableProperty.Create(nameof(Text),
typeof(string),
typeof(LabelOutline),
"something");
"something",
propertyChanged: (b, ov, nv) => (b as LabelOutline)?.canvasView.InvalidateSurface());
public string Text
{
@ -27,7 +28,9 @@ public partial class LabelOutline : ContentView
= BindableProperty.Create(nameof(Fill),
typeof(Color),
typeof(LabelOutline),
Colors.DarkSalmon);
Colors.DarkSalmon,
propertyChanged: (b, ov, nv) => (b as LabelOutline)?.canvasView.InvalidateSurface());
public Color Fill
{
@ -39,7 +42,8 @@ public partial class LabelOutline : ContentView
= BindableProperty.Create(nameof(Stroke),
typeof(Color),
typeof(LabelOutline),
Colors.DarkSalmon);
Colors.DarkSalmon,
propertyChanged: (b, ov, nv) => (b as LabelOutline)?.canvasView.InvalidateSurface());
public Color Stroke
{
@ -51,7 +55,8 @@ public partial class LabelOutline : ContentView
= BindableProperty.Create(nameof(StrokeWidth),
typeof(float),
typeof(LabelOutline),
1.0f);
1.0f,
propertyChanged: (b, ov, nv) => (b as LabelOutline)?.canvasView.InvalidateSurface());
public float StrokeWidth
{
@ -63,7 +68,8 @@ public partial class LabelOutline : ContentView
= BindableProperty.Create(nameof(FontFamily),
typeof(string),
typeof(LabelOutline),
"something");
"something",
propertyChanged: (b, ov, nv) => (b as LabelOutline)?.canvasView.InvalidateSurface());
public string FontFamily
{
@ -75,7 +81,8 @@ public partial class LabelOutline : ContentView
= BindableProperty.Create(nameof(TextSize),
typeof(float),
typeof(LabelOutline),
24.0f);
24.0f,
propertyChanged: (b, ov, nv) => (b as LabelOutline)?.canvasView.InvalidateSurface());
public float TextSize
{
@ -87,7 +94,8 @@ public partial class LabelOutline : ContentView
= BindableProperty.Create(nameof(Aspect),
typeof(Aspect),
typeof(LabelOutline),
Aspect.Center);
Aspect.Center,
propertyChanged: (b, ov, nv) => (b as LabelOutline)?.canvasView.InvalidateSurface());
public Aspect Aspect
{
@ -99,7 +107,8 @@ public partial class LabelOutline : ContentView
= BindableProperty.Create(nameof(Ratio),
typeof(float),
typeof(LabelOutline),
0.95f);
0.95f,
propertyChanged: (b, ov, nv) => (b as LabelOutline)?.canvasView.InvalidateSurface());
public float Ratio
{
@ -110,13 +119,10 @@ public partial class LabelOutline : ContentView
private void OnPainting(object sender, SKPaintSurfaceEventArgs args)
{
SKImageInfo info = args.Info;
SKSurface surface = args.Surface;
SKCanvas canvas = surface.Canvas;
SKCanvas canvas = args.Surface.Canvas;
canvas.Clear();
string text = Text;
// Create an SKPaint object to display the text
SKPaint textPaint = new SKPaint
{
@ -132,39 +138,37 @@ public partial class LabelOutline : ContentView
{
case Aspect.AspectFit:
float textHeight = Ratio * info.Height;
float textWidth2 = textPaint.MeasureText(text);
float textWidth2 = textPaint.MeasureText(Text);
textWidth2 = Ratio * info.Width * textPaint.TextSize / textWidth2;
textPaint.TextSize = Math.Min(textHeight, textWidth2);
Console.WriteLine($"info.Width: {info.Width} ; info.Height: {info.Height} ; textPaint.TextSize: {textPaint.TextSize} ; textHeight: {textHeight} ; textWidth: {textWidth2}");
break;
case Aspect.AspectFill:
case Aspect.Fill:
float textWidth = textPaint.MeasureText(text);
float textWidth = textPaint.MeasureText(Text);
textPaint.TextSize = Ratio * info.Width * textPaint.TextSize / textWidth;
Console.WriteLine($"info.Width: {info.Width} ; info.Height: {info.Height} ; textPaint.TextSize: {textPaint.TextSize}");
break;
case Aspect.Center:
default:
break;
}
// 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);
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);
canvas.DrawText(Text, xText, yText, textPaint);
textPaint.Style = SKPaintStyle.Stroke;
textPaint.Color = Stroke.ToSKColor();
if(StrokeWidth > 0.0f)
{
textPaint.Style = SKPaintStyle.Stroke;
textPaint.Color = Stroke.ToSKColor();
canvas.DrawText(text, xText, yText, textPaint);
canvas.DrawText(Text, xText, yText, textPaint);
}
}
}
Loading…
Cancel
Save