fixes chrome coords and canvas now starts at center
Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
This commit is contained in:
parent
a63228a552
commit
6d44db5d66
1 changed files with 24 additions and 21 deletions
|
@ -49,10 +49,30 @@ layers.registerCollection("mask", {name: "Mask Layers", requiresActive: true});
|
||||||
mouse.registerContext(
|
mouse.registerContext(
|
||||||
"world",
|
"world",
|
||||||
(evn, ctx) => {
|
(evn, ctx) => {
|
||||||
|
// Fix because in chrome layerX and layerY simply doesnt work
|
||||||
|
/** @type {HTMLDivElement} */
|
||||||
|
const target = evn.target;
|
||||||
|
|
||||||
|
// Get element bounding rect
|
||||||
|
const bb = target.getBoundingClientRect();
|
||||||
|
|
||||||
|
// Get element width/height (css, cause I don't trust client sizes in chrome anymore)
|
||||||
|
const w = imageCollection.size.w;
|
||||||
|
const h = imageCollection.size.h;
|
||||||
|
|
||||||
|
// Get cursor position
|
||||||
|
const x = evn.clientX;
|
||||||
|
const y = evn.clientY;
|
||||||
|
|
||||||
|
// Map to layer space
|
||||||
|
const layerX = ((x - bb.left) / bb.width) * w;
|
||||||
|
const layerY = ((y - bb.top) / bb.height) * h;
|
||||||
|
|
||||||
|
//
|
||||||
ctx.coords.prev.x = ctx.coords.pos.x;
|
ctx.coords.prev.x = ctx.coords.pos.x;
|
||||||
ctx.coords.prev.y = ctx.coords.pos.y;
|
ctx.coords.prev.y = ctx.coords.pos.y;
|
||||||
ctx.coords.pos.x = evn.layerX;
|
ctx.coords.pos.x = layerX;
|
||||||
ctx.coords.pos.y = evn.layerY;
|
ctx.coords.pos.y = layerY;
|
||||||
},
|
},
|
||||||
{target: imageCollection.inputElement}
|
{target: imageCollection.inputElement}
|
||||||
);
|
);
|
||||||
|
@ -105,25 +125,8 @@ const viewport = {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
let rotation = 0;
|
viewport.cx = imageCollection.size.w / 2;
|
||||||
let lastTime = performance.now();
|
viewport.cy = imageCollection.size.h / 2;
|
||||||
|
|
||||||
const onframe = () => {
|
|
||||||
const nowTime = performance.now();
|
|
||||||
const dt = nowTime - lastTime;
|
|
||||||
rotation += (10 * dt) / 1000.0;
|
|
||||||
|
|
||||||
lastTime = nowTime;
|
|
||||||
|
|
||||||
viewport.transform(imageCollection.element);
|
|
||||||
|
|
||||||
requestAnimationFrame(onframe);
|
|
||||||
};
|
|
||||||
|
|
||||||
onframe();
|
|
||||||
|
|
||||||
viewport.cx = viewport.w / 2;
|
|
||||||
viewport.cy = viewport.h / 2;
|
|
||||||
|
|
||||||
let worldInit = null;
|
let worldInit = null;
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue