dart - 如何在stageXL中创建线条、圆圈？

Question

我只是 stagexl 的新手，我知道这些是非常基本的问题，但我找不到真正快速的答案，所以我认为为与我处于相同位置的任何人回答这个问题会很好。

如何在 stagexl 中创建从 x 到 y 的线？

以及如何创建一个中心为 x 和半径为 y 的圆？

Answer 1

您必须使用 Shape 显示对象。要画一个圆圈，您只需要编写以下代码：

var shape = new Shape();
shape.graphics.beginPath();
shape.graphics.circle(100, 100, 50);
shape.graphics.closePath();
shape.graphics.fillColor(Color.Red);
stage.addChild(shape);

要画一条线，你必须这样做：

var shape = new Shape();
shape.graphics.beginPath();
shape.graphics.moveTo(50, 50);
shape.graphics.lineTo(250, 150);
shape.graphics.closePath();
shape.graphics.strokeColor(Color.Red);
stage.addChild(shape);

您可以在此处了解更多信息：

http://www.stagexl.org/docs/wiki-articles.html?article=graphics

请记住，矢量形状目前仅支持 StageXL 中的 Canvas2D 渲染器。我们目前也在研究 WebGL 渲染器的实现。如果您对 Shape 使用 applyCache 方法，您也可以将 Shapes 与 WebGL 渲染器一起使用。这会将形状绘制到一个也可以在 WebGL 中使用的纹理。这也是一种更快的方式来绘制矢量图形。

Answer 2

这是一个完整的示例，如果您想尝试一下，也可以从 gist 克隆：https ://gist.github.com/kasperpeulen/5cd660b5088311c64872

不过，我不确定我是否正确执行了 WebGL 示例，如果我以这种方式执行，WebGL 图形似乎很模糊。

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

main() {
  initWebGL();
  initCanvas2D();
}

initWebGL() {
  Stage stage = new Stage(html.querySelector('#WebGL'));
  new RenderLoop().addStage(stage);

  stage.addChild(circle(new Point(100, 100), 50));
  stage.addChild(line(new Point(50, 50), new Point(250, 150)));
  stage.applyCache(0,0,stage.sourceWidth,stage.sourceHeight);
}

initCanvas2D() {
  Stage stage = new Stage(html.querySelector('#Canvas2D'),
      options: new StageOptions()..renderEngine = RenderEngine.Canvas2D);
  new RenderLoop().addStage(stage);

  stage.addChild(circle(new Point(100, 100), 50));
  stage.addChild(line(new Point(50, 50), new Point(250, 150)));
}

Shape line(Point from, Point to, {color: Color.Black}) {
  return new Shape()
    ..graphics.beginPath()
    ..graphics.moveTo(from.x, from.y)
    ..graphics.lineTo(to.x, to.y)
    ..graphics.closePath()
    ..graphics.strokeColor(color);
}

Shape circle(Point<num> point, num radius, {color: Color.Black}) {
  return new Shape()
    ..graphics.beginPath()
    ..graphics.circle(point.x, point.y, radius)
    ..graphics.closePath()
    ..graphics.fillColor(color);
}