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

Question

我刚进入舞台，我知道这些都是非常基本的问题，但我无法很快找到答案，所以我想，如果有人能和我一样，回答这个问题，那就太好了

如何在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

请记住，矢量形状目前只支持Canvas2D渲染器在StageXL中。我们目前也在研究WebGL渲染器的实现。如果在形状上使用applyCache方法，也可以将形状与applyCache呈现器一起使用。这将把形状绘制成一个纹理，可以在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);
}