🐛 fix(Watermark): Chinese characters cannot be displayed (#2157)

* 🐛 fix(Watermark): Chinese characters cannot be displayed * update docs
masastack · Sep 19, 2024 · f5016aa · f5016aa
1 parent 978bf3d
commit f5016aa
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 9 deletions.
diff --git a/docs/Masa.Blazor.Docs/Examples/labs/watermark/Chinese.razor b/docs/Masa.Blazor.Docs/Examples/labs/watermark/Chinese.razor
@@ -0,0 +1,26 @@
+@using SkiaSharp
+
+<MWatermark Text="雅黑" Typeface="@_typeface">
+    <div style="height: 300px;"></div>
+</MWatermark>
+
+@code {
+
+    private SKTypeface? _typeface = SKTypeface.FromFamilyName("Microsoft YaHei");
+
+    // protected override void OnAfterRender(bool firstRender)
+    // {
+    //     if (firstRender)
+    //     {
+    //         _typeface = SKTypeface.FromFile(GetFontPath());
+    //         StateHasChanged();
+    //     }
+    // }
+
+    // private static string GetFontPath()
+    // {
+    //     // Server side
+    //     var dir = Path.GetDirectoryName(Assembly.GetExecutingAssembly().Location);
+    //     return Path.Combine(dir, "wwwroot", "ABC.ttf");
+    // }
+}
diff --git a/docs/Masa.Blazor.Docs/wwwroot/pages/labs/watermark/en-US.md b/docs/Masa.Blazor.Docs/wwwroot/pages/labs/watermark/en-US.md
@@ -23,6 +23,12 @@ Use `Grayscale` to make the image gray.
 
 <masa-example file="Examples.labs.watermark.Color"></masa-example>
 
+#### Chinese {released-on=v1.7.3}
+
+To display Chinese, you need to provide a font that supports Chinese.
+
+<masa-example file="Examples.labs.watermark.Chinese"></masa-example>
+
 ### Misc
 
 #### Fallback to text

diff --git a/docs/Masa.Blazor.Docs/wwwroot/pages/labs/watermark/zh-CN.md b/docs/Masa.Blazor.Docs/wwwroot/pages/labs/watermark/zh-CN.md
@@ -5,25 +5,31 @@ desc: "给某个区域加上水印。"
 
 > This component is in [Masa.Blazor.SomethingSkia](https://www.nuget.org/packages/Masa.Blazor.SomethingSkia) package.
 
-## 使用
+## 使用 {#usage}
 
 <watermark-usage></watermark-usage>
 
-## 示例
+## 示例 {#examples}
 
-### 属性
+### 属性 {#props}
 
-#### 图片
+#### 图片 {#image}
 
 <masa-example file="Examples.labs.watermark.Image"></masa-example>
 
-#### 颜色
+#### 颜色 {#color}
 
 <masa-example file="Examples.labs.watermark.Color"></masa-example>
 
-### 其他
+#### 中文 {#chinese released-on=v1.7.3}
 
-#### 回退到文字
+设置中文需要提供支持中文的字体。
+
+<masa-example file="Examples.labs.watermark.Chinese"></masa-example>
+
+### 其他 {#misc}
+
+#### 回退到文字 {#fallback-to-text}
 
 当图片加载失败时，回退到文字水印。
 

diff --git a/src/Masa.Blazor.SomethingSkia/Watermark/MWatermark.ParameterChangeObserver.cs b/src/Masa.Blazor.SomethingSkia/Watermark/MWatermark.ParameterChangeObserver.cs
@@ -20,6 +20,7 @@ public partial class MWatermark
     private int __prevGapX;
     private int __prevGapY;
     private bool __prevIsGrayscale;
+    private SKTypeface? __prevTypeface;
 
     private bool AnyParameterChanged(params string[] parameterNames)
     {
@@ -84,6 +85,12 @@ private bool AnyParameterChanged(params string[] parameterNames)
             __prevIsGrayscale = Grayscale;
             anyChanged = parameterNames.Contains(nameof(Grayscale));
         }
+
+        if (__prevTypeface != Typeface)
+        {
+            __prevTypeface = Typeface;
+            anyChanged = parameterNames.Contains(nameof(Typeface));
+        }
 
         return anyChanged;
     }

diff --git a/src/Masa.Blazor.SomethingSkia/Watermark/MWatermark.razor.cs b/src/Masa.Blazor.SomethingSkia/Watermark/MWatermark.razor.cs
@@ -31,6 +31,10 @@ [Parameter] [MasaApiParameter("new SKColor(0, 0, 0, 38)")]
 
     [Parameter] public int GapY { get; set; }
 
+    [MasaApiParameter(ReleasedOn = "v1.7.3")]
+    [Parameter]
+    public SKTypeface? Typeface { get; set; }
+
     /// <summary>
     /// Determines whether the watermark is grayscale. Only works when <see cref="Image"/> is not null.
     /// </summary>
@@ -58,7 +62,8 @@ protected override async Task OnParametersSetAsync()
                 nameof(Top),
                 nameof(GapX),
                 nameof(GapY),
-                nameof(Grayscale)))
+                nameof(Grayscale),
+                nameof(Typeface)))
         {
             await UpdateWatermark();
         }
@@ -127,7 +132,8 @@ private void DrawTextWatermark()
             TextSize = TextSize,
             Color = Color,
             IsAntialias = true,
-            Style = SKPaintStyle.Fill
+            Style = SKPaintStyle.Fill,
+            Typeface = Typeface
         };
 
         SKRect textBounds = new();