Question

我正在开发一个大型项目，其中Canvas中的练习是通过JSON数据和CreateJS创建的。在HTML 5中使用它的目的是不必为您的手机使用单独的应用程序，您可以随时使用该网站。

一切正常，但在移动设备中，Canvas重新调整为全屏。这是通过检查屏幕大小来完成的，如果它足够小以便移动，则通过此代码缩放画布：

// browser viewport size
var w = window.innerWidth;
var h = window.innerHeight;

// stage dimensions
var ow = canvasWidth;
var oh = canvasHeight;

// keep aspect ratio
var scale = Math.min(w / ow, h / oh);
stage.scaleX = scale;
stage.scaleY = scale;

// adjust canvas size
stage.canvas.width = ow * scale;
stage.canvas.height = oh * scale;

这适用于大多数练习，例如测验等，您只需点击一个按钮即可。然而，我们还有一些拖放练习，以及一个可以为绘图着色的练习。这些当然依赖于鼠标坐标才能正常工作。问题是，当缩放画布时，鼠标坐标不。因此，当您拖动项目或尝试绘制时，会发生偏移。因此，您的图形显示在点击的左侧，当拿起可拖动的对象时，它并不能完全跟随您的点击。

如果我从一开始就编写代码，我很确定如何重新计算坐标，但由于它们是由CreateJS计算的，所以我真的不知道应该怎么做。

大约一年前有人报告这是一个问题here，建议使用此解决方案：

我能够通过添加顶级容器并将我的位图附加到其上并进行缩放来解决这个问题。

整个练习都在一个容器内，我试图扩展但无济于事。我也尝试将比例作为参数发送到所创建的练习的部分（例如菜单，背景图像等），而不是将它们全部缩放在一起，它似乎工作正常，因为我可以排除绘图层。但由于它是一个大项目，许多不同的练习和部分需要扩展，因此需要花费一些时间来实施，而且我不确定它是否可行。

在CreateJS中有没有一种简单的方法可以重新缩放鼠标坐标和画布大小？我在SO上找到了纯Javascript示例，但特别是CreateJS没有。

Answer 1

继续搜索，最后偶然发现了这个，我以前没见过： EaselJS - dragging children of scaled parent。这正是我想要的。我需要改变我用它绘制的坐标：

var coords = e.target.globalToLocal(e.stageX, e.stageY);

然后我可以使用 coords.x 和 coords.y ，而不是像以前那样直接使用e.stageX和e.stageY。

CreateJS - 缩放画布不会缩放鼠标坐标

1 个答案: