HarmonyOS鸿蒙Next中如何实现文字外描边？

HarmonyOS鸿蒙Next中如何实现文字外描边？ APi20可以通过属性字符串实现文字描边，20以下如何实现？

4 回复

可使用Canvas的strokeText绘制描边类文本与fillText绘制填充重合效果实现。实现示例如下所示：

@Entry
@Component
struct Index {
  // 用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿，true表明开启抗锯齿。
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  // 用来创建CanvasRenderingContext2D对象，通过在canvas中调用CanvasRenderingContext2D对象来绘制。
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);

  build() {
    Column() {
      Canvas(this.context)
        .onReady(() => {
          // 字体大小、字体样式
          this.context.font = '260px sans-serif';
          // 线条颜色
          this.context.strokeStyle = '#ffea0acb';
          // 描边宽度
          this.context.lineWidth = 4;
          // 外框文本
          this.context.strokeText('描边文本', 10, 300);
          // 填充颜色
          this.context.fillStyle = 'black';
          // 填充文本
          this.context.fillText('描边文本', 10, 300);
        })
    }
    .width('100%')
  }
}

【背景知识】

Canvas提供画布组件，用于自定义绘制图形，开发者使用CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象在Canvas组件上进行绘制，绘制对象可以是基础形状、文本、图片等。

更多关于HarmonyOS鸿蒙Next中如何实现文字外描边？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


API 20 以下的替代方案：

虽然不能直接通过文本样式属性实现描边，但可以通过 Canvas 绘制来实现文本描边效果，可以使用 CanvasRenderingContext2D 的 strokeText 方法进行文本描边：

Canvas(this.context)
  .width('100%')
  .height('100%')
  .backgroundColor('#F5DC62')
  .onReady(() => {
    // 文本描边
    this.context.strokeStyle = "#ff0000"  // 设置描边颜色
    this.context.lineWidth = 2           // 设置描边宽度
    this.context.font = '50px bolder sans-serif'
    this.context.strokeText("Hello World!", 50, 150)  // 绘制描边文本
  })

在HarmonyOS Next中，可通过Text组件的outline属性实现文字外描边。设置outline为true，并配置outlineColor和outlineWidth属性来定义描边颜色和宽度。例如：Text('描边文字').outline(true).outlineColor(Color.Blue).outlineWidth(2)。此方法直接作用于文本组件，无需额外图形处理。

在HarmonyOS Next中，若API级别低于20，可通过自定义绘制实现文字描边。使用Canvas的drawText方法结合Paint设置描边样式：

  1. 创建两个Paint对象：

    • 描边画笔：setStyle(Paint.Style.STROKE)，设置描边宽度和颜色
    • 填充画笔：setStyle(Paint.Style.FILL)，设置文字填充颜色

  2. 绘制顺序：

    • 先用描边画笔绘制文字
    • 再用填充画笔绘制文字

示例代码：

// 描边画笔
Paint strokePaint = new Paint();
strokePaint.setStyle(Paint.Style.STROKE);
strokePaint.setStrokeWidth(3); // 描边宽度
strokePaint.setColor(Color.BLACK); // 描边颜色
strokePaint.setTextSize(50);

// 填充画笔
Paint fillPaint = new Paint();
fillPaint.setStyle(Paint.Style.FILL);
fillPaint.setColor(Color.WHITE); // 文字颜色
fillPaint.setTextSize(50);

// 绘制文字（先描边后填充）
canvas.drawText("Hello HarmonyOS", x, y, strokePaint);
canvas.drawText("Hello HarmonyOS", x, y, fillPaint);

此方法兼容低版本API，通过两次绘制实现描边效果。描边宽度和颜色可根据需求调整。

回到顶部