A portable canvas that can work in many platforms (Flutter, Web, Desktop, in-memory Image).

Related tags

Templates pcanvas
Overview

pcanvas

pub package Null Safety CI GitHub Tag New Commits Last Commits Pull Requests Code size License

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;
  }
}

Examples

See the usage examples at:

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:

Source

The official source code is hosted @ GitHub:

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: [email protected].

License

Apache License - Version 2.0

You might also like...

This is the code for the POAPin app, which is written in Flutter and currently supports iOS, Android, and Web platforms.

This is the code for the POAPin app, which is written in Flutter and currently supports iOS, Android, and Web platforms.

POAPin This is the code for the POAPin app, which is written in Flutter and currently supports iOS, Android, and Web platforms. 💠 Get the app Platfor

Nov 7, 2022

A web-safe implementation of dart.io.Platforms. Helps avoid the "Unsupported operation: Platform._operatingSystem" runtime error.

Universal Platform - A Web-safe Platform class Currently, if you include the dart.io.Platform anywhere in your code, your app will throw the following

Nov 20, 2022

You can create a star easily and decide how many angle or color of the star, even the fat and progress of the star.

You can create a star easily and decide how many angle or color of the star, even the fat and progress of the star.

Apr 14, 2021

Flathub-desktop - Unofficial Desktop Client for Flathub

Flathub-desktop - Unofficial Desktop Client for Flathub

Flathub Desktop Unofficial Desktop Client for Flathub How to build and run: You

Sep 19, 2022

A weather app built to learn how to use Canvas and Animation in Flutter.

A weather app built to learn how to use Canvas and Animation in Flutter.

Weather Quick Disclaimer I removed my private OpenWeather API key from the repo, if you want to get the weather forecast use your own in the openweath

Dec 21, 2022

Sample Flutter Drawing App which allows the user to draw onto the canvas along with color picker and brush thickness slider.

Sample Flutter Drawing App which allows the user to draw onto the canvas along with color picker and brush thickness slider.

DrawApp Sample Flutter Drawing App which allows the user to draw onto the canvas along with color picker and brush thickness slider. All code free to

Nov 3, 2022

This is an application that uses the Flutter framework, SQFLite as a database to record blood pressure, blood sugar, BMI, or create medication reminders in multi mobile platforms You can run this project on iOS, Android

This is an application that uses the Flutter framework, SQFLite as a database to record  blood pressure, blood sugar, BMI, or create medication reminders in multi mobile platforms You can run this project on iOS, Android

This is an application that uses the Flutter framework, SQFLite as a database to record blood pressure, blood sugar, BMI, or create medication reminders in multi mobile platforms You can run this project on iOS, Android

Dec 29, 2022

Flutter simple image crop - A simple and easy to use flutter plugin to crop image on iOS and Android

Flutter simple image crop - A simple and easy to use flutter plugin to crop image on iOS and Android

Image Zoom and Cropping plugin for Flutter A simple and easy used flutter plugin to crop image on iOS and Android. Installation Add simple_image_crop

Dec 14, 2021
Comments
  • v1.0.7

    v1.0.7

    • PCanvasPainter:
      • Added zIndex to define the painter layer. Previously was fixed to 0.
    • Added PCanvasFactory:
      • Allows extra platform dependent implementations: - pixelsToPNG and pixelsToDataUrl
    • PCanvasBitmap.toPNG:
      • Ensure singleFrame: true
    opened by gmpassos 0
  • v1.0.6

    v1.0.6

    • PCanvas:
      • Constructor: added parameter initialPixels.
      • Added method setPixels.
      • Added support for clip and subClip.
      • Added transform: new PcanvasTransform class.
      • Added saveState, restoreState and callWithGuardedState.
      • elements now is unmmodifiable.
    • PCanvasPixels:
      • Added setPixel, setPixelFrom, setPixelsLineFrom, setPixelsColumnFrom and setPixelsRectFrom.
      • Added putPixels, copyRectangle and copyRect.
      • Added toPCanvas, toPNG and toDataUrl.
    • New PCanvasElementContainer:
      • New PCanvasPanel2D and PRectangleElement.
    • PRectangle:
      • Added intersectsRectangle, intersects and intersection.
      • Added containsRectangle, contains, containsPoint and containsXY.
      • Added transform.
    • image: ^4.0.7
    • test: ^1.22.1
    • collection: ^1.16.0
    opened by gmpassos 0
  • v1.0.2

    v1.0.2

    • PCanvasEvent now is abstract:
      • PCanvasClickEvent: for mouse and touch events.
      • PCanvasKeyEvent: for keyboatd events.
    • PCanvasPainter:
      • Added support to key events
    • PCanvas:
      • Added support to fill gradient operations.
    • Added PCanvasElement
      • Base class for personalized canvas elements.
    opened by gmpassos 0
Releases(1.0.7)
Owner
Graciliano Monteiro Passos
Graciliano Monteiro Passos
A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your issue.

r_scan A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your iss

PengHui Li 112 Nov 11, 2022
Data Migrator - provide a universal translator for data by being portable, diverse, and efficient in migrating and converting data across discrete schemas

Data Migrator - provide a universal translator for data by being portable, diverse, and efficient in migrating and converting data across discrete schemas

Tanner Meade 77 Jan 2, 2023
Flutter package to render html as widgets that supports hyperlink, image, audio, video, iframe and many other tags.

HtmlWidget monorepo This repo contains the source code for everything HtmlWidget-related. Name Link flutter_widget_from_html_core flutter_widget_from_

Đào Hoàng Sơn 445 Jan 6, 2023
A shopper Flutter app that use BloC pattern and CRUD operations with different ways(memory/sqlite/http)

The project is maintained by a non-profit organisation, along with an amazing collections of Flutter samples. We're trying to make continuous commits

Flutter Samples 80 Nov 10, 2022
System info plus - A Flutter plugin to get device Random Access Memory (RAM) size

system_info_plus A Flutter plugin to get device Random Access Memory (RAM) size.

Sebghatullah Yusuf 2 Aug 21, 2022
A flutter library for loading images from network, resizing as per container size and caching while being memory sensitive.

Optimized Cached Image A flutter library for loading images from network, resizing and caching them for memory sensitivity. This resizes and stores th

Anvith Bhat 76 Dec 20, 2022
Trying out Flutter for desktop Web app development as an alternative to SPA frameworks (such as React and Angular) by recreating one of the pages of an existing CV Management web app

HTML Renderer Demo CanvasKit Renderer Demo Reddit discussion This repo contains a PoC of using Flutter as a traditional SPA framework for creating a d

Maxim Saplin 20 Oct 11, 2022
Just collection of UI designs build with flutter. Can run on any mobile, web & desktop.

Flutter UI Designs True cross platform app runs on web, mobile & desktop Download Requirements to run locally Flutter stable v2.0.0+ Dart VM version:

Hamza Iqbal 222 Dec 28, 2022