如何每隔一秒随机绘制贝塞尔曲线?也使用transition.dart

Question

我想知道如何绘制每秒随动画变化的贝塞尔曲线。

Answer 1

这是一个非常具体的问题。一般的答案是图形类上的每个绘制命令都返回一个对象。以后可以使用此对象更改绘制命令的特性（x、y、颜色、宽度…）。这个例子应该给你一个想法：

import 'dart:html' as html;
import 'package:stagexl/stagexl.dart';
void main()  {
  var canvas = html.querySelector('#stage');
  var stage = new Stage(canvas, width: 800, height: 600);
  var renderLoop = new RenderLoop();
  renderLoop.addStage(stage);
  var shape = new Shape();
  var movetoCommand = shape.graphics.moveTo(100, 100);
  var bezierCommand = shape.graphics.bezierCurveTo(500, 200, 200, 500, 500, 500);
  var strokeCommand = shape.graphics.strokeColor(Color.Red, 15);
  stage.addChild(shape);
  stage.juggler.translation(500, 200, 5.0, Transition.sine).listen((v) {
    // change "controlX1" of the bezier draw command in an animation
    bezierCommand.controlX1 = v.toDouble();
  });
  stage.juggler.translation(200, 500, 5.0, Transition.sine).listen((v) {
    // change "controlX2" of the bezier draw command in an animation
    bezierCommand.controlX2 = v.toDouble();
  });
  stage.juggler.translation(15, 50, 15.0, Transition.sine).listen((v) {
    // change "width" of the stroke draw command in an animation
    strokeCommand.width = v.toDouble();
  });
}

我不会描述如何使贝塞尔曲线的位置随机，这只是上面显示的例子的一个特殊情况。