v0.0.2
Used canvas library to make shapes
Repository
Current version released
a year ago
Dependencies
deno.land/x
Update 0.0.2
1- Can use commonJS modules and ES Modules
Resorce
for node js only
Compiling If you want to know the details, go here
OS | Command |
---|---|
OS X | Using Homebrew:brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman |
Ubuntu | sudo apt-get install build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev |
Fedora | sudo yum install gcc-c++ cairo-devel pango-devel libjpeg-turbo-devel giflib-devel |
Solaris | pkgin install cairo pango pkg-config xproto renderproto kbproto xextproto |
OpenBSD | doas pkg_add cairo pango png jpeg giflib |
Windows | See the wiki |
Others | See the wiki |
Install
npm
npm install shapes-plus --save
// index.js
const { Shapes } = require("shapes-plus");
const shapes = new Shapes(/* options: ShapesOptions */);
or
// index.js
import { Shapes } from "shapes-plus";
const shapes = new Shapes(/* options: ShapesOptions */);
deno
// mod.ts
import { Shapes } from "https://deno.land/x/shapes_plus@v0.0.2/mod.ts";
const shapes = new Shapes(/* options: ShapesOptions */);
$ deno run -A --unstable mod.ts
Values
Key | Type |
---|---|
createCircle | method |
createText | method |
createImages | method |
createLine | method |
createRect | method |
createRhombus | method |
createStar | method |
createTriangle | method |
setCanvasSize | method |
toBuffer | method |
toSave | method |
addFontFamily | method |
Canvas | prototype |
canvas | prototype |
ctx | prototype |
Rect
const rect = shapes.createRect(/* options: RectOptions */);
rect.draw({x:200, y:100, color:"blue", drawType:"stroke"})
rect.draw({x:500, y:100, height:110, width:110});
Circle
const circle = shapes.createCircle(/* options: CircleOptions */);
circle.draw({x:200, y:100, color:"blue", drawType:"stroke"});
circle.draw({x:500, y:100, radius:60});
Text
const text = shapes.createText(/* options: TextOptions */);
text.draw({x:200, y:100, color:"blue", drawType:"stroke", text:"Hello"});
text.draw({x:500, y:100, text:"Hi", fontFamily:"Impact", size:60, textAlign:"left", width:70});
Line
const line = shapes.createLine(/* options: LineOptions */);
line.draw({x:200, y:100, endX:450, endY:100, color:"blue", lineWidth:3});
line.draw({x:200, y:150, endX:450, endY:150, lineWidth:5});
Rhombus
const rhombus = shapes.createRhombus(/* options: RhombusOptions */);
rhombus.draw({x:200, y:200, color:"blue", drawType:"stroke"});
rhombus.draw({x:500, y:200, height:80 ,width:90});
Star
const star = shapes.createStar(/* options: StarOptions */);
star.draw({x:200, y:100, color:"blue", drawType:"stroke"});
star.draw({x:500, y:100, spikes:9, innerRadius:20, outerRadius:30});
Image
const image = shapes.createImage(/* options: ImageOptions */);
image.draw({x:200, y:500, height:120, width:120, path:"https://cdn.discordapp.com/attachments/716228498825412690/987695097107873792/unknown.png"}).then(async img=>
{
await image.draw({x:400, y:500, isCircle:true, radius:60, path:"https://cdn.discordapp.com/attachments/716228498825412690/987695097107873792/unknown.png"});
await img.draw({x:600, y:500, height:100, width:100, path:"https://cdn.discordapp.com/attachments/716228498825412690/987695097107873792/unknown.png"});
await img.draw({x:800, y:500, isCircle:true, radius:50, path:"https://cdn.discordapp.com/attachments/716228498825412690/987695097107873792/unknown.png"});
});
Triangle
const triangle = shapes.createTriangle(/* options: TriangleOptions */);
triangle.draw({x:200, y:100, color:"red"});
triangle.draw({x:300, y:100, color:"blue", drawType:"stroke"});
triangle.draw({x:400, y:100, color:"green", rotate:70});
triangle.draw({x:200, y:200, color:"yellow", sideAB: 20, sideAC: 10});
triangle.draw({x:300, y:200, color:"pink", sideBC: 50, rotate:20});
Font Family
Warning
If you use windows os you must add font family in your windows before use addFontFamily
// Add new Font Family
const { addFontFamily } = require("shapes-plus");
addFontFamily(/* path: string, setName: string) // You can add any name in setName
for examlpe:
addFontFamily("./Halimun.ttf","Halimun");
const text = shapes.createText();
text.draw({x:200, y:100, text:"Hello", fontFamily:"Halimun"});
text.draw({x:500, y:100, text:"Hello", fontFamily:"Impact"});
Other method
// save Image
shapes.toSave(path); // path = "save local device without extension"
// convert to Buffer
shapes.toBuffer() // return Buffer
One example in detail
shapes.createRect(/*options*/).draw({x:500, y:100, color:"red"}).draw({x:700, y:100, color:"red"}).draw({x:900, y:100, color:"red"});
OR
shapes.createRect({y:100, color:"red"}).draw({x:500}).draw({x:700}).draw({x:900});
OR
const rect = shapes.createRect(/*options*/);
rect.draw({x:500, y:100, color:"red"});
rect.draw({x:700, y:100, color:"red"});
rect.draw({x:900, y:100, color:"red"});
OR
const rect = shapes.createRect({color:"red", y:100});
rect.draw({x:500});
rect.draw({x:700});
rect.draw({x:900});
Options
ShapesOptions
Key | Type | Default |
---|---|---|
width? | Number | 1920 |
height? | Number | 1080 |
canvas? | Canvas | Canvas |
RectOptions
Key | Type | Default |
---|---|---|
x | Number | 0 |
y | Number | 0 |
color | String | black |
drawType draw |
String | fill |
width | Number | 100 |
height | Number | 100 |
CircleOptions
Key | Type | Default |
---|---|---|
x | Number | 0 |
y | Number | 0 |
color | String | black |
drawType draw |
String | fill |
radius | Number | 50 |
TextOptions
Key | Type | Default |
---|---|---|
x | Number | 0 |
y | Number | 0 |
color | String | black |
drawType draw |
String | fill |
width | Number | 100 |
text | String | null |
size | Number | 50 |
fontFamily | String | Arial |
LineOptions
Key | Type | Default |
---|---|---|
x | Number | 0 |
y | Number | 0 |
color | String | black |
lineWidth | Number | 1 |
endX | Number | 50 |
endY | Number | 50 |
RhombusOptions
Key | Type | Default |
---|---|---|
x | Number | 0 |
y | Number | 0 |
color | String | black |
drawType draw |
String | fill |
width | Number | 100 |
height | Number | 100 |
lineWidth | Number | 1 |
StarOptions
Key | Type | Default |
---|---|---|
x | Number | 0 |
y | Number | 0 |
color | String | black |
drawType draw |
String | fill |
lineWidth | Number | 1 |
spikes | Number | 5 |
outerRadius | Number | 30 |
innerRadius | Number | 15 |
ImageOptions
Key | Type | Default |
---|---|---|
x | Number | 0 |
y | Number | 0 |
color | String | black |
width | Number | 100 |
height | Number | 100 |
path | String | null |
TriangleOptions
Key | Type | Default |
---|---|---|
x | Number | 0 |
y | Number | 0 |
color | String | black |
drawType draw |
String | fill |
sideAB? | number | 0 |
sideAC? | number | 0 |
sideBC? | number | 0 |
rotate? | number | 0 |