Created
February 18, 2021 20:25
-
-
Save theAlgorithmist/75a8baa77ff15c47421a46031effe8a4 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Injectable } from '@angular/core'; | |
import { fabric } from 'fabric'; | |
import { POINT } from '../libs/point'; | |
@Injectable({providedIn: 'root'}) | |
export class FabricService | |
{ | |
// draw properties are public to keep the demo more compact; but, you break it ... you buy it | |
public strokeWidth: number; | |
public strokeColor: string; | |
public circleRadius: number; | |
public circleFill: string; | |
protected _canvas?: fabric.Canvas; | |
protected _points: Array<fabric.Circle>; | |
protected _polylines: Record<string, fabric.Polyline>; | |
constructor() | |
{ | |
this.strokeWidth = 2; | |
this.strokeColor = '#000000'; | |
this.circleFill = '#0000ff'; | |
this.circleRadius = 2; | |
this._points = new Array<fabric.Circle>(); | |
this._polylines = {} | |
} | |
public set canvas(surface: fabric.Canvas) | |
{ | |
if (surface !== undefined && surface != null && surface instanceof fabric.Canvas) { | |
this._canvas = surface; | |
} | |
} | |
public clear(): void | |
{ | |
if (this._canvas) | |
{ | |
this._points.forEach( (circle: fabric.Circle): void => { | |
this._canvas.remove(circle); | |
}); | |
this._points.length = 0; | |
Object.keys(this._polylines).forEach( (name: string): void => { | |
this._canvas.remove(this._polylines[name]); | |
}); | |
this._polylines = {}; | |
this._canvas.renderAll(); | |
} | |
} | |
public addPoint(p: POINT): void | |
{ | |
const circle: fabric.Circle = new fabric.Circle( | |
{ | |
left: p.x - this.circleRadius, | |
top: p.y - this.circleRadius, | |
fill: this.circleFill, | |
radius: this.circleRadius | |
}); | |
this._points.push(circle); | |
if (this._canvas) | |
{ | |
this._canvas.add(circle); | |
this._canvas.renderAll(); | |
} | |
} | |
public addPolyline(name: string, points: Array<POINT>, clear: boolean = true): void | |
{ | |
const polyLine: fabric.Polyline = new fabric.Polyline(points, | |
{ | |
strokeWidth: this.strokeWidth, | |
stroke: this.strokeColor, | |
fill: 'transparent', | |
}); | |
if (this._canvas) | |
{ | |
if (clear && this._polylines[name] !== undefined) { | |
this._canvas.remove(this._polylines[name]); | |
} | |
this._canvas.add(polyLine); | |
this._canvas.renderAll(); | |
} | |
this._polylines[name] = polyLine; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment