pcanvas

Description:

pcanvas

pcanvas #









A portable canvas that can work in many platforms (Flutter, Web, Desktop, in-memory Image).
Motivation #
Canvas operations can be highly dependent to the platform of the canvas framework. The main idea of this package is to allow
the same behavior in multiple platforms and also improve performance and ease of use.
Platform Implementations #
When a PCanvas instance is created it will choose the proper
implementation for the platform:


PCanvasBitmap:

In-memory bitmap as canvas.



PCanvasHTML:

Web (dart:html) canvas using CanvasElement.



PCanvasFlutter:

Flutter (dart:ui) canvas using a CustomPainter.
Widget: PCanvasWidget.
Package: pcanvas_flutter



Usage #
import 'package:pcanvas/pcanvas.dart';

void main() async {
// Create a canvas of dimension 800x600:
var pCanvas = PCanvas(800, 600, MyCanvasPainter());

// Wait the canvas to load:
await pCanvas.waitLoading();

// Paint the canvas:
pCanvas.callPainter();

// Get the canvas pixels:
var pixels = await pCanvas.pixels;

// Convert the canvas to a PNG:
var pngData = await pCanvas.toPNG();

//...
}

class MyCanvasPainter extends PCanvasPainter {
late PCanvasImage img1;

@override
Future<bool> loadResources(PCanvas pCanvas) async {
var img1URL = 'https://i.postimg.cc/k5TnC1H9/land-scape-1.jpg';

pCanvas.log('** Loading image...');
img1 = pCanvas.createCanvasImage(img1URL);

await img1.load();
pCanvas.log('** Image loaded: $img1');

return true;
}

@override
bool paint(PCanvas pCanvas) {
// Clear the canvas with `colorGrey`:
pCanvas.clear(style: PStyle(color: PColor.colorGrey));

// Draw an image fitting the target area:
pCanvas.drawImageFitted(img1, 0, 0, pCanvas.width ~/ 2, pCanvas.height);

// Fill a rectangle at (10,10):
pCanvas.fillRect(
10, 10, 20, 20, PStyle(color: PColor.colorRed.copyWith(alpha: 0.30)));

// Fill a rectangle at (40,10):
pCanvas.fillRect(40, 10, 20, 20, PStyle(color: PColor.colorGreen));

var font = PFont('Arial', 14);
var text = 'Canvas pixelRatio: ${pCanvas.pixelRatio}';

// Measure `text`:
var m = pCanvas.measureText(text, font);

// Draw `text` at (10,55):
pCanvas.drawText(text, 10, 55, font, PStyle(color: PColor.colorBlack));

// Stroke a rectangle around the `text`:
pCanvas.strokeRect(10 - 2, 55 - 2, m.actualWidth + 4, m.actualHeight + 4,
PStyle(color: PColor.colorYellow));

// Stroke a `path`:
pCanvas.strokePath([100, 10, 130, 25, 100, 40], PStyle(color: PColor.colorRed, size: 3),
closePath: true);

return true;
}
}
copied to clipboard
Examples #
See the usage examples at:

https://github.com/gmpassos/pcanvas/tree/master/example

pcanvas_flutter #
To use PCanvas with Flutter you need
the package pcanvas_flutter,
where you can use the PCanvasWidget to build your UI.
GitHub project:

https://github.com/gmpassos/pcanvas_flutter

Source #
The official source code is hosted @ GitHub:

https://github.com/gmpassos/pcanvas

Features and bugs #
Please file feature requests and bugs at the issue tracker.
Contribution #
Any help from the open-source community is always welcome and needed:

Found an issue?

Please fill a bug report with details.


Wish a feature?

Open a feature request with use cases.


Are you using and liking the project?

Promote the project: create an article, do a post or make a donation.


Are you a developer?

Fix a bug and send a pull request.
Implement a new feature.
Improve the Unit Tests.


Have you already helped in any way?

Many thanks from me, the contributors and everybody that uses this project!



If you donate 1 hour of your time, you can contribute a lot,
because others will do the same, just be part and start with your 1 hour.
Author #
Graciliano M. Passos: gmpassos@GitHub.
License #
Apache License - Version 2.0