如何在 stageXL 中创建线、圆？

Question

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

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

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

Answer 1

您必须使用形状显示对象。要画一个圆你只需要写这个代码：

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 渲染器一起使用。这会将 Shape 绘制为也可以在 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);
}

如何在 stageXL 中创建线、圆？

How to create lines, circles in stageXL?

dart

stagexl