CreateJS

Question

我正在做一个大项目，其中 Canvas 中的练习是通过 JSON-data 和 CreateJS 创建的。将它放在 HTML 5 中的目的是不必为您的 phone 使用单独的应用程序，您可以随时使用该网站。

一切正常，但在移动设备中 Canvas 已重新缩放至全屏。这是通过检查屏幕尺寸来完成的，如果屏幕小到可以移动，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;

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

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

大约一年前 here 某人将此报告为问题，建议的解决方案是：

I was able to work around this by adding a top-level container and attaching my Bitmaps to that and scaling it.

整个练习都在我试图缩放但无济于事的容器内。我还尝试将比例作为参数发送到创建的练习部分（例如菜单、背景图像等），而不是将它们一起缩放，从那时起它似乎工作正常我可以排除绘图层。但由于这是一个大型项目并且有许多不同的练习和部分需要扩展，因此实施起来需要相当长的时间，而且我不确定这是一个可行的解决方案。

在 CreateJS 中是否有一种简单易行的方法来重新缩放鼠标坐标以及 canvas 大小？我在 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 - 缩放 canvas 不缩放鼠标坐标

CreateJS - scaling the canvas does not scale the mouse coordinates

javascript

canvas

responsive-design

mouse-coordinates