1

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

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

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

4

2 回答 2

2

您必须使用 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 中使用的纹理。这也是一种更快的方式来绘制矢量图形。

于 2015-07-05T05:30:25.120 回答
0

这是一个完整的示例,如果您想尝试一下,也可以从 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);
}
于 2015-07-05T16:22:40.773 回答