Question

我在canvas元素上有一个大图像，我希望使用离子滚动来拖动它。我实现了这个例子：

  <ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">
    <div style="width: 5000px; height: 5000px; background: url('https://upload.wikimedia.org/wikipedia/commons/a/ad/Europe_geological_map-en.jpg') repeat">
    </div>
  </ion-scroll>

......而且工作正常。现在，当我在div的内部添加一个canvas元素时，滚动停止工作。

  <ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">
    <div style="width: 5000px; height: 5000px;">
      <canvas id="canvas"></canvas>
    </div>
  </ion-scroll>

画布显示得恰当，并且按照预期被离子滚动元素切割为500px，但点击+拖动功能不像大背景那样工作。我可以使用标准鼠标滚轮或触摸板滚动滚动。

我错过了什么？

Answer 1

自上一版Ionic（1.2）以来，我遇到了这个问题。

之前，我可以使用捏合和放大来放大/缩小在画布内滚动，现在已经不再可能了。

如果紧急，请尝试返回之前的版本。

[编辑：]好的，在github上打开一个问题后，只需在你的元素上使用 overflow-scroll =“false”。

如前所述：

http://blog.ionic.io/announcing-ionic-1-2/

他们现在使用本地滚动方式。要回到Javascript方式，你必须使用overflow-scroll =“false”，现在它可以工作。

但它似乎是一个例外情况，因为正如Ionic所说，overflow-scroll =“false”是错误的。所以，作为建议，只要你需要画布就可以使用它。

Answer 2

我不确定它是否可行但是试试这个。

<canvas id="canvas" style="width: 5000px; height: 5000px;"></canvas>

ion-scroll会自动重构HTML，如下图所示。

在其中创建另一个div标签不符合标准

Imgur

使用离子滚动来移动和滚动画布元素

2 个答案: