emma/doodler
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases 26 Wiki Activity

Scaled drawing

Browse Source
This commit is contained in:
Emma 2023-02-15 17:57:03 -07:00
parent c767c09776
commit 3bf0c4587c
3 changed files with 32 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
bundle.js
View File

@ -398,6 +398,12 @@ class Doodler {
cb();
this.ctx.restore();
}
drawScaled(scale, cb) {
this.ctx.save();
this.ctx.transform(scale, 0, 0, scale, 0, 0);
cb();
this.ctx.restore();
}
drawImage(img, at, w, h) {
w && h ? this.ctx.drawImage(img, at.x, at.y, w, h) : this.ctx.drawImage(img, at.x, at.y);
}
@ -782,6 +788,7 @@ img.hidden;
document.body.append(img);
const p = new Vector(200, 200);
doodler.createLayer(()=>{
doodler.drawScaled(1.5, ()=>{
doodler.line(p.copy().add(-8, 10), p.copy().add(8, 10), {
color: 'grey',
weight: 2
@ -799,6 +806,7 @@ doodler.createLayer(()=>{
weight: 4
});
});
});
document.addEventListener('keyup', (e)=>{
e.preventDefault();
if (e.key === ' ') {

7
canvas.ts
View File

@ -189,6 +189,13 @@ export class Doodler {
this.ctx.restore();
}
drawScaled(scale: number, cb: () => void) {
this.ctx.save();
this.ctx.transform(scale, 0, 0, scale, 0, 0);
cb();
this.ctx.restore();
}
drawImage(img: HTMLImageElement, at: Vector): void;
drawImage(img: HTMLImageElement, at: Vector, w: number, h: number): void;
drawImage(img: HTMLImageElement, at: Vector, w?: number, h?: number) {

4
main.ts
View File

@ -41,10 +41,10 @@ doodler.createLayer(() => {
// doodler.drawSprite(img, new Vector(0, 40), 80, 20, new Vector(100, 300), 80, 20)
doodler.line(p.copy().add(-8,10), p.copy().add(8,10), {color: 'grey', weight: 2})
doodler.drawScaled(1.5, () => {doodler.line(p.copy().add(-8,10), p.copy().add(8,10), {color: 'grey', weight: 2})
doodler.line(p.copy().add(-8,-10), p.copy().add(8,-10), {color: 'grey', weight: 2})
doodler.line(p, p.copy().add(0,12), {color: 'brown', weight: 4})
doodler.line(p, p.copy().add(0,-12), {color: 'brown', weight: 4})
doodler.line(p, p.copy().add(0,-12), {color: 'brown', weight: 4})})
});
document.addEventListener('keyup', e => {