缩放Matter.js画布可中断鼠标拖动

问题描述

我的问题是这个

我使用Matter.js在画布上创建了Dragabble对象。但是，当我缩放画布时，我的鼠标单击不再拖动该对象，因为由于缩放导致计算错误的点击次数。 Matter.js仍然认为画布未缩放。因此，我必须单击该对象旁边才能实际拖动它。而且缩放比例越大，点击对象的距离就越多。我该怎么做才能更正已缩放画布的Matter.js？

<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,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>

亲切的问候，Slawek

解决方法

多亏了峡谷，答案是：

使用Matter.Mouse.setScale（mouse，scale）;

您需要提供正确的缩放比例，但是您怎么知道只有用于缩放画布的初始缩放比例呢？公式如下：

set scale(scale){
        
    let mouseScale = 1 + (1 / (scale / (1 - scale)))
        
    this.Mouse.setScale(this.mouse,{x: mouseScale,y: mouseScale});
}

canvas matter.js mouse scaling