dart - StageXL GraphicsGradient

Question

使用GraphicsGradient创建的渐变似乎总是产生粉红色，没有实际的渐变。我已经从StageXL /example/example06/example06.dart复制了代码，将TransitionFunction更改为Transition。我还对舞台做了些微修改以适合我的计划，并以不同的颜色玩耍。

我正在使用的代码是这样的:

import 'dart:html' as html;
import 'package:stagexl/stagexl.dart';

void main()
{
  //------------------------------------------------------------------
  // Initialize the Display List
   //------------------------------------------------------------------

 Stage stage = new Stage(html.querySelector('#stage'),width: 800, height: 800);

   RenderLoop renderLoop = new RenderLoop();
   renderLoop.addStage(stage);

   //------------------------------------------------------------------
   // Draw a cloud with vectors
   //------------------------------------------------------------------

   var gradient = new GraphicsGradient.linear(230, 0, 370, 200);
   gradient.addColorStop(0, Color.LightBlue);
   gradient.addColorStop(1, Color.DarkBlue);

   Sprite sprite = new Sprite();
   sprite.useHandCursor = true;
   stage.addChild(sprite);

   Shape shape = new Shape();
   shape.pivotX = 278;
   shape.pivotY = 90;
   shape.x = 400;
   shape.y = 300;
   sprite.addChild(shape);

   shape.graphics
     ..beginPath()
     ..moveTo(170, 80)
     ..bezierCurveTo(130, 100, 130, 150, 230, 150)
     ..bezierCurveTo(250, 180, 320, 180, 340, 150)
     ..bezierCurveTo(420, 150, 420, 120, 390, 100)
     ..bezierCurveTo(430, 40, 370, 30, 340, 50)
     ..bezierCurveTo(320, 5, 250, 20, 250, 50)
     ..bezierCurveTo(200, 5, 150, 20, 170, 80)
     ..closePath()
     ..fillGradient(gradient)
     ..strokeColor(Color.Blue, 5);

   //------------------------------------------------------------------
   // Add some animation
   //------------------------------------------------------------------

   Tween tween1 = new Tween(shape, 3.0, Transition.easeInOutBack)
     ..animate.scaleX.to(2.5)
     ..animate.scaleY.to(2.5)
     ..delay = 1.0;

   Tween tween2 = new Tween(shape, 3.0, Transition.easeInOutBack)
     ..animate.scaleX.to(1.0)
     ..animate.scaleY.to(1.0)
     ..delay = 5.0;

   renderLoop.juggler.add(tween1);
   renderLoop.juggler.add(tween2);
 }

任何意见或帮助将不胜感激。

Answer 1

不幸的是，这是当前StageXL版本中WebGL渲染器的限制。描边和填充仅支持纯色。仅Canvas2D渲染器支持图形渐变和图案。您还可以在显示对象上使用applyCache方法，该方法将使用Canvas2D渲染一个临时纹理，该纹理还将通过WebGL渲染器显示正确的结果。

您可以像这样配置渲染器(在创建Stage实例之前执行此操作):

// to use the WebGL renderer (default)
StageXL.stageOptions.renderEngine = RenderEngine.WebGL;

// to use the Canvas2D renderer
StageXL.stageOptions.renderEngine = RenderEngine.Canvas2D;