本文記錄使用 Microsoft.Maui.Graphics.Skia 的 DrawString 進行繪制文本，不同的多載方法繪制的文本的坐標不同的問題
本文開始之前，預期已經準備好了環境和基礎專案，請參閱 dotnet 控制臺 使用 Microsoft.Maui.Graphics 配合 Skia 進行繪圖入門
在采用 void DrawString(string value, float x, float y, HorizontalAlignment horizontalAlignment) 方法進行繪制時，文本將在 x y 坐標開始，作為文本的 BaseLine 開始繪制，為了方便大家看出來效果，我在坐標點繪制一個矩形和一個文本
核心代碼如下
var skiaCanvas = new SkiaCanvas();
skiaCanvas.Canvas = skCanvas;
ICanvas canvas = skiaCanvas;
canvas.Font = new Font("微軟雅黑");
canvas.FontSize = 100;
canvas.DrawString("漢字", 100, 100, HorizontalAlignment.Left);
canvas.StrokeColor = Colors.Blue;
canvas.StrokeSize = 2;
canvas.DrawRectangle(100, 100, 500, 500);
如上面代碼，在 100,100 的坐標開始繪制文本，同時也在此坐標繪制矩形，輸出如下
可以看到文本是從 100,100 作為左上角的基線 BaseLine 開始繪制的，這里需要科普文本的 基線 BaseLine 是什么，其實大家學英語到知道四線三格吧，如下圖，第三條線就是 BaseLine 基線
我將漢字換成英文，更方便大家了解
canvas.FontSize = 100;
canvas.DrawString("abcfgj", 100, 100, HorizontalAlignment.Left); // 換成英文
canvas.StrokeColor = Colors.Blue;
canvas.StrokeSize = 2;
canvas.DrawRectangle(100, 100, 500, 500);
運行代碼，可以看到輸出如下
但在采用的是 void DrawString(string value, float x, float y, float width, float height, HorizontalAlignment horizontalAlignment, VerticalAlignment verticalAlignment, TextFlow textFlow = TextFlow.ClipBounds, float lineSpacingAdjustment = 0F) 方法進行繪制文本，那將會讓繪制的文本完全放在 float x, float y, float width, float height 這個矩形框里面，如以下代碼
canvas.FontSize = 100;
canvas.DrawString("漢字", 100, 100, 500, 500, HorizontalAlignment.Left, VerticalAlignment.Top);
canvas.StrokeColor = Colors.Blue;
canvas.StrokeSize = 2;
canvas.DrawRectangle(100, 100, 500, 500);
運行代碼，可以看到輸出如下
可以看到文本在矩形內
接下來分別設定文本的水平和垂直方向的布局：
- 文本的水平居中
canvas.DrawString("漢字", 100, 100, 500, 500, HorizontalAlignment.Center, VerticalAlignment.Top);
運行代碼，可以看到輸出如下
- 文本的水平居右
canvas.DrawString("漢字", 100, 100, 500, 500, HorizontalAlignment.Right, VerticalAlignment.Top);
運行代碼，可以看到輸出如下
- 文本的垂直居中
canvas.DrawString("漢字", 100, 100, 500, 500, HorizontalAlignment.Left, VerticalAlignment.Center);
運行代碼，可以看到輸出如下
- 文本的垂直距下
canvas.DrawString("漢字", 100, 100, 500, 500, HorizontalAlignment.Left, VerticalAlignment.Bottom);
運行代碼，可以看到輸出如下
如果文本的實際渲染大小超過給定的矩形范圍，可以通過 TextFlow 引數決定是裁剪還是允許超過范圍，橫排文本布局的超過范圍是在 Y 坐標上超過邊界，默認引數是超過給定的范圍就裁剪
更多的 MAUI 相關博客，還請參閱我的 博客導航
本文的例子放在github 和 gitee 歡迎訪問
可以通過如下方式獲取本文的源代碼，先創建一個空檔案夾，接著使用命令列 cd 命令進入此空檔案夾，在命令列里面輸入以下代碼，即可獲取到本文的代碼
git init
git remote add origin https://gitee.com/lindexi/lindexi_gd.git
git pull origin 042fcb09fe9ce6c3d16ebab6d7432b6bc92c7c4e
以上使用的是 gitee 的源，如果 gitee 不能訪問，請替換為 github 的源，請在命令列繼續輸入以下代碼
git remote remove origin
git remote add origin https://github.com/lindexi/lindexi_gd.git
git pull origin 042fcb09fe9ce6c3d16ebab6d7432b6bc92c7c4e
獲取代碼之后，進入 SkiaSharp\RulawnaloyerKairjemhemwemlayca 檔案夾
我建立了一個 SkiaSharp 的群： 788018852 歡迎大家加入討論
博客園博客只做備份，博客發布就不再更新，如果想看最新博客，請到 https://blog.lindexi.com/
本作品采用知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議進行許可，歡迎轉載、使用、重新發布，但務必保留文章署名[林德熙](http://blog.csdn.net/lindexi_gd)(包含鏈接:http://blog.csdn.net/lindexi_gd )，不得用于商業目的，基于本文修改后的作品務必以相同的許可發布，如有任何疑問，請與我[聯系](mailto:[email protected])，
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/508704.html
標籤：.NET技术