HarmonyOS 鸿蒙Next 对Text设置文字描边而非控件矩形外描边的方法

发布于 1周前 作者 yibo5220 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 对Text设置文字描边而非控件矩形外描边的方法

对Text设置文字描边，而不是对整个控件的矩形区域设置外描边。比如说文字是黑色，文字的外描边是白色，就类似地图上的地名标注。我尝试了textShadow来设置，即使我设置的阴影颜色是白色，但是出来还是有黑色阴影，请问有没其他的设置方式呢？

Harmonyos Next教程
2 回复

目前没有文字描边的属性可供设置，可使用canvas绘制填充和描边重合达到想要的效果。示例如下：

[@Entry](/user/Entry)

[@Component](/user/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)

        .width('100%')

        .height('100%')

        .onReady(() =>{

          // 描边文本

          this.context.font = '355px sans-serif';

          this.context.strokeStyle = "#ffea0acb";

          // 描边宽度

          this.context.lineWidth = 1

          this.context.strokeText("描边文本",10,300);

          this.context.fillStyle = "black";

          this.context.fillText("描边文本",10,300);

        })

    }

    .width('100%')

    .height('100%')

    .padding({left:20})

  }

}

更多关于HarmonyOS 鸿蒙Next 对Text设置文字描边而非控件矩形外描边的方法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS 鸿蒙Next系统中，为Text设置文字描边效果而非控件矩形外描边，可以通过自定义绘制来实现。具体方法如下：

  1. 创建自定义绘制组件： 继承Text组件，并重写其onDraw方法。在onDraw方法中，使用Canvas的drawTextOnPath或drawText方法结合Paint对象来绘制文字，并设置Paint对象的setStrokeWidth、setStrokeCap和setStyle(Paint.Style.STROKE)属性以实现描边效果。

  2. 设置Paint属性： 创建一个Paint对象，并设置其颜色、描边宽度、描边帽样式等属性。使用setShader方法可以设置渐变等效果，但直接设置颜色和描边属性是关键。

  3. 绘制文字： 在onDraw方法中，使用设置好的Paint对象，根据需要的字体大小、位置等信息绘制文字。确保文字位置与原始Text组件位置一致。

  4. 替换原Text组件： 在布局文件中，使用自定义绘制组件替换原Text组件。

示例代码（简化）：

class StrokeText extends Text {
    @Override
    protected void onDraw(Canvas canvas, Rect container) {
        Paint paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStrokeWidth(5);
        paint.setStyle(Paint.Style.STROKE);
        // 设置字体大小等其他属性
        canvas.drawText("Your Text", x, y, paint);
    }
}

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部