Как создать линии, круги в stageXL?

Question

Я просто новичок в stagexl, я знаю, что это очень простые вопросы, но я не мог найти ответ очень быстро, поэтому я подумал, что было бы хорошо, если бы это ответили на кого-либо в том же положении, что и я.

Как создать строку из x в y в stagexl?

И как создать круг с центром 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

Обратите внимание, что векторные фигуры в настоящее время поддерживаются только с помощью рендерера Canvas2D в StageXL. В настоящее время мы также работаем над реализацией WebGL-рендеринга. Вы также можете использовать фигуры с визуализатором WebGL, если вы используете метод applyCache в Shape. Это нарисует форму на текстуру, которая также может использоваться в WebGL. Это также гораздо более быстрый способ рисовать векторную графику.

Answer 2

Вот полный пример, который вы можете также клонировать от сути, если вы хотите попробовать это: 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); 
}