首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在Flutter中以编程方式更改Rive/Flare中渐变填充的开始/结束位置?

如何在Flutter中以编程方式更改Rive/Flare中渐变填充的开始/结束位置?
EN

Stack Overflow用户
提问于 2020-06-28 00:23:20
回答 1查看 106关注 0票数 1

我有一个简单的球,它使用渐变填充,使它看起来像是从一侧照亮的:

我想在Flutter中修改运行时的渐变填充(例如,让它看起来像是灯光相对于球移动)。我可以像这样找到坐标:

代码语言:javascript
复制
final fill = (artboard.getNode("Ellipse") as FlutterActorShape).fill as FlutterRadialFill;
print(fill.renderStart);
print(fill.renderEnd);

但是,我找不到修改这些值的方法。我尝试使用Vec2D来覆盖这些值,但是它不会改变呈现方式(可能是因为从这些值中计算出了一些需要无效的值?):

代码语言:javascript
复制
Vec2D.copy(
          _fill.renderStart,
          Vec2D.fromValues(
              200 - _component.x, 200 - _component.y));
EN

Stack Overflow用户

回答已采纳

发布于 2020-06-28 01:24:24

这个属性没有一个很好的有用的setter (关键帧操作它并使内部状态无效),但是通过一些额外的冗长(我们真的应该让这个更友好)代码,你可以做到:

代码语言:javascript
复制
class MutateGradient extends FlareController {
  // Store the fill so you don't need to look it up each frame.
  FlutterRadialFill _radialFill;

  // I chose to drive the end position of the gradient with a sin wave so i use
  // a field to accumulate the phase.
  double _phase = 0;

  @override
  bool advance(FlutterActorArtboard artboard, double elapsed) {
    if (_radialFill == null) {
      // Didn't find the fill during init, early out with a false meaning we're
      // done.
      return false;
    }

    _phase += elapsed;

    // No nice setter on the end so we have to set the values manually and then
    // mark the paint dirty so the update loop updates the actual paint and
    // points used to render. Note that the position here can be either in the
    // path's local transform or world (artboard) transform depending on whether
    // transformAffectsStroke was selected in Rive.
    Vec2D.copy(
        _radialFill.end, Vec2D.fromValues(-100, 100 + sin(_phase*2) * 50));
    _radialFill.markPaintDirty();

    // Return true to get another call the next frame...
    return true;
  }

  @override
  void initialize(FlutterActorArtboard artboard) {
    // Find the fill we want to manipulate.
    var node = artboard.getNode("Ellipse");
    if (node is FlutterActorShape) {
      var fill = node.fill;
      if (fill is FlutterRadialFill) {
        _radialFill = fill;
      }
    }
  }

  @override
  void setViewTransform(Mat2D viewTransform) {
    // Inentionally empty, we don't need to convert from artboard (world) to
    // view space in this example.
  }
}

发送free电子邮件到luigi@rive.app或随时公开羞辱我@luigirosso <3

票数 2
EN
查看全部 1 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/62612564

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档