3

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

一切正常,但是在移动设备中,画布被重新调整为全屏。这是通过检查屏幕尺寸来完成的,如果它足够小可以移动,则通过以下代码缩放画布:

// 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 计算的,我真的不知道我应该如何去做。

大约一年前有人在此处报告了此问题,建议使用此解决方案:

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

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

有没有一种简单的方法来重新缩放鼠标坐标以及 CreateJS 中的画布大小?我在 SO 上找到了纯 Javascript 示例,但没有特别针对 CreateJS。

4

1 回答 1

3

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

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

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

于 2015-10-04T15:21:48.630 回答