forked from williamngan/pts
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
413f17d
commit f4c9eb2
Showing
8 changed files
with
583 additions
and
56 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| import {Form} from "./Form"; | ||
| import {IPt, Pt} from "./Pt"; | ||
| import {CanvasSpace} from "./CanvasSpace"; | ||
| import {Const} from "./Util"; | ||
|
|
||
| export class CanvasForm extends Form { | ||
|
|
||
| protected _space:CanvasSpace; | ||
| protected _ctx:CanvasRenderingContext2D; | ||
|
|
||
| constructor( space:CanvasSpace ) { | ||
| super(); | ||
| this._space = space; | ||
| this._ctx = this._space.ctx; | ||
| this._ctx.fillStyle = "#e9f1f5"; | ||
| this._ctx.strokeStyle = "#37405a"; | ||
| } | ||
|
|
||
| public get space():CanvasSpace { return this._space; } | ||
|
|
||
|
|
||
| /** | ||
| * Set current fill style. For example: `form.fill("#F90")` `form.fill("rgba(0,0,0,.5")` `form.fill(false)` | ||
| * @param c fill color which can be as color, gradient, or pattern. (See [canvas documentation](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle)) | ||
| * @return this | ||
| */ | ||
| public fill( c:string|boolean ):this { | ||
| if (typeof c == "boolean") { | ||
| this.filled = c; | ||
| } else { | ||
| this.filled = true; | ||
| this._ctx.fillStyle = c; | ||
| } | ||
| return this; | ||
| } | ||
|
|
||
|
|
||
| /** | ||
| * Set current stroke style. For example: `form.stroke("#F90")` `form.stroke("rgba(0,0,0,.5")` `form.stroke(false)` `form.stroke("#000", 0.5, 'round')` | ||
| * @param c stroke color which can be as color, gradient, or pattern. (See [canvas documentation](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle)) | ||
| * @param width Optional value (can be floating point) to set line width | ||
| * @param linejoin Optional string to set line joint style. Can be "miter", "bevel", or "round". | ||
| * @param linecap Optional string to set line cap style. Can be "butt", "round", or "square". | ||
| * @return this | ||
| */ | ||
| public stroke( c:string|boolean, width?:number, linejoin?:string, linecap?:string ):this { | ||
| if (typeof c == "boolean") { | ||
| this.stroked = c; | ||
| } else { | ||
| this.stroked = true; | ||
| this._ctx.strokeStyle = c; | ||
| if (width) this._ctx.lineWidth = width; | ||
| if (linejoin) this._ctx.lineJoin = linejoin; | ||
| if (linecap) this._ctx.lineCap = linecap; | ||
| } | ||
| return this; | ||
| } | ||
|
|
||
|
|
||
| protected _paint() { | ||
| if (this._filled) this._ctx.fill(); | ||
| if (this._stroked) this._ctx.stroke(); | ||
| } | ||
|
|
||
| public point( p:IPt, radius:number=5, shape:string="square" ):this { | ||
| if (CanvasForm[shape]) { | ||
| CanvasForm[shape]( this._ctx, p, radius ); | ||
| this._paint(); | ||
| } else { | ||
| console.warn( `${shape} is not a static function of CanvasForm`); | ||
| } | ||
| return this; | ||
| } | ||
|
|
||
|
|
||
| public static circle( ctx:CanvasRenderingContext2D, pt:IPt, radius:number ) { | ||
| ctx.beginPath() | ||
| ctx.arc( pt.x, pt.y, radius, 0, Const.two_pi, false ); | ||
| ctx.closePath(); | ||
| } | ||
|
|
||
| public static square( ctx:CanvasRenderingContext2D, pt:IPt, halfsize:number ) { | ||
| let x1 = pt.x-halfsize | ||
| let y1 = pt.y-halfsize | ||
| let x2 = pt.x+halfsize | ||
| let y2 = pt.y+halfsize | ||
|
|
||
| // faster than using `rect` | ||
| ctx.beginPath() | ||
| ctx.moveTo( x1, y1 ) | ||
| ctx.lineTo( x1, y2 ) | ||
| ctx.lineTo( x2, y2 ) | ||
| ctx.lineTo( x2, y1 ) | ||
| ctx.closePath() | ||
| } | ||
|
|
||
|
|
||
| public draw( ps:Pt[], shape?:string ):this { | ||
| return this; | ||
| } | ||
|
|
||
| } |
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import {Space} from "./Space"; | ||
| import {Pt, IPt} from "./Pt"; | ||
|
|
||
| export class Font { | ||
| public size:number; | ||
| public face:string; | ||
| public style:string; | ||
|
|
||
| constructor( size=11, face="sans-serif", style="") { | ||
| this.size = size; | ||
| this.face = face; | ||
| this.style = style; | ||
| } | ||
|
|
||
| get data():string { return `${this.style} ${this.size}px ${this.face}` }; | ||
| } | ||
|
|
||
|
|
||
| export abstract class Form { | ||
|
|
||
| protected _filled = true; | ||
| public get filled():boolean { return this._filled; } | ||
| public set filled( b:boolean ) { this._filled = b; } | ||
|
|
||
| protected _stroked = true; | ||
| public get stroked():boolean { return this._stroked; } | ||
| public set stroked( b:boolean ) { this._stroked = b; } | ||
|
|
||
| protected _font:Font; | ||
| public get font():Font { return this._font; } | ||
| public set font( b:Font ) { this._font = b; } | ||
|
|
||
| abstract get space():Space; | ||
|
|
||
| public abstract fill( c:string|boolean ):this; | ||
|
|
||
| public abstract stroke( c:string|boolean, width?:number, linejoin?:string, linecap?:string ):this; | ||
|
|
||
| public abstract point( p:IPt, radius:number, shape?:string ): this; | ||
|
|
||
| public abstract draw( ps:Pt[], shape?:string ): this; | ||
|
|
||
| } |
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
Oops, something went wrong.