如何给Span组件设置渐变的背景颜色？

【背景知识】

• Span：作为Text、ContainerSpan组件的子组件，用于显示行内文本的组件。不支持通用属性设置，所以linearGradient属性设置无效。若需设置通用属性，应使用Text进行设置，或改用属性字符串中的CustomSpan自行绘制。
• CustomSpan可以通过setShaderEffect接口设置drawing.ShaderEffect.createLinearGradient实现渐变背景色。

【解决方案】

• 方案一：CustomSpan方式实现Span渐变背景色。 参照设置自定义绘制Span示例六，核心代码修改如下：

原设置字体背景颜色代码：

brush.setColor({
  alpha: 255,
  red: 0,
  green: 74,
  blue: 175
});

改为渐变背景：

let startPt: common2D.Point = { x: 0, y: 0 };
let endPt: common2D.Point = { x: gUIContext.vp2px(this.width), y: gUIContext.vp2px(this.height) };
let shaderEffect =
  drawing.ShaderEffect.createLinearGradient(startPt, endPt, [0x3300FF00, 0x33FF0000], drawing.TileMode.REPEAT);
brush.setShaderEffect(shaderEffect)

• 方案二：将文本绘制成图片显示。 通过drawing绘制出一张包含文字的渐变背景的图片，使用ImageSpan或者属性字符串的ImageAttachment显示文字图片。

import { common2D, drawing } from '@kit.ArkGraphics2D'
import { image } from '@kit.ImageKit'
import { LengthMetrics, MeasureText } from '@kit.ArkUI'

@Entry
@Component
struct DrawingSpanPage {
  textController: TextController = new TextController();
  @State pixelMap: image.PixelMap | undefined = undefined

  onPageShow() {
    this.draw() // 页面显示时绘制
  }

  build() {
    Row() {
      Column() {
        Text() {
          ImageSpan(this.pixelMap)
            .width(40)
            .height(16)
          Span(' World!')
            .baselineOffset(new LengthMetrics(0))
            .fontSize(16)
        }
        .height(16)
        .clip(true)
      }
      .width('100%')
    }
    .height('100%')
  }

  draw() {
    // 计算文本长款宽
    let size: SizeOptions =
      this.getUIContext().getMeasureUtils().measureTextSize({ textContent: 'Hello', fontSize: 16 })
    // 绘制图片
    const color = new ArrayBuffer(200 * 200 * 4);
    let opts: image.InitializationOptions = {
      editable: true,
      pixelFormat: 3,
      size: {
        height: size.height as number,
        width: size.width as number
      }
    }
    image.createPixelMap(color, opts).then((pixelMap: PixelMap) => {
      let width: number = size.width as number
      let height: number = size.height as number
      // 1.构造canvas对象
      const canvas = new drawing.Canvas(pixelMap);
      // 2.构造一个新的画刷对象，绘制背景
      const brush = new drawing.Brush()
      let startPt: common2D.Point = { x: 0, y: 0 };
      let endPt: common2D.Point = { x: width, y: height };
      let shaderEffect =
        drawing.ShaderEffect.createLinearGradient(startPt, endPt, [0x3300FF00, 0x33FF0000], drawing.TileMode.REPEAT);
      brush.setShaderEffect(shaderEffect)
      let path = new drawing.Path();
      const rect: common2D.Rect = {
        left: 0,
        top: 0,
        right: width,
        bottom: height
      };
      let roundRect = new drawing.RoundRect(rect, 0, 0);
      path.addRoundRect(roundRect, drawing.PathDirection.CLOCKWISE);
      canvas.clipPath(path, drawing.ClipOp.INTERSECT, true)
      canvas.drawBackground(brush)
      canvas.attachBrush(brush);
      canvas.drawPath(path)
      canvas.detachBrush();
      // 3.构造一个新的画刷对象，绘制文字
      const brush2 = new drawing.Brush()
      brush2.setColor({
        alpha: 255,
        red: 0,
        green: 0,
        blue: 0
      });
      const font = new drawing.Font();
      font.setSize(50);
      const textBlob = drawing.TextBlob.makeFromString('Hello', font, drawing.TextEncoding.TEXT_ENCODING_UTF8);
      canvas.attachBrush(brush2)
      canvas.drawTextBlob(textBlob, 0, height - this.getUIContext().vp2px(4)); // 设置文字位置
      canvas.detachBrush()
      this.pixelMap = pixelMap as PixelMap;
    })
  }
}