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

我正在一个大项目中,通过JSON数据和CreateJS在Canvas中创建练习.在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,有人将此报告为问题,建议采用以下解决方案：

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

整个练习都在一个容器中,我尝试缩放它,但无济于事.我还尝试将比例尺作为参数发送给所创建练习的各个部分(例如菜单,背景图像等),而不是全部按比例缩放,自从那时以来,我可以排除绘图层,这似乎可行.但是,由于这是一个大型项目,并且要扩展许多不同的练习和部分,因此将需要花费一些时间来实施,而且我不确定这是否是可行的解决方案.

在CreateJS中,有没有一种简便的方法来重新缩放鼠标坐标以及画布大小？我在SO上找到了纯Javascript示例,但对于CreateJS则没有任何特别的示例.

解决方法:

继续搜索,最后偶然发现了这个,我之前从未见过：
EaselJS – dragging children of scaled parent.这正是我想要的.我需要更改以此绘制的坐标：

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

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

标签：canvas,responsive-design,createjs,mouse-coordinates,javascript
来源： https://codeday.me/bug/20191119/2037687.html