StageXL 图形渐变答案

【问题标题】：StageXL GraphicsGradientStageXL 图形渐变
【发布时间】：2016-05-06 07:37:40
【问题描述】：

使用 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);
 }

任何 cmets 或帮助将不胜感激。

【问题讨论】：

标签： dart stagexl

【解决方案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;

【讨论】：

非常感谢您的回答。我会按照建议解决这个问题
请注意，Canvas2D 渲染器可能比 WebGL 渲染器慢。如果您使用许多共享公共纹理的 BitmapData 资源，WebGL 渲染器会更快。

【解决方案2】：

在有用的 cmets 并尝试了这两种方法之后，我决定走 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;
}

【讨论】：