Question

我在拖动舞台和放大/缩小移动设备时遇到问题。如果我有超过100个对象（形状，文本，......），性能会非常慢。在桌面上拖动不是很慢，但我相信它可能会更快我使用2到5层（静态内容，悬停内容，动态内容，席位和文本层）。文本和席位图层包含一组所有文本/席位。通常有50到100个文本对象和200到600个座位（圆圈）对象。

示例可在我们的生产网站上获得：
http://www.mojekarte.si/en/basket/add/84766
然后选择'2。阳台”。

如果您在触摸设备上进行测试，请点击“切换到场地地图选择”。

我在Android 4.1.2默认网络浏览器和Chrome 33上进行了测试。

舞台拖动

我试图在拖动之前在舞台和图层上使用.cache。但是在拖拽结束后，它并没有将形状上的事件归还给我这是我的舞台配置：

this.container = 'abc';
this.stage = new Kinetic.Stage({
  container : this.container,
  width : 750,
  height : 500,
  draggable : true
});

舞台缩放

缩放事件是从http://jsfiddle.net/45YJH/1/复制的，几乎没有修改

this.zoomFactor = 0.3;
this.zoomOrigin = makePos(0, 0);
this.pinchLastDist = 0;
this.pinchStartCenter = 0;
if (true == this.isTouch) {
    // this is mobile device and add touch events for zoom
    this.stage.getContent().addEventListener('touchmove', function(e) {
        e.preventDefault(); // prevent iPAD panning
        var touch1 = e.touches[0];
        var touch2 = e.touches[1];
        if (touch1 && touch2) {
            touch1.offsetX = touch1.clientX;;
            touch1.offsetY = touch1.clientY;
            touch2.offsetX = touch2.clientX;;
            touch2.offsetY = touch2.clientY;
            stage[this.idItem].stagePinch.call(self, makePos(touch1.offsetX, touch1.offsetY), makePos(touch2.offsetX, touch2.offsetY), this.idItem);
        }
    }.bind(this), false);

    this.stage.getContent().addEventListener('touchend', function(e) {
        stage[this.idItem].pinchLastDist = stage[this.idItem].pinchStartCenter = 0;
        fixDrawing();
    }.bind(this), false);
} else {
     // IE, Opera, Safari
    $(this.stage.content).on(
        'mousewheel',
        {idItem: this.idItem},
        function(e) {
            e.preventDefault();
            var evt = e.originalEvent;
            stage[idItem].stageMouseWheel.call(self, evt.wheelDelta , makePos(evt.clientX, evt.clientY), idItem);
        }
    );
    // Firefox
    $(this.stage.content).on(
        'DOMMouseScroll',
        {idItem: this.idItem},
        function(e) {
            e.preventDefault();
            var evt = e.originalEvent;
            stage[idItem].stageMouseWheel.call(self, -1 * evt.detail, makePos(evt.clientX, evt.clientY), idItem);
        }
    );
}

fixDrawing用于修复Android默认浏览器（https://code.google.com/p/android/issues/detail?id=35474#c41）

上的错误

自动调整大小

我在窗口上添加了resize listener，如果屏幕大小发生了变化，则重绘画布。我仔细检查了这个函数只在init上触发来设置画布大小。

您是否知道如何解决移动设备上性能缓慢的问题？我可以为您提供更多源代码来调试问题。

更新
我试图用以下方式缓存舞台：

this.stage.on('dragstart', function() { this.cache(); });  
this.stage.on('dragend', function() { this.clearCache(); });

但KineticJS抛出异常 - kinetic-v5.0.1.js（第2255行）
TypeError：context为null - context.save（）;

移动设备上的KineticJS舞台拖放变焦非常慢

0 个答案: