HarmonyOS鸿蒙Next中richeditor做为输入框使用混合模式实现文字渐变，图片和表情会受到渐变色影响显示不出来

HarmonyOS鸿蒙Next中richeditor做为输入框使用混合模式实现文字渐变，图片和表情会受到渐变色影响显示不出来 现方案：最外面套一层row加渐变色(用来给文字渐变色)混合模式为

blendMode(BlendMode.SRC_OVER,BlendApplyType.OFFSCREEN)

，里面richeditor模式为blendMode(BlendMode.DST_IN,BlendApplyType.OFFSCREEN) 实现文字渐变色了，但是图片、表情都会被渐变色渲染，怎么可以让图片和表情不被渐变色覆盖，显示原图。

代码。

想要的结果为：输入框没有背景色，外层的渐变色只会裁剪到文字上，表情和图片不受渐变色影响，能完整显示

Row() {
  RichEditor(this.options)
    .onReady(() => {
}.blendMode(BlendMode.DST_IN,BlendApplyType.OFFSCREEN)
}
.linearGradient({
  direction: GradientDirection.Right,
  colors: [['#FFF563FF', 0.0], ['#FF0253EB', 0.2], ['#FF0253EB', 0.5]})
.blendMode(BlendMode.SRC_OVER,BlendApplyType.OFFSCREEN)
.height(40)
.width(200)

在addimagespan或者addbuildspan添加的都会被影响。

图片和表情通过 this.addBuildSpan 传一个自定义builder实现，效果如下：

cke_16212.png

环境api20以下，目前为sdk17，兼容低版本实现，


更多关于HarmonyOS鸿蒙Next中richeditor做为输入框使用混合模式实现文字渐变，图片和表情会受到渐变色影响显示不出来的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

表情加载不出来

更多关于HarmonyOS鸿蒙Next中richeditor做为输入框使用混合模式实现文字渐变，图片和表情会受到渐变色影响显示不出来的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


学习，

在 HarmonyOS Next 中，richeditor 使用混合模式实现文字渐变时，混合效果会作用于整个编辑器内容容器，包括图片和表情等 EmbeddedObject。由于混合模式将渐变色与所有像素进行混合，导致非文字元素的原始颜色被覆盖或失真而不可见。需为文字单独设置渐变，或对图片、表情设置 blendMode: BlendMode.NONE 以排除混合影响。

当前方案中 blendMode(DST_IN, OFFSCREEN) 作用在 RichEditor 整体绘制结果上，会将 Row 的渐变颜色与 RichEditor 所有内容的 alpha 相乘。无论文字、图片还是表情，只要 alpha > 0 的区域，都会显示为渐变颜色，原图颜色丢失，所以图片和表情被“染色”。

这是组件级混合模式的固有限制——无法针对 RichEditor 内部的不同图元做差异化混合。要达成“文字渐变，图片/表情保持原样”，需要放弃在 RichEditor 上使用 blendMode，转而从文本颜色本身着手。例如对文字 Span 动态设置渐变色号来模拟渐变效果，或将图片、表情用独立视图覆盖渲染——但在输入框编辑交互中较难落地。当前 SDK 17 版本下，直接依赖混合模式无法同时满足这两个需求。

回到顶部