如何在在线聊天的javascript 2D画布上拥有相对鼠标位置,人们可以通过点击移动他们的角色

问题描述

我正在创建一个 2D 环境,它的作用类似于聊天,但具有可以在画布中移动的头像。 用户可以在屏幕上点击他们想要移动的 x 轴来移动他们的角色。 我的问题是客户端获取并发送到服务器的鼠标位置对于每个用户都不相同(因为不同的窗口大小),因此当服务器向每个人发送以像素为单位的新位置时,与每个人的屏幕,因为宽度为 1080 像素的用户屏幕中的 100 像素与具有较小屏幕(例如 200 像素)的用户屏幕不同。 如何获取鼠标相对于画布大小的位置,以便每个用户都在画布的相对位置上绘制每个人?

解决方法

如果您发送的鼠标位置不是作为绝对值而是作为画布宽度和高度内偏移的百分比 - 那么每个站点都可以计算出放置头像的位置,因为它知道其站点的画布的实际尺寸。