Comment dessiner la courbe de bezier au hasard pour chaque seconde? aussi en utilisant le transition.dart

Question

Je veux savoir comment dessiner la courbe bezier au hasard qui changent chaque seconde avec l'animation.

Answer 1

C'est une question très spécifique. La réponse générique est que chaque commande draw de la classe graphique renvoie un objet. Vous pouvez utiliser cet objet pour modifier les propriétés (x, y, couleur, largeur, ...) de la commande draw ultérieurement. Cet exemple devrait vous donner une idée:

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(); 
    }); 

} 

Je ne vais pas décrire comment faire les positions de la courbe de Bézier au hasard, c'est juste une affaire spécialisée de l'exemple ci-dessus.