jquery - Kinetic js ipad滚动

Question

我之前有一个基于 HTML5 Canvas 的应用程序，最近我将其转换为使用 Kinetic JS。我只需在包含的 div 上使用 Overflow: auto 即可在桌面浏览器和 IOS 中启用滚动。由于转换为使用 Kinetic 滚动，因此在移动/iPad 设备上不再起作用。

我尝试了几种不同的方法来解决这个问题，尽管我有点卡住了。首先，我尝试使用 touchscroll，尽管由于各种原因这对我不起作用(尽管库导致其他问题，但事情确实滚动了)。接下来，我尝试将 -webkit-overflow-scrolling: touch 选项添加到我的 div 样式中，尽管这似乎没有任何效果。

是否有滚动大于可视区域/div 的 Kinetic JS Canvas 的标准方法？

这是一个例子。如果您在 IOS 设备(iPad、iPhone 等)上查看该示例，您会注意到顶部 Canvas 不会在 div 内滚动，而底部 Canvas 则会滚动。

http://jsfiddle.net/blueshirts/uERVq/26/

<!-- KineticJS canvase, won't scroll on IOS devices. -->
<div id="container" style="overflow: auto; width: 400px; height: 400px; background-    color: gray">
</div>

<br/>

<!-- Vanilla HTML5 Canvas, does scroll on IOS devices. -->
<div id="canvasContainer"
     style="width: 400px; height: 400px; overflow: auto; background-color: red">
    <canvas id="vanillaCanvas"
            width="800" height="600">
    </canvas> 
</div>

// Create a stage instance that is larger than its parent div.
var stage = new Kinetic.Stage({
    container: 'container',
    width: 800,
    height: 600
});

// Create a layer.
var layer = new Kinetic.Layer();

// Add some text...
var text = new Kinetic.Text({
    text: "KineticJS generated Canvas that won't scroll to IOS touches...",
    x: 0,
    y: 0,
    fontSize: 12,
    fontFamily: 'Calibri',
    textFill: 'Black'                
});
layer.add(text);

// Add a rectangle to the layer so you can see if the content scrolls.
var rect = new Kinetic.Rect({
    x: 50,
    y: 50,
    width: 200,
    height: 100,
    fill: "yellow",
    stroke: "black",
    strokeWidth: 7
});
layer.add(rect);

// Add the layer to the stage.
stage.add(layer);


// Create a "vanilla" canvas instance and draw the same rectangle on it.
var canvas = document.getElementById('vanillaCanvas');
var context = canvas.getContext('2d');

context.beginPath();
context.rect(50, 50, 200, 100);
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();

编辑:

可能是错误的，但在我看来，这个问题是由 Kinetic 在 Stage 类中注册 touchmove 事件(和其他事件)这一事实引起的。在处理程序中，它运行的 PreventDefault 似乎会阻止移动浏览器执行其默认滚动行为。如果“我”已经注册了 touchmove 事件，这可能是理想的。如果 Kinetic 不注册和处理我不感兴趣的事件，那就太好了。

 _touchmove: function(evt) {
     this._setUserPosition(evt);
     var dd = Kinetic.DD;
     evt.preventDefault();

我可以在这里演示这个问题:http://jsfiddle.net/blueshirts/P9RaT/28/

Answer 1

我认为这是 Kinetic JS 中的一个基本错误。如果我知道是这种情况，我就不会开始使用 Kinetic JS 来开展一个雄心勃勃的项目，因为它甚至无法完成基础知识。

由于 Kinetic 团队没有任何回应，我将切换到 bug 较少的库，例如 Fabric.js。