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

added drawRotated

Browse Source
This commit is contained in:
Emma 2023-02-07 11:53:18 -07:00
parent c24bd45718
commit 2dbaeb57b9
3 changed files with 31 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
bundle.js
View File

@ -132,6 +132,14 @@ class Doodler {
this.ctx.bezierCurveTo(b.x, b.y, c.x, c.y, d.x, d.y); this.ctx.bezierCurveTo(b.x, b.y, c.x, c.y, d.x, d.y);
this.ctx.stroke(); this.ctx.stroke();
} }
drawRotated(origin, angle, cb) {
this.ctx.save();
this.ctx.translate(origin.x, origin.y);
this.ctx.rotate(angle);
this.ctx.translate(-origin.x, -origin.y);
cb();
this.ctx.restore();
}
setStyle(style) { setStyle(style) {
const ctx = this.ctx; const ctx = this.ctx;
ctx.fillStyle = style?.color || style?.fillColor || 'black'; ctx.fillStyle = style?.color || style?.fillColor || 'black';
@ -373,6 +381,7 @@ init({
height: 400 height: 400
}); });
const movingVector = new Vector(100, 300); const movingVector = new Vector(100, 300);
let angleMultiplier = 0;
doodler.createLayer(()=>{ doodler.createLayer(()=>{
doodler.line(new Vector(100, 100), new Vector(200, 200)); doodler.line(new Vector(100, 100), new Vector(200, 200));
doodler.dot(new Vector(300, 300)); doodler.dot(new Vector(300, 300));
@ -386,5 +395,10 @@ doodler.createLayer(()=>{
weight: 5 weight: 5
}); });
doodler.drawBezier(new Vector(100, 150), movingVector, new Vector(150, 300), new Vector(100, 250)); doodler.drawBezier(new Vector(100, 150), movingVector, new Vector(150, 300), new Vector(100, 250));
let rotatedOrigin = new Vector(200, 200);
doodler.drawRotated(rotatedOrigin, Math.PI * angleMultiplier, ()=>{
doodler.drawCenteredSquare(rotatedOrigin, 30);
});
movingVector.set((movingVector.x + 1) % 400, movingVector.y); movingVector.set((movingVector.x + 1) % 400, movingVector.y);
angleMultiplier += .001;
}); });

9
canvas.ts
View File

@ -163,6 +163,15 @@ export class Doodler {
this.ctx.stroke(); this.ctx.stroke();
} }
drawRotated(origin: Vector, angle: number, cb: () => void){
this.ctx.save();
this.ctx.translate(origin.x, origin.y);
this.ctx.rotate(angle);
this.ctx.translate(-origin.x, -origin.y);
cb();
this.ctx.restore();
}
setStyle(style?: IStyle) { setStyle(style?: IStyle) {
const ctx = this.ctx; const ctx = this.ctx;
ctx.fillStyle = style?.color || style?.fillColor || 'black'; ctx.fillStyle = style?.color || style?.fillColor || 'black';

8
main.ts
View File

@ -1,4 +1,5 @@
import { Doodler } from "./canvas.ts"; import { Doodler } from "./canvas.ts";
import { Constants } from "./geometry/constants.ts";
/// <reference types="./global.d.ts" /> /// <reference types="./global.d.ts" />
import { Vector, initializeDoodler } from './mod.ts' import { Vector, initializeDoodler } from './mod.ts'
@ -11,6 +12,7 @@ initializeDoodler({
// let doodler = window['doodler']; // let doodler = window['doodler'];
const movingVector = new Vector(100, 300); const movingVector = new Vector(100, 300);
let angleMultiplier = 0;
doodler.createLayer(() => { doodler.createLayer(() => {
doodler.line(new Vector(100, 100), new Vector(200, 200)) doodler.line(new Vector(100, 100), new Vector(200, 200))
@ -22,5 +24,11 @@ doodler.createLayer(() => {
doodler.drawCenteredSquare(new Vector(200, 200), 40, { color: 'purple', weight: 5 }) doodler.drawCenteredSquare(new Vector(200, 200), 40, { color: 'purple', weight: 5 })
doodler.drawBezier(new Vector(100, 150), movingVector, new Vector(150, 300), new Vector(100, 250)) doodler.drawBezier(new Vector(100, 150), movingVector, new Vector(150, 300), new Vector(100, 250))
let rotatedOrigin = new Vector(200,200)
doodler.drawRotated(rotatedOrigin, Math.PI*angleMultiplier, () => {
doodler.drawCenteredSquare(rotatedOrigin, 30)
})
movingVector.set((movingVector.x + 1) % 400, movingVector.y); movingVector.set((movingVector.x + 1) % 400, movingVector.y);
angleMultiplier += .001;
}); });