Konva. js изображения появляются на рабочем столе, но не на мобильных - PullRequest
Новая
       33

Konva. js изображения появляются на рабочем столе, но не на мобильных

0 голосов
/ 27 апреля 2020

Я пытаюсь нарисовать сохраненную сцену Konva. js, включающую изображения. Он работает должным образом на настольном компьютере (Chrome и Safari), но не работает в мобильном Chrome или мобильном Safari (iOS; я не смог протестировать Android).

I ' мы использовали console.log, чтобы подтвердить, что image.draw() запускается на мобильном устройстве с правильным активом, но холст остается пустым.

Возможно, я пропускаю какое-либо состояние гонки, которое более распространено на мобильных устройствах? Я новичок в Konva и в Canvas, поэтому очень благодарны за подробные ответы.

Соответствующий JS код приведен ниже: 

var imageData = {
  billy: {
    x: 146,
    y: 126,
    src: '/assets/billy.png'
  },
  nox: {
    x: 279,
    y: 126,
    src: '/assets/nox.png'
  },
  battleMap: {
    x: 2100,
    y: 2100,
    src: '/assets/map.jpg'
  }
};

socket.on('stage', data => {
    var json = JSON.parse(data);
    stage = Konva.Node.create(json, 'container');
    mapLayer = stage.findOne("#mapLayer");
    tokenLayer = stage.findOne("#tokenLayer");

    var images = stage.find("Image");

    images.map(image => {
      var id = image.attrs.id;
      var imageObj = new Image();

      imageObj.onload = function() {
        stage.findOne('#' + id).image(imageObj);
        console.log("drawing " + imageObj.src);
        image.draw();

      };
      imageObj.src = imageData[id].src;
    });
});
...