HarmonyOS 鸿蒙Next中文字描边与文字渐变

HarmonyOS 鸿蒙Next中文字描边与文字渐变 1.使用textShadow实现文字外描边

@Entry
@Component
struct Index {
  offsetNumber: number = 3

  build() {
    Row() {
      Column() {
        Row() {
          Text('blendMode')
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
            .blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN)
        }
        .linearGradient({
          direction: GradientDirection.Right,
          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
        })
        .blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)


        Text('textShadow')
          .textAlign(TextAlign.Center)
          .fontSize(40)
          .textShadow([
            { radius: 1, color: Color.White, offsetX: -this.offsetNumber, offsetY: 0 },
            { radius: 1, color: Color.White, offsetX: this.offsetNumber, offsetY: 0 },
            { radius: 1, color: Color.White, offsetX: 0, offsetY: this.offsetNumber },
            { radius: 1, color: Color.White, offsetX: 0, offsetY: -this.offsetNumber },
            { radius: 1, color: Color.White, offsetX: -this.offsetNumber, offsetY: -this.offsetNumber },
            { radius: 1, color: Color.White, offsetX: this.offsetNumber, offsetY: this.offsetNumber },
            { radius: 1, color: Color.White, offsetX: -this.offsetNumber, offsetY: this.offsetNumber },
            { radius: 1, color: Color.White, offsetX: this.offsetNumber, offsetY: -this.offsetNumber }
          ])
        Text('textShadow')
          .textAlign(TextAlign.Center)
          .fontSize(40)
          .textShadow([
            { radius: 1, color: Color.White, offsetX: -this.offsetNumber, offsetY: 0 },
            { radius: 1, color: Color.White, offsetX: this.offsetNumber, offsetY: 0 },
            { radius: 1, color: Color.White, offsetX: 0, offsetY: this.offsetNumber },
            { radius: 1, color: Color.White, offsetX: 0, offsetY: -this.offsetNumber }
          ])

        Text('textShadow')
          .textAlign(TextAlign.Center)
          .fontSize(40)
          .textShadow([
            { radius: 3, color: Color.White, offsetX: -this.offsetNumber, offsetY: 0 },
            { radius: 3, color: Color.White, offsetX: this.offsetNumber, offsetY: 0 },
            { radius: 3, color: Color.White, offsetX: 0, offsetY: this.offsetNumber },
            { radius: 3, color: Color.White, offsetX: 0, offsetY: -this.offsetNumber },
          ])

      }.backgroundImage($r("app.media.startIcon"))
      .backgroundImageSize(ImageSize.FILL)
    }
  }
}

2.Canvas实现

// xxx.ets
@Entry
@Component
struct StrokeText {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('rgb(213,213,213)')
        .onReady(() => {
          this.context.font = "14vp"
          this.context.strokeStyle = '#fff'
          this.context.lineWidth = 2
          this.context.fillStyle = '#000'
          this.context.strokeText("Hello World!", 20, 60)
          this.context.fillText("Hello World!", 20, 60)
        })
    }
    .width('100%')
    .height('100%')
  }
}

3.pen绘制效果

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/textblock-drawing-arkts#文字描边

// 创建画笔
let pen = new drawing.Pen();
// 设置抗锯齿
pen.setAntiAlias(true);
// 设置描边线宽
pen.setStrokeWidth(3.0);
// 设置描边颜色
pen.setColor(0xFF, 0xFF,  0x00, 0x00);
// 创建字型对象
const font = new drawing.Font();
// 设置字体大小
font.setSize(100);
// 添加画笔描边效果
canvas.attachPen(pen);
// 创建字块对象
const textBlob = drawing.TextBlob.makeFromString("Hello world", font, drawing.TextEncoding.TEXT_ENCODING_UTF8);
// 绘制字块
canvas.drawTextBlob(textBlob, 200, 300);
// 去除描边效果
canvas.detachPen();