重新縮放顯示動力學i畫布的iframe時，iPad上的觸摸位置被誤解

Question

我正在使用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上使用它？ 還是我需要重新考慮我的設計（在這種情況下，應該使用哪種設計）？

謝謝！

Answer 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");

這要求所涉及的兩個站點位於同一域中； 如果它們在同一個頂級域中，並且在iframe內容和調用頁面中都包含document.domain標記，則仍然可以執行此操作（請參見此SO post ）。 您可能還想給localhost使用您要使用的域名，以便對其進行測試（請參見此SO帖子 ）-我剛剛在/ etc / hosts文件中添加了新行：'127.0.0.1 local.example。 com”。

我遵循了最后一個過程（我的兩個站點都具有相同的頂級域），但是當我打印出iframe_internal變量時，它是一個長度為零的對象，因此這里出現了問題。

盡管如此，我很高興能做到這一點。 它適用於iPad和我測試過的所有瀏覽器。