缩放 createjs 画布可防止按钮点击

问题描述

当包含 createjs 的画布使用 zoom 样式（例如 zoom: 0.5）缩放时，画布上的按钮具有不同的点击目标，该目标仅在按钮的一侧或没有目标完全没有。

var stage,label;

function init() {
  stage = new createjs.Stage("demoCanvas");
  stage.name = "stage";

  var background = new createjs.Shape();
  background.name = "background";
  background.graphics.beginFill("red").drawRoundRect(0,150,60,10);

  label = new createjs.Text("foo","bold 24px Arial","#FFFFFF");
  label.name = "label";
  label.textAlign = "center";
  label.textBaseline = "middle";
  label.x = 150/2;
  label.y = 60/2;

  var button = new createjs.Container();
  button.name = "button";
  button.x = 75;
  button.y = 40;
  button.addChild(background,label);

  stage.addChild(button);

  // listeners
  var targets = [stage,button,label,background];
  for (var i=0; i<targets.length; i++) {
    var target = targets[i];
    target.on("click",toggleText,null,false,false);
  }

  stage.update();
}

function toggleText(evt) {
  label.text = (label.text == 'foo') ? 'bar' : 'foo';
  stage.update();
}

body{
  margin: 0;
  text-align: center;
}

#demoCanvas{
  background: tan;
  width: 500px;
  height: 300px;
  transform-origin: 0 0;  
  transform: scale(0.2);   // Firefox = This does not cause problem with button clicking
  zoom: 0.2;               // Other browsers = This causes a problem with button clicking in Chrome
}

<html>
  <head>
  <script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
  </head>
  <body onload="init();">
      <canvas id="demoCanvas"></canvas>
 </body>
</html>

请注意，这不会在 SO 片段中失败，因此我也制作了此 available as a Pen。

此行为会出现在 Chrome 中，但不会出现在 Firefox 中（它会识别 transform: scale() 样式）。

如果画布需要在 DOM 中缩放，如何在 Chrome 中完成而不导致按钮失败？

解决方法

缩放 css 样式被认为是非标准的，因此对于 Chrome 和其他浏览器，您也可以使用 transform : scale() 。我可以确认 zoom 确实破坏了 CreateJS - 如果你愿意，你可以向他们的 EaselJS GitHub 添加一个问题 - 不确定在可以使用 transform : scale() 时是否值得修复。干杯。

CSS 缩放：“非标准此功能是非标准的，不在标准轨道上。不要在面向 Web 的生产站点上使用它：它不适用于每个用户。实现之间也可能存在很大的不兼容性，未来行为可能会发生变化。”

createjs