Text组件是否支持描边stokerColor？ HarmonyOS 鸿蒙Next

Text组件是否支持描边stokerColor？ HarmonyOS 鸿蒙Next 定义一个字体，这个字体可以自定义的属性包括：

  • 字体大小：fontSize
  • 字体描边：stokeColor、描边宽度：stokeWidth、
  • 外框颜色：frameStokeColor、
  • 填充色：frameFillColor
  • 圆角大小: frameRadius

现在的Text组件中支持吗？如果没有用什么方案会比较方便呢？

2 回复

目前Text组件未提供描边相关属性。可使用Canvas绘制填充和描边重合效果实现：

@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%')
  }
}

更多关于Text组件是否支持描边stokerColor？ HarmonyOS 鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS中，Text组件目前不支持直接通过stokerColor属性设置描边。描边效果通常需要通过其他方式实现，例如使用背景图或自定义绘制。如果需要描边效果，可以考虑使用Canvas组件进行自定义绘制，或者通过叠加多个Text组件来实现类似效果。

回到顶部