My issue is this:
I used Matter.js to create a dragabble object on a canvas. But when I scale the canvas my mouse clicks don't drag the object anymore because the clicks are miscalculated due to scaling. Matter.js still thinks the canvas is not scaled. So I have to click next to the object to actually drag it. And the more I scale the more off I have to go with my click from the object. What do I have to do to correct Matter.js that the canvas has been scaled ?
<body>
<script>
let Engine = Matter.Engine,
Render = Matter.Render,
World = Matter.World,
Bodies = Matter.Bodies;
let engine = Engine.create();
let render = Render.create({
element: document.body,
engine: engine
});
Engine.run(engine);
Render.run(render);
let floor = Bodies.rectangle(0, 500, 600, 10, { isStatic: true });
let ball = Bodies.circle(200, 10, 40);
World.add(engine.world, [ball, floor]);
render.canvas.width = 1000;
render.canvas.height = 800;
render.canvas.style.transformOrigin = '0 0';
render.canvas.style.transform = 'scale(.8)';
let world = engine.world;
let Mouse = Matter.Mouse;
let MouseConstraint = Matter.MouseConstraint;
let mouse = Mouse.create(render.canvas);
let mouseConstraint = MouseConstraint.create(engine, { mouse: mouse });
World.add(world, mouseConstraint);
render.mouse = mouse;
</script>
</body>
Kind regards, Slawek
Thanks to the ggorlen the answer is:
Use Matter.Mouse.setScale(mouse, scale);
There you need to supply the right scale, but how would you know that having only the initial scale you used to scale the canvas? The formula is below: