fluttercandies / extended_text

A powerful extended official text for Flutter, which supports Speical Text(Image,@somebody), Custom Background, Custom overFlow, Text Selection.
MIT License
664 stars 134 forks source link

overflowWidget感觉像溢出了,背景色变全黑 #118

Closed 7ye closed 1 year ago

7ye commented 3 years ago

P S)0W ~8_K6U_EBKE5T_%P 内容中间加了一个使用BackdropFilter做文字模糊的效果,只要加了这个,全文越界显示那儿肯定会直接变黑

zmtzawqlp commented 3 years ago

提供最简单的demo

7ye commented 3 years ago

完整DEMO代码:blur_test.txt

image

zmtzawqlp commented 2 years ago

因为对这部分做了 clip,用了 BlendMode.clear 方法,高模糊+这部分就变成了黑色. overwidget的图层在 高斯模糊之上.你应该对整个 extended text 做高斯模糊,用clippath 来处理哪一部分需要模糊

zmtzawqlp commented 1 year ago

你可以利用下面代码,为想要高斯模糊的文本添加 .

    style: TextStyle(
                    foreground: Paint()
                      ..maskFilter = MaskFilter.blur(BlurStyle.normal, 3.0)
                      ..color = Colors.black,
             ),

WidgetSpan 可以这样,并且把 [TextOverflowWidget.clearType] 设置为 TextOverflowClearType.clipRect

      return ExtendedWidgetSpan(
        child: SizedBox(
          width: size,
          height: size,
          child: ClipRect(
            child: Stack(
              children: [
                Image.asset(
                  EmojiUitl.instance.emojiMap[key]!,
                  width: size,
                  height: size,
                ),
                Positioned.fill(
                  child: BackdropFilter(
                    filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
                    child: Container(color: Colors.transparent),
                  ),
                ),
              ],
            ),
          ),

          //     CustomPaint(
          //   size: Size(size, size),
          //   child: Opacity(
          //     opacity: 0.5,
          //     child: Image.asset(
          //       EmojiUitl.instance.emojiMap[key]!,
          //       width: size,
          //       height: size,
          //     ),
          //   ),
          //   foregroundPainter: _BlurPainter(),
          //   // isComplex: true,
          // ),
        ),

        //style: textStyle,
        actualText: key,
        //imageWidth: size,
        // imageHeight: size,
        start: start!,
        //fit: BoxFit.fill,
        // margin: const EdgeInsets.only(left: 2.0, top: 2.0, right: 2.0),
        alignment: PlaceholderAlignment.middle,
      );

class _BlurPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawRect(
        Offset.zero & size,
        Paint()
          ..maskFilter = MaskFilter.blur(BlurStyle.normal, 5)
          ..color = Colors.black);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}