文章/答案/技术大牛

发布

社区首页 >问答首页 >缩放Matter.js画布破坏鼠标拖动

问缩放Matter.js画布破坏鼠标拖动
EN

Stack Overflow用户

提问于 2020-10-11 10:17:40

回答 1查看 411关注 0票数 1

我的问题是：

我使用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>

向你问好，斯拉夫人

canvas

mouse

scaling

matter.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-10-21 10:27:57

多亏了这句话，答案是：

使用Matter.Mouse.setScale(鼠标，比例尺)；

在那里，你需要提供正确的比例，但你怎么知道，只有最初的规模，你过去的规模画布？公式如下：

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64302906

复制

相似问题

问缩放Matter.js画布破坏鼠标拖动
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问缩放Matter.js画布破坏鼠标拖动EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问缩放Matter.js画布破坏鼠标拖动
EN