颤动中文本上的纹理(图像)

Posted

技术标签:

【中文标题】颤动中文本上的纹理(图像)【英文标题】:texture (image) on text in flutter 【发布时间】:2019-04-03 14:57:15 【问题描述】:

有没有办法将图像(纹理)放在 Flutter 中的文本上?

如下图所示

【问题讨论】:

【参考方案1】:

在文本上绘制图像的操作是异步的,因为它等待图像加载并设置在TextStyle的前景着色器上。

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'dart:async';
import 'dart:typed_data';
import 'dart:ui' as ui;

String textureName = "images/texture.jpg";
 Future<TextStyle> textureText(TextStyle textStyle,
    ) async 
  ui.Image img;
  img = await ImageLoader.load(textureName);
  Float64List matrix4 = new Matrix4.identity().storage;
  return textStyle.copyWith(
      foreground: Paint1()
        ..shader = ImageShader(img, TileMode.mirror, TileMode.mirror, matrix4));

下面,FutureBuilder 调用textureText 并使用返回的TextStyle

  Widget tt = new FutureBuilder<TextStyle>(
    future: texturedText(
        TextStyle(fontSize: 70.0,), // a Future<String> or null
    builder: (BuildContext context, AsyncSnapshot<TextStyle> snapshot) 
      switch (snapshot.connectionState) 
        case ConnectionState.waiting:
          return new Text('Awaiting result...');
        default:
          if (snapshot.hasError)
            return new Text('Error: $snapshot.error');
          else
            return new Text(
              'TEXTURE',
              style: snapshot.data,
            );
      
    ,
  );

您可以像使用普通小部件一样使用tt (texturedText)。

complete example 也可以在此repo 中使用。

【讨论】:

谢谢,当我拖动这个文本时,纹理似乎也在移动。 我认为因为它是在文本上布局的,所以,当有文本位移时,纹理也会有相同的位移。 你能告诉我如何为 draggble 小部件做什么吗? 实际上,纹理并没有移动,如果纹理固定在自己的位置。但似乎纹理在移动。

以上是关于颤动中文本上的纹理(图像)的主要内容,如果未能解决你的问题,请参考以下文章

GPU上的纹理图像处理?

webgl 纹理

WebGL 颜色与纹理

我一直在尝试纹理这个立方体,它与图像一起纹理但不是以正确的方式

如何使用 GLUT 在按键上的纹理/帧缓冲区之间切换?

将灰度 OpenCV 图像传递给 OpenGL 纹理