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

On Drag event

Browse Source
This commit is contained in:
Emma 2023-02-12 19:57:12 -07:00
parent 3d366a1a6c
commit c7ff737690
3 changed files with 42 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
bundle.js
View File

@ -502,35 +502,31 @@ init({
width: 400,
height: 400
});
const movingVector = new Vector(100, 300);
let angleMultiplier = 0;
new Vector(100, 300);
const v = new Vector(30, 30);
doodler.registerDraggable(v, 20);
const img = new Image();
img.src = './EngineSprites.png';
img.hidden;
document.body.append(img);
const p = new Vector(200, 200);
doodler.createLayer(()=>{
doodler.line(new Vector(100, 100), new Vector(200, 200));
doodler.dot(new Vector(300, 300));
doodler.fillCircle(movingVector, 6, {
color: 'red'
doodler.line(p.copy().add(-8, 10), p.copy().add(8, 10), {
color: 'grey',
weight: 2
});
doodler.drawRect(new Vector(50, 50), movingVector.x, movingVector.y);
doodler.fillRect(new Vector(200, 250), 30, 10);
doodler.drawCenteredSquare(new Vector(200, 200), 40, {
color: 'purple',
weight: 5
doodler.line(p.copy().add(-8, -10), p.copy().add(8, -10), {
color: 'grey',
weight: 2
});
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);
doodler.drawSprite(img, new Vector(0, 40), 80, 20, new Vector(160, 300), 80, 20);
doodler.line(p, p.copy().add(0, 12), {
color: 'brown',
weight: 4
});
doodler.line(p, p.copy().add(0, -12), {
color: 'brown',
weight: 4
});
movingVector.set((movingVector.x + 1) % 400, movingVector.y);
angleMultiplier += .001;
doodler.drawSprite(img, new Vector(0, 40), 80, 20, new Vector(100, 300), 80, 20);
});
document.addEventListener('keyup', (e)=>{
e.preventDefault();

6
canvas.ts
View File

@ -75,6 +75,7 @@ export class Doodler {
for (const d of this.draggables.filter(d => d.beingDragged)) {
d.point.add(e.movementX, e.movementY)
d.onDrag && d.onDrag({x: e.movementX, y: e.movementY});
}
})
this.startDrawLoop();
@ -251,12 +252,14 @@ export class Doodler {
addDragEvents({
onDragEnd,
onDragStart,
onDrag,
point
}: { point: Vector, onDragEnd?: () => void, onDragStart?: () => void }) {
}: { point: Vector, onDragEnd?: () => void, onDragStart?: () => void, onDrag?: () => void }) {
const d = this.draggables.find(d => d.point === point);
if (d) {
d.onDragEnd = onDragEnd;
d.onDragStart = onDragStart;
d.onDrag = onDrag;
}
}
@ -345,6 +348,7 @@ type Draggable = {
id: string;
onDragStart?: () => void;
onDragEnd?: () => void;
onDrag?: (dragDistance?: {x: number, y: number}) => void;
}
type Clickable = {

37
main.ts
View File

@ -16,28 +16,35 @@ img.src = './EngineSprites.png'
img.hidden
document.body.append(img)
const p = new Vector(200, 200);
doodler.createLayer(() => {
doodler.line(new Vector(100, 100), new Vector(200, 200))
doodler.dot(new Vector(300, 300))
doodler.fillCircle(movingVector, 6, { color: 'red' });
doodler.drawRect(new Vector(50, 50), movingVector.x, movingVector.y);
doodler.fillRect(new Vector(200, 250), 30, 10)
// doodler.line(new Vector(100, 100), new Vector(200, 200))
// doodler.dot(new Vector(300, 300))
// doodler.fillCircle(movingVector, 6, { color: 'red' });
// doodler.drawRect(new Vector(50, 50), movingVector.x, movingVector.y);
// doodler.fillRect(new Vector(200, 250), 30, 10)
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.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))
let rotatedOrigin = new Vector(200, 200)
doodler.drawRotated(rotatedOrigin, Math.PI * angleMultiplier, () => {
doodler.drawCenteredSquare(rotatedOrigin, 30)
doodler.drawSprite(img, new Vector(0, 40), 80, 20, new Vector(160, 300), 80, 20)
})
// let rotatedOrigin = new Vector(200, 200)
// doodler.drawRotated(rotatedOrigin, Math.PI * angleMultiplier, () => {
// doodler.drawCenteredSquare(rotatedOrigin, 30)
// doodler.drawSprite(img, new Vector(0, 40), 80, 20, new Vector(160, 300), 80, 20)
// })
movingVector.set((movingVector.x + 1) % 400, movingVector.y);
angleMultiplier += .001;
// movingVector.set((movingVector.x + 1) % 400, movingVector.y);
// angleMultiplier += .001;
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.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})
});
document.addEventListener('keyup', e => {