0

我正在使用KineticJS构建一个小部件构建一个小部件（这太棒了）。它允许用户在画布中拖动图像。

我可以查看和使用里面的小部件iframe这在我尝试过的所有浏览器和设备上都能完美运行。

我什至可以缩放它，iframe以便页面响应。在另一个stackoverflow帖子之后，我添加了css：

@media screen and (max-width : 768px) {
    iframe {
        -moz-transform-origin: 0 0;
        -o-transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
        -moz-transform: scale(0.85);
        -o-transform: scale(0.85);
        -webkit-transform: scale(0.85);
    }
}

这在我的 Mac 上运行良好。

但在 iPad 上，虽然iframe显示正确缩放，但当您尝试拖动元素时，似乎认为它们处于未缩放的位置。

有没有办法让我也可以在 iPad 上使用它？还是我需要重新考虑我的设计（在这种情况下，我应该使用什么设计）？

谢谢！

4

1 回答 1

1

感谢@irie11 的建议，我现在已经实现了。为了后代的利益，这是我的全部方法。

当窗口改变大小时，我添加了一些 javascript 来重新缩放画布：

function scaleCanvasToContainer() {
  var container_width = $("#my-containers-parent-id").width();
  var scale = 1.0;
  if (container_width<target_width) {
    scale = container_width/target_width;
  }
  $("#my-container-id").css("max-height",scale*target_height+"px");
  stage.setScale(scale,scale);
  stage.setWidth(scale*target_width);
  stage.setHeight(scale*target_height);
  stage.draw();
  drawLines();
}
window.onresize = function(event) {
  scaleCanvasToContainer();
}
...
scaleCanvasToContainer();

请注意，上面还调整了画布的大小（即改变了它的宽度和高度），并且为了更好地测量，也通过 css 设置了最大高度。

我发现当你使用context.moveTo()这些坐标时没有缩放，所以我不得不手动缩放它们，例如

function drawLines() {
  var canvas = layer.getCanvas();
  var context = canvas.getContext();
  var scaleX = stage.getScaleX();
  var scaleY = stage.getScaleY();
  context.beginPath();
  context.moveTo(targetX*scaleX,targetY*scaleY);
  ...
}

我稍微改变了画布上的 css 以包括：

background-size: contain;
background-repeat: no-repeat;

到目前为止，我们已经将内容缩放到包含 iframe 的大小。但是，我们还需要使 iframe 具有正确的大小。

所以我在调用页面中添加了一些javascript：

<script>
  function scaleIFrame() {
    var target_width = 850;
    var container_width = $("#iframe-parent").width();
    var width = target_width;
    if (container_width<target_width) {
      width = container_width;
    }
    $("#iframe-parent iframe").css("width",width+"px");
  }
  window.onresize = function(event) {
    scaleIFrame();
  }
  scaleIFrame();
</script>

这给我留下了一个问题：设置 iframe 的高度。从理论上讲，我应该能够使用类似这样的方式访问 iframe 内容的高度（请参阅此链接）：

var iframe = $("iframe");
var iframe_internal = iframe.contents().find("#my-content");
iframe.css("height",iframe_internal.style.height+"px");

这要求所涉及的两个站点位于同一域中；如果它们在同一个顶级域中，如果您document.domain在 iframe 内容和调用页面中都包含一个标签，您仍然可以这样做（请参阅此SO 帖子）。您可能还想为您的 localhost 提供您正在使用的域名，以便您可以对其进行测试（请参阅此SO 帖子） - 我刚刚在我的 /etc/hosts 文件中添加了一个新行：'127.0.0.1 local.example。 com'。

我遵循了最后一个过程（我的两个站点具有相同的顶级域），但是当我打印出iframe_internal变量时，它是一个长度为零的对象，所以这里出了点问题。

不过，我很高兴能走到这一步。它适用于 iPad 和我测试过的所有浏览器。

于 2013-06-11T06:17:43.923 回答