Skip to content

Commit fa6a59d

Browse files
kyranetkyranet
committed
0.3.0 release for the 2.0/Alpha branch
1 parent 7dfe3ac commit fa6a59d

File tree

5 files changed

+144
-43
lines changed

5 files changed

+144
-43
lines changed

‎CHANGELOG.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,15 @@ All notable changes to this project will be documented in this file.
44
The format is based on [Keep a Changelog](http://keepachangelog.com/)
55
and this project adheres to [Semantic Versioning](http://semver.org/).
66

7+
## 0.3.0
8+
### Added
9+
- **Typings**. This package will also work in TypeScript.
10+
- `createBeveledPath()` same usage as `createBeveledClip()`, but does not create clips (so you can use shadows and fill to colourize it).
11+
- `createRoundPath()` same usage as `createRoundClip()`, but does not create clips (so you can use shadows and fill to colourize it).
12+
13+
### Changed
14+
- **Canvas** has been moved from dependency to **peer dependency**.
15+
716
## 0.2.0
817
### Changed
918
- `addResponsiveText()` changed the parser to be passive, faster, and more accurate.

‎METHODS.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,9 @@
3131
| addImage | `buffer`, `x`, `y`, `width`, `height`, `options = {}`
3232
| addRoundImage | `buffer`, `x`, `y`, `width`, `height`, `radius = 10`
3333
| addBevelImage | `buffer`, `x`, `y`, `width`, `height`, `radius = 10`
34+
| createRoundPath | `x`, `y`, `radius`, `start = 0`, `angle = Math.PI * 2`
3435
| createRoundClip | `x`, `y`, `radius`, `start = 0`, `angle = Math.PI * 2`
36+
| createBeveledPath | `x`, `y`, `width`, `height`, `radius`
3537
| createBeveledClip | `x`, `y`, `width`, `height`, `radius`
3638
| setColor | `color`
3739
| setTextFont | `font`

‎package.json‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,23 @@
11
{
22
"name": "canvas-constructor",
3-
"version": "0.2.0",
3+
"version": "0.3.0",
44
"description": "A ES6 class for node-canvas with built-in functions and chained methods.",
55
"main": "index.js",
6+
"types": "typings/index.d.ts",
67
"scripts": {
7-
"test": "eslint --fix ./"
8+
"test": "npx eslint --fix src test && npx tslint --fix 'typings/*.ts'"
89
},
910
"repository": {
1011
"type": "git",
1112
"url": "git+https://github.com/kyranet/canvasConstructor.git"
1213
},
14+
"peerDependencies": {
15+
"canvas": "github:Automattic/node-canvas"
16+
},
1317
"devDependencies": {
14-
"eslint": "^4.4.1"
18+
"eslint": "^4.7.2",
19+
"tslint": "^5.7.0",
20+
"typescript": "^2.5.2"
1521
},
1622
"keywords": [
1723
"node-canvas",
@@ -23,8 +29,5 @@
2329
"bugs": {
2430
"url": "https://github.com/kyranet/canvasConstructor/issues"
2531
},
26-
"homepage": "https://github.com/kyranet/canvasConstructor#readme",
27-
"dependencies": {
28-
"canvas": "github:Automattic/node-canvas"
29-
}
32+
"homepage": "https://github.com/kyranet/canvasConstructor#readme"
3033
}

‎src/canvas.js‎

Lines changed: 63 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -158,37 +158,6 @@ class CanvasConstructor {
158158
return this;
159159
}
160160

161-
/**
162-
* Add a circle or semi circle.
163-
* @param {number} x The position x in the center of the circle.
164-
* @param {number} y The position y in the center of the ircle.
165-
* @param {number} radius The radius for the clip.
166-
* @returns {CanvasConstructor}
167-
* @chainable
168-
*/
169-
addCircle(x, y, radius) {
170-
this.context.beginPath();
171-
this.context.arc(x, y, radius, 0, Math.PI * 2, false);
172-
this.context.closePath();
173-
this.context.fill();
174-
return this;
175-
}
176-
177-
/**
178-
* Add a rectangle.
179-
* @param {number} x The position x to start drawing the element.
180-
* @param {number} y The position y to start drawing the element.
181-
* @param {number} width The width of the element.
182-
* @param {number} height The heigth of the element.
183-
* @returns {CanvasConstructor}
184-
* @chainable
185-
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect
186-
*/
187-
addRect(x, y, width, height) {
188-
this.context.fillRect(x, y, width, height);
189-
return this;
190-
}
191-
192161
/**
193162
* Add a text.
194163
* @param {string} text The text to write.
@@ -459,7 +428,19 @@ class CanvasConstructor {
459428
}
460429

461430
/**
462-
* Create a round clip.
431+
* Add a circle or semi circle.
432+
* @param {number} x The position x in the center of the circle.
433+
* @param {number} y The position y in the center of the ircle.
434+
* @param {number} radius The radius for the clip.
435+
* @returns {CanvasConstructor}
436+
* @chainable
437+
*/
438+
addCircle(x, y, radius) {
439+
return this.createRoundPath(x, y, radius).fill();
440+
}
441+
442+
/**
443+
* Create a round path.
463444
* @param {number} x The position x in the center of the clip's circle.
464445
* @param {number} y The position y in the center of the clip's circle.
465446
* @param {number} radius The radius for the clip.
@@ -468,16 +449,29 @@ class CanvasConstructor {
468449
* @returns {CanvasConstructor}
469450
* @chainable
470451
*/
471-
createRoundClip(x, y, radius, start = 0, angle = Math.PI * 2) {
452+
createRoundPath(x, y, radius, start = 0, angle = Math.PI * 2) {
472453
this.context.save();
473454
this.context.beginPath();
474455
this.context.arc(x, y, radius, start, angle, false);
475-
this.context.clip();
476456
return this;
477457
}
478458

479459
/**
480460
* Create a round clip.
461+
* @param {number} x The position x in the center of the clip's circle.
462+
* @param {number} y The position y in the center of the clip's circle.
463+
* @param {number} radius The radius for the clip.
464+
* @param {number} [start=0] The degree in radians to start drawing the circle.
465+
* @param {number} [angle=Math.PI * 2] The degree in radians to finish drawing the circle, defaults to a full circle.
466+
* @returns {CanvasConstructor}
467+
* @chainable
468+
*/
469+
createRoundClip(x, y, radius, start = 0, angle = Math.PI * 2) {
470+
return this.createRoundPath(x, y, radius, start, angle).clip();
471+
}
472+
473+
/**
474+
* Create a round path.
481475
* @param {number} x The position x to start drawing clip.
482476
* @param {number} y The position y to start drawing clip.
483477
* @param {number} width The width of clip.
@@ -486,7 +480,7 @@ class CanvasConstructor {
486480
* @returns {CanvasConstructor}
487481
* @chainable
488482
*/
489-
createBeveledClip(x, y, width, height, radius) {
483+
createBeveledPath(x, y, width, height, radius) {
490484
if (width > 0 && height > 0) {
491485
radius = Math.min(radius, width / 2, height / 2);
492486
this.context.beginPath();
@@ -505,6 +499,35 @@ class CanvasConstructor {
505499
return this;
506500
}
507501

502+
/**
503+
* Create a round clip.
504+
* @param {number} x The position x to start drawing clip.
505+
* @param {number} y The position y to start drawing clip.
506+
* @param {number} width The width of clip.
507+
* @param {number} height The heigth of clip.
508+
* @param {number} radius The radius for clip's rounded borders.
509+
* @returns {CanvasConstructor}
510+
* @chainable
511+
*/
512+
createBeveledClip(x, y, width, height, radius) {
513+
return this.createBeveledPath(x, y, width, height, radius).clip();
514+
}
515+
516+
/**
517+
* Add a rectangle.
518+
* @param {number} x The position x to start drawing the element.
519+
* @param {number} y The position y to start drawing the element.
520+
* @param {number} width The width of the element.
521+
* @param {number} height The heigth of the element.
522+
* @returns {CanvasConstructor}
523+
* @chainable
524+
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect
525+
*/
526+
addRect(x, y, width, height) {
527+
this.context.fillRect(x, y, width, height);
528+
return this;
529+
}
530+
508531
/**
509532
* Set a color for the canvas' context.
510533
* @param {string} color A canvas' color resolvable.
@@ -992,7 +1015,11 @@ class CanvasConstructor {
9921015
* @returns {CanvasConstructor}
9931016
*/
9941017
static registerFont(path, family) {
995-
Canvas.registerFont(path, { family });
1018+
if (family && typeof family === 'object' && Array.isArray(family) === false && 'family' in family)
1019+
Canvas.registerFont(path, family);
1020+
else
1021+
Canvas.registerFont(path, { family });
1022+
9961023
return this;
9971024
}
9981025

‎tslint.json‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
{
2+
"rules": {
3+
"no-inferrable-types": [false],
4+
"no-unused-expression": true,
5+
"no-duplicate-variable": true,
6+
"no-shadowed-variable": true,
7+
"comment-format": [
8+
true, "check-space"
9+
],
10+
"indent": [
11+
true, "spaces"
12+
],
13+
"curly": false,
14+
"class-name": true,
15+
"semicolon": [true],
16+
"triple-equals": true,
17+
"eofline": true,
18+
"no-bitwise": false,
19+
"no-console": [false],
20+
"member-access": [true, "check-accessor", "check-constructor"],
21+
"no-consecutive-blank-lines": [true],
22+
"no-parameter-properties": true,
23+
"one-line": [
24+
false
25+
],
26+
"variable-name": [true, "ban-keywords", "check-format", "allow-leading-underscore"],
27+
"interface-name": [true, "always-prefix"],
28+
"no-conditional-assignment": true,
29+
"use-isnan": true,
30+
"no-trailing-whitespace": true,
31+
"quotemark": [true, "single", "avoid-escape"],
32+
"no-use-before-declare": false,
33+
"whitespace": [true,
34+
"check-branch",
35+
"check-decl",
36+
"check-operator",
37+
"check-module",
38+
"check-separator",
39+
"check-type",
40+
"check-typecast"
41+
],
42+
"typedef-whitespace": [
43+
true,
44+
{
45+
"call-signature": "nospace",
46+
"index-signature": "nospace",
47+
"parameter": "nospace",
48+
"property-declaration": "nospace",
49+
"variable-declaration": "nospace"
50+
},
51+
{
52+
"call-signature": "onespace",
53+
"index-signature": "onespace",
54+
"parameter": "onespace",
55+
"property-declaration": "onespace",
56+
"variable-declaration": "onespace"
57+
}
58+
]
59+
}
60+
}

0 commit comments

Comments
 (0)