StageXL 图形渐变

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;

Answer 2

在获得有用的评论并尝试了两种方法之后，我决定沿用 applyCache() 路线，因为我想保持 WebGL 的速度。我的带有渐变填充的六边形精灵的代码如下所示（其中 root3over2 是全局定义的常量）：

Sprite getSprite(num x, num y, num hexSize) {

var gradient = new GraphicsGradient.linear(x-hexSize, y-hexSize, x + hexSize, y+ hexSize);
gradient.addColorStop(0, Color.BlanchedAlmond);
gradient.addColorStop(1, Color.Coral);

Sprite sprite = new Sprite()
   ..graphics.beginPath()
   ..graphics.moveTo( -1 * hexSize + x, y)
   ..graphics.lineTo(-0.5 * hexSize + x, root3over2 * hexSize  + y)
   ..graphics.lineTo(0.5 * hexSize + x, root3over2 * hexSize + y)
   ..graphics.lineTo(1 * hexSize + x, y)
   ..graphics.lineTo(0.5 * hexSize + x, -root3over2 * hexSize + y)
   ..graphics.lineTo(-0.5 * hexSize + x, -root3over2 * hexSize + y)
   ..graphics.closePath()
   ..graphics.fillGradient(gradient)
   ..graphics.strokeColor(Color.Black,2);

    sprite.applyCache(x - hexSize,y - hexSize, hexSize * 2, hexSize * 2);

    return sprite;
}

StageXL 图形渐变

StageXL GraphicsGradient

dart

stagexl