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

38
bundle.js
View File

@ -398,6 +398,12 @@ class Doodler {
cb(); cb();
this.ctx.restore(); 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) { 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); w && h ? this.ctx.drawImage(img, at.x, at.y, w, h) : this.ctx.drawImage(img, at.x, at.y);
} }
@ -782,21 +788,23 @@ img.hidden;
document.body.append(img); document.body.append(img);
const p = new Vector(200, 200); const p = new Vector(200, 200);
doodler.createLayer(()=>{ doodler.createLayer(()=>{
doodler.line(p.copy().add(-8, 10), p.copy().add(8, 10), { doodler.drawScaled(1.5, ()=>{
color: 'grey', doodler.line(p.copy().add(-8, 10), p.copy().add(8, 10), {
weight: 2 color: 'grey',
}); weight: 2
doodler.line(p.copy().add(-8, -10), p.copy().add(8, -10), { });
color: 'grey', doodler.line(p.copy().add(-8, -10), p.copy().add(8, -10), {
weight: 2 color: 'grey',
}); weight: 2
doodler.line(p, p.copy().add(0, 12), { });
color: 'brown', doodler.line(p, p.copy().add(0, 12), {
weight: 4 color: 'brown',
}); weight: 4
doodler.line(p, p.copy().add(0, -12), { });
color: 'brown', doodler.line(p, p.copy().add(0, -12), {
weight: 4 color: 'brown',
weight: 4
});
}); });
}); });
document.addEventListener('keyup', (e)=>{ document.addEventListener('keyup', (e)=>{

7
canvas.ts
View File

@ -189,6 +189,13 @@ export class Doodler {
this.ctx.restore(); 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): void;
drawImage(img: HTMLImageElement, at: Vector, w: number, h: number): void; drawImage(img: HTMLImageElement, at: Vector, w: number, h: number): void;
drawImage(img: HTMLImageElement, at: Vector, w?: number, h?: number) { 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.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.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}) doodler.line(p, p.copy().add(0,-12), {color: 'brown', weight: 4})})
}); });
document.addEventListener('keyup', e => { document.addEventListener('keyup', e => {