时间戳

首页 > 解决方案 > Scaling Matter.js 画布会中断鼠标拖动

canvas - Scaling Matter.js 画布会中断鼠标拖动

问题描述

我的问题是这样的：

我使用 Matter.js 在画布上创建了一个可拖动的对象。但是当我缩放画布时，我的鼠标点击不再拖动对象，因为由于缩放导致点击被错误计算。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, 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>

截屏

亲切的问候，斯拉维克

标签： canvasmousescalingmatter.js

解决方案

感谢ggorlen，答案是：

使用 Matter.Mouse.setScale(mouse, scale);

在那里你需要提供正确的比例，但是你怎么知道只有你用来缩放画布的初始比例？公式如下：

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

推荐阅读