Question

我刚刚接触stagexl，我知道这些都是非常基本的问题，但是我找不到快速的答案，所以我觉得这对任何人都有同样的答案会很好我的位置。

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

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

Answer 1

您必须使用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);

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

FlowDirection="RightToLeft"

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

EXCEPT

请注意，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中创建线条，圆圈？

2 个答案: