Setting Up
- Create a new Dart project:
dart create -t console my_stagexl_project cd my_stagexl_project- Add StageXL to your
pubspec.yaml:
dependencies: stagexl: ^3.0.0- Run
dart pub getto install the dependency.
Basic Example
Here’s a simple example of a StageXL application that displays a rectangle and handles a mouse click event.
main.dart
import 'dart:html';
import 'package:stagexl/stagexl.dart';
void main() {
// Create a Stage and Render the Canvas
var canvas = querySelector('#stage') as CanvasElement;
var stage = Stage(canvas);
var renderLoop = RenderLoop();
renderLoop.addStage(stage);
// Create a simple rectangle
var rectangle = Shape()
..graphics.rect(100, 100, 200, 100)
..graphics.fillColor(Color.Blue);
// Add the rectangle to the stage
stage.addChild(rectangle);
// Add mouse click event
rectangle.onMouseClick.listen((event) {
rectangle.graphics.clear();
rectangle.graphics.fillColor(Color.Red);
rectangle.graphics.rect(100, 100, 200, 100);
rectangle.graphics.fill();
});
// Start the render loop
renderLoop.start();
}
HTML Setup
Make sure you have an HTML file to load your Dart application. Create index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>StageXL Example</title>
<script defer src="main.dart.js"></script>
<style>
canvas {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<canvas id="stage" width="800" height="600"></canvas>
</body>
</html>
Build and Run
- Build your Dart application:
dart compile js main.dart -o main.dart.js- Open
index.htmlin your browser.
Explanation
- Stage: Represents the main area where you draw.
- Shape: Used to create shapes (like rectangles) that you can draw on the stage.
- RenderLoop: A loop that continuously renders the stage.
StageXL