ngx-canvas v0.0.11

NgxCanvas

Table of contents

• Quick example
• Installation
• Usage
• API
• Events
• Types
• Demo

Quick example

<ngx-canvas
  width="375"
  height="667"
  [options]="options"
  (drawComplete)="drawComplete($event)"
></ngx-canvas>

Installation

To install ngx-canvas run the following command:

npm i ngx-canvas --save

Usage

First, import the NgxCanvasModule into the AppModule:

import { NgModule } from '@angular/core';
import { NgxCanvasModule } from 'ngx-canvas';

@NgModule({
  imports: [
    NgxCanvasModule.forRoot()
  ]
})
export class AppModule {}

Now you can simply use the ngx-canvas component and provide your custom options via the options binding:

import { Component, OnInit } from '@angular/core';
import { DrawProps, ImageProps, TextProps, PropagateProps, RectProps, LineProps, StepsProps, Types } from 'ngx-canvas';

@Component({
  selector: 'app-root',
  template: `
    <ngx-canvas [options]="options" (drawComplete)="drawComplete($event)"></ngx-canvas>
  `,
})
export class AppComponent implements OnInit {
  options: DrawProps;

  ngOnInit(): void {
    // draw image
    const imgs: ImageProps[] = [
      {
        type: Types.image,
        url: 'assets/images/bg.png',
        top: 0,
        left: 0,
        width: 375,
        height: 667
      }
    ];
    // draw text
    const txts: TextProps[] = [
      {
        type: Types.text,
        content: 'Have good time.',
        top: 100,
        left: 100,
        fontSize: 18,
        color: '#FFFFFF',
        lineHeight: 30,
        width: 200,
        lineNum: 1,
        fontFamily: 'Microsoft YaHei'
      }
    ];
    // draw rect
    const rects: RectProps[] = [
      {
        type: Types.rect,
        width: 375,
        height: 667,
        x: 0,
        y: 280,
        backgroundColor: '#FFFFFF',
        borderRadius: 30
      }
    ];
    // draw line
    const lines: LineProps[] = [
      {
        type: Types.line,
        color: '#999',
        startX: 10,
        startY: 200,
        endX: 350,
        endY: 200,
        width: 2,
        lineCap: 'round'
      }
    ];
    // draw steps
    const steps: StepsProps[] = [{
      type: Types.steps,
      circleX: 48,
      circleY: 530,
      lineHeight: 80,
      lineCount: 3,
      lineColor: '#FFF',
      circleColor: '#FFF',
      direction: 'ltr',
      circleStyle: 'solid',
      lineStyle: 'solid'
    }];
    // draw options
    this.options = {
      debug: true, // Used to debug the presentation canvas
      width: 375,
      height: 667,
      backgroundColor: '#47b785',
      views: [
        ...imgs,
        ...txts,
        ...rects,
        ...lines,
        ...steps
      ],
      extra: 'Extend the params and return after drawing.'
    };
  }

  drawComplete(propagate: PropagateProps): void {
    const { dataUrl, canvas, ctx, extra } = propagate;
    // downloading canvas element to an image
    const a = document.createElement('a');
    document.body.appendChild(a);
    a.setAttribute('style', 'display: none');
    a.href = dataUrl;
    a.download = 'filename';
    a.click();
    a.remove();
  }
}

Notice that you will need to import the NgxCanvasModule into other modules as it exports ngx-canvas component. But forRoot has to be called only once!

API

Bindings

Events

Types

Demo

You can clone this repo to your working copy and then launch the demo page in your local machine:

npm install
npm run build:prod
npm run start

The demo page server is listening on: http://localhost:4200

• online demo