使用TextStyle绘制渐变文本的无效

[liusujin]

unity2018.4.8f1 windows editor dx11 uiwidgets 1.5.4preview0

`public class UIWidgetsCustomPanel : UIWidgetsPanel { protected override void OnEnable() { FontManager.instance.addFont(UnityEngine.Resources.Load("MaterialIcons-Regular"), "Material Icons"); FontManager.instance.addFont(UnityEngine.Resources.Load("GalleryIcons"), "GalleryIcons");

        //UnityEngine.Font font_sans_bold = UnityEditor.AssetDatabase.LoadAssetAtPath<UnityEngine.Font>("Assets/AddressableAssets/Font/SourceHanSansCN-Bold.otf");
        //UnityEngine.Font font_sans_regular = UnityEditor.AssetDatabase.LoadAssetAtPath<UnityEngine.Font>("Assets/AddressableAssets/Font/SourceHanSansCN-Regular.otf");
        //FontManager.instance.addFont(font_sans_bold, "SourceHanSansCN-Bold");
        //FontManager.instance.addFont(font_sans_regular, "SourceHanSansCN-Regular");

        //AkzidenzGrotesk-LightCond

        base.OnEnable();
    }

    protected override Widget createWidget()
    {
        return new MaterialApp(
            home: new Center(
                child: new Text("渐变文本测试",
                style: new TextStyle(
                    fontSize: 48,
                    foreground: new Paint
                    {
                        shader = new LinearGradient(
                            begin: Alignment.topCenter,
                            end: Alignment.bottomCenter,
                            colors: new List<Color>
                            {
                                new Color(0xFF68E194),
                                new Color(0xFF3AC99E),
                                new Color(0xFF56C6EE),
                            }
                            ).createShader(Rect.fromLTWH(0, 0, 300, 60))
                    }
                    )
                )
                )
            );
    }
}`

[liusujin]

[zhuxingwei]

hi多谢您的关注！我们这几天会看一下这个问题。多谢！

[IIzzaya]

326 Bug已修复，已经可以支持绘制渐变文本

测试代码

protected override Widget createWidget() {
    return new MaterialApp(
        home: new Center(
            child: new Text("渐变文本测试",
                style: new TextStyle(
                    fontSize: 48,
                    foreground: new Paint() {
                        shader = new LinearGradient(
                            begin: Alignment.topCenter,
                            end: Alignment.bottomCenter,
                            colors: new List<Color> {
                                new Color(0xFF68E194),
                                new Color(0xFF3AC99E),
                                new Color(0xFF56C6EE),
                            }
                        ).createShader(Rect.fromLTWH(0, 0, 300, 60))
                    }
                )
            )
        )
    );
}

• 如图显示为蓝色的文本，是因为.createShader(Rect.fromLTWH())的Rect中心不在Center的中心，而是在画布左上角的(0, 0)处，Shader是按照整个屏幕大小进行绘制，因此需自行获取到Panel的大小，将参数传入进去。
• 如有下划线，是因为没有warp一个Scaffold的情况下默认的TextStyle的decoration参数为TextDecoration.underline,需要改为TextDecoration.none

如下代码是修改后的样子

protected override Widget createWidget() {
    return new MaterialApp(
        home: new Container(
            child: new Text("渐变文本测试",
                style: new TextStyle(
                    fontSize: 48,
                    foreground: new Paint() {
                        shader = new LinearGradient(
                            begin: Alignment.topCenter,
                            end: Alignment.bottomCenter,
                            colors: new List<Color> {
                                new Color(0xFF68E194),
                                new Color(0xFF3AC99E),
                                new Color(0xFF56C6EE),
                            }
                        ).createShader(Rect.fromLTWH(0, 0, 300, 60))
                    },
                    decoration: TextDecoration.none
                )
            )
        )
    );
}

通过包装做到自定义渐变文本

• 通过PostFrameCallback可以做到在每次绘制RenderBox后获取其Size和全局Offset，从而调整Gradient的大小和位置，让其保持在文字中央

public class GradientText : StatefulWidget {
    public GradientText(Key key = null) : base(key) { }

    public override State createState() {
        return new GradientTextState();
    }
}

public class GradientTextState : State<GradientText> {
    GlobalKey myTextKey = GlobalKey.key();
    RenderBox myTextRenderBox;

    public override void initState() {
        base.initState();
        WidgetsBinding.instance.addPostFrameCallback((_) => this._recordSize());
    }

    void _recordSize() {
        this.setState(
            () => { this.myTextRenderBox = (RenderBox) this.myTextKey.currentContext.findRenderObject(); }
        );
    }

    PaintShader getTextGradient(RenderBox renderBox) {
        if (renderBox == null) return null;

        return new LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: new List<Color> {
                new Color(0xFF68E194),
                new Color(0xFF3AC99E),
                new Color(0xFF56C6EE),
            }
        ).createShader(Rect.fromLTWH(
            renderBox.localToGlobal(Offset.zero).dx,
            renderBox.localToGlobal(Offset.zero).dy,
            renderBox.size.width / Window.instance.devicePixelRatio,
            renderBox.size.height / Window.instance.devicePixelRatio)
        );
    }

    public override Widget build(BuildContext context) {
        return new Text(
            key: this.myTextKey,
            data: "渐变文本测试",
            style: new TextStyle(
                fontSize: 48,
                fontWeight: FontWeight.bold,
                foreground: new Paint() {
                    shader = this.getTextGradient(this.myTextRenderBox)
                },
                decoration: TextDecoration.none
            )
        );
    }
}