KineticJS - Скользящие 4000 плиток с Stage.draggable

Question

(Извините, если это дубликат, но я не думаю, что это)

Только так вы знаете, я использую Google Chrome 29.0.1547.66 м ,

У меня есть KineticJS Проект происходит в тот момент, когда строит черепичную «шахматную» карту 40 x 100 плиток. Карта занимает около 500 мс для рендеринга, что хорошо. Все 4000 плиток были помещены на один слой.

После того, что закончил, я пытаюсь перетащить на сцену, но я получаю очень плохую работу, как он пытается переместить все 4000 плиток сразу. Речь идет о 160 мс времени процессора.

Я попытался ломать каждую строку вверх в свой собственный отдельный слой в others suggested, но сделал это еще хуже (620ms процессорного времени), как это должно было переместить каждый слой отдельно.

Я бы не сказал, что я очень хорошо разбираюсь в JavaScript, но я не вижу способа улучшить производительность перетаскивания, и я провел некоторое исследование спуска.

Возможно, cachingвесь слой или что-то может сработать?

Проект до сих пор имеет довольно много кода, так что я просто хочу, чтобы показать фрагменты:

//Stage Object 
window.stage = new Kinetic.Stage({ 
    container: element, 
    width: 800, 
    height: 600, 
    draggable: true 
}); 

//Map Loop for create and position tiles 
var tempLayer = map.addLayer(); //makes a new layer and adds it to stage etc. 
for (var y = 0; y < height; y++) { //100 tiles high 
    for (var x = width-1; x > -1; x--) { //40 tiles wide 
     var tileImg = map._tiles[mapArray[x][y]-1]; //map._tiles is just an array of Kinetic.Image objects 
     if (typeof(tileImg) != "undefined"){ 
      var tileClone = tileImg.clone(); 
      map.place(x, y, 0, tileClone, tempLayer); //places tile in world scope positions 
     } 
    } 
} 
tempLayer.draw(); 

Если я не могу работать, как улучшить производительность, нет кто-то сможет запустить это, и проект должен быть binned, так что все мысли приветствуются! Благодаря!

Answer 1

Посмотрите на это так, вопрос: How to cache a whole layer right before dragstart and revert it back on dragend?

Вопрос и ответ мой описывает подобный вопрос, и я думаю, что решение, которое я придумал, может помочь.

В основном то, что я предлагал (хотя я не пробовал его полностью, так что я не знаю, если он будет хорошо работать):

1. Cache слой используя toImage
2. Перетащите изображение на другом слое, скрывая исходный слой.
3. Вычислить дх и ду (расстояние, на которое вы переместили)
4. Update оригинальный слой с дх и ду
5. слоя Скрыть изображение, показать фигуры слоя.

Мне удалось создать быстрый пример JSFIDDLE, чтобы работать с таким образом, чтобы проверить его.Одна вещь, которую я заметил, это то, что размер сцены действительно повлиял на производительность перетаскивания, даже если это было всего лишь 1 прямоугольник вместо 4000. Итак, если сцена действительно большая, даже с этим кэшированием изображения это действительно не помогло. Но когда я уменьшить размер сцены, кажется, чтобы помочь

UPDATE:

я нашел причину этого «растянутой/масштабируется» изображения при перемещении. Это потому, что я имел размер изображения установлен статически, как так:

var image = new Kinetic.Image({ 
    image: img, 
    x: 0, 
    y: 0, 
    width: 2000, 
    height: 5000 
}); 

Это вызвало изображение растянуть, так как изображение было больше, чем на сцене. Если мы удалим свойства ширина и высота примерно так:

var image = new Kinetic.Image({ 
    image: img, 
    x: 0, 
    y: 0 
}); 

Вы увидите, что изображение не растягиваться больше.

Другой хорошие новости является то, что я уменьшил размеры стадии вдвое (хотя количество прямоугольников, площадь размещено прямоугольников и размера изображения остается неизменным) и производительность значительно улучшилась. Надеюсь, ваш размер сцены не такой большой (2000x5000), как и раньше? Проверьте JSFIDDLE и посмотрите на него в действии!