Ошибка приводит к тому, что на этапе Konva.js ничего не отображается только время от времени. Что делать?

Question

У меня очень странное поведение моего сценария: только время от времени (редко 3-4 раза в одно время сразу после друг друга, но, скорее всего, с 7-го по 150-й пробный период) загрузка скрипа, но я вижу только белый холст и получить сообщение об ошибке:

Uncaught TypeError: Cannot read property 'getParent' of undefinedKonva.Util.addMethods.add @ konva.min.js:44draw @ floorplansurvey.php:950(anonymous function) @ floorplansurvey.php:985images.(anonymous function).onload @ floorplansurvey.php:390

на перезаряжания он часто работает снова ... я просто понятия не имею, на все, что происходит здесь, ошибка не может быть принужден/воспроизведен, я благодарю вас так много, если у вас есть все, что вы можете мне помочь. Даже стратегия для более четкого анализа было бы полезно, извиняюсь за то, что неспецифическое и длинный код

редактировать: Я сделал jsfiddle под: https://jsfiddle.net/17548hmv/1/

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

@ floorplansurvey.php:390:

function loadImages(sources, draw) { 
    //window.location.reload(true); 
    var images = {}; 
    var loadedImages = 0; 
    var numImages = 0; 
    // get num of sources 
    for(var src in sources) { 
     numImages++; 
    } 
    for(var src in sources) { 
     images[src] = new Image(); 
     images[src].onload = function() { 
      if(++loadedImages >= numImages) { 
       draw(images); 
      } 
     }; 
     images[src].src = sources[src]; 
    } 
    delete (loadedImages); 
    delete (numImages); 
}; 

@ floorplansurvey.php:985images.(anonymous function).onload:

loadImages(sources, function(images) { 
    draw(images); 
}); 

@ floorplansurvey.php:950(anonymous function):

bglayer.add(plan); 

@ konva.min.js:44draw: I dont understand this one myself

add:function(t) 
    {if(arguments.length>1) 
    {for(var e=0;e<arguments.length;e++) 
    this.add(arguments[e]); 
    return this}if(t.getParent())return t.moveTo(this),this; 
    var n=this.children; 
    return 

источники Var определяется как:

var sources = { 

    Cd: './graphics/Cd.png', 
    Cu: './graphics/Cu.png', 
    Ca: './graphics/Ca.png', 
    Cs: './graphics/Cs.png', 
    Cc: './graphics/Cc.png', 

    Ed: './graphics/Ed.png', 
    Eu: './graphics/Eu.png', 
    Ea: './graphics/Ea.png', 
    Es: './graphics/Es.png', 
    Ec: './graphics/Ec.png', 

    Hd: './graphics/Hd.png', 
    Hu: './graphics/Hu.png', 

... и так далее

и это функция Жеребьевка:

function draw(images) { 
for (i=0, len=showdatax.length; i<=len-1; i++) 
    { 
     //window.location.reload(true); 
    var gridcell = new Konva.Rect({ 
     x: parseInt((imagesizeX - showdatax[i])*scalar-(gridcellsize/2)), 
     y: parseInt((imagesizeY - showdatay[i])*scalar-(gridcellsize/2)), 
     offset: [0, 0], 
     width: gridcellsize, 
     height: gridcellsize, 
     //fill: 'white', 
     //stroke: 'grey', 
     //strokeWidth: 2, 
     draggable: false, 
     id: showdatav[i] 
    }); 
      gridlayer.add(gridcell); 
    } 
//defaultsettiongs 
var init = new Array(); 
init['x'] = new Array(); 
init['y'] = new Array(); 

     init['x']['c'] = 0*scalar; 
     init['y']['c'] = 170*scalar; 
     init['x']['e'] = 0*scalar; 
     init['y']['e'] = 320*scalar; 
     init['x']['h'] = 0*scalar; 
     init['y']['h'] = 470*scalar; 
     init['x']['l'] = 0*scalar; 
     init['y']['l'] = 620*scalar; 
     init['x']['s'] = 0*scalar; 
     init['y']['s'] = 770*scalar; 
     init['x']['w'] = 0*scalar; 
     init['y']['w'] = 920*scalar; var step = 0; 
var count = new Array (
'c','e','h','l','s','w'); 

     count['c'] = 0; 

     count['e'] = 0; 

     count['h'] = 0; 

     count['l'] = 0; 

     count['s'] = 0; 

     count['w'] = 0; 
    var starttime = new Date(); 
var loghistory = ''; 
//drag event functions 
function mouseoverbox (box,active) 
{ 
    writeMessage('Click and hold the left mouse button and pull this activity icon to the floorplan.'); 
    box.setFillPatternImage(active); 
    box.shadowColor('blue'); 
    box.moveTo(templayer); 
    badgelayer.draw(); 
    templayer.draw(); 
} 
function dragstarttouchstartbox (box,pos,kind) 
{ 
    //count[kind]++; 
    writeMessage('dragstart' + count[kind]); 
    var boxx = box.x; 
    box.x(pos.x-1.5*gridcellsize); 
    var boxy = box.y; 
    box.y(pos.y-1.5*gridcellsize); 
    var boxrshadowoffsetx = box.shadowOffset(); 
    box.shadowOffset({x:0.25*gridcellsize,y:0.25*gridcellsize}); 
    box.moveTo(templayer); 
    badgelayer.draw(); 
    templayer.draw(); 
} 
function dragmovebox (box,pos,kind,success,active,caution) 
{ 
    writeMessage('Your outside of the floorplan. Dropping the activity icon will reset it to its initial position.'); 
    box.moveTo(templayer); 
    var boxx = box.x; 
    box.x(pos.x-1.5*gridcellsize); 
    var boxy = box.y; 
    box.y(pos.y-1.5*gridcellsize); 
    var shape = gridlayer.getIntersection(pos); 
    if (shape) 
    { 
     if (!badgelayer.getIntersection(pos)) 
     { 
      writeMessage('Release the mouse button to place this activity icon on position (' + shape.x() + '|' + shape.y() + ')'); 
      box.x(shape.x()-gridcellsize); 
      box.y(shape.y()-gridcellsize); 
      box.setFillPatternImage(success); 
      box.shadowColor('green'); 
      badgelayer.draw(); 
     } 
     else 
     { 
      writeMessage('Position (' + shape.x() + '|' + shape.y() + ') is in use!!! Can\'t allocate second activiy icon here.'); 
      var boxx = box.x; 
      box.x(pos.x-1.5*gridcellsize); 
      var boxy = box.y; 
      box.y(pos.y-1.5*gridcellsize); 
      box.setFillPatternImage(caution); 
      box.shadowColor('red'); 
      badgelayer.draw(); 
     } 
    } 
    else 
    { 
     box.setFillPatternImage(active); 
     box.shadowColor('blue'); 
     templayer.draw(); 
     badgelayer.draw(); 
    } 
} 
function dragendtouchendbox (box,pos,kind,caution,defaultimage) 
{ 
    var shape = gridlayer.getIntersection(pos); 
    box.moveTo(badgelayer); 
    templayer.draw(); 
    if (shape && !(badgelayer.getIntersection(pos))) 
    { 
     writeMessage('Activity icon successfully placed at position (' + shape.x() + '|' + shape.y() + ').'); 
     box.shadowOffset({x:0,y:0}); 
     box.shadowColor('green'); 
    } 
    else 
    { 
     box.shadowColor('red'); 
     box.setFillPatternImage(caution); 
     badgelayer.draw(); 
     var fromouttween = new Konva.Tween 
     ({ 
      node: box, 
      x: init['x'][kind]+imagesizeX*scalar+ gridcellsize, 
      y: init['y'][kind], 
      easing: Konva.Easings['EaseOut'], 
      duration: 0.3 
     }); 
     if (!shape) 
     { 
      writeMessage('Please drop the activity icons inside the floorplan.'); 
     } 
     else if (badgelayer.getIntersection(pos)) 
     { 
      writeMessage('Please don\'t drop the activity icons onto a used place.'); 
     } 
     fromouttween.play(); 
     box.shadowColor('black'); 
     box.setFillPatternImage(defaultimage); 
     box.shadowOffset({x:0,y:0}); 
     badgelayer.draw(); 
     pos.x=-100; 
     pos.y=-100; 
    } 
    count['kind']++; 
    step++; 
    writeResultToForm(pos,count,kind,step,loghistory,starttime); 
    badgelayer.draw(); 
    templayer.draw(); 
    //writeMessage('dragend'); 
} 
function mouseoutbox (box,defaultimage) 
{ 
    box.setFillPatternImage(defaultimage); 
    box.moveTo(badgelayer); 
    box.shadowColor('black'); 
    if (!validateForm(false)) 
    { 
     writeMessage('There are still activity icons left to place.'); 
    } 
    else 
    { 
     writeMessage('All activity icons are placed successfully. You can click "continue" now or change your placements.'); 
    } 
    badgelayer.draw(); 
    templayer.draw(); 
} 
function alertbox (box,caution) 
{ 
    box.setFillPatternImage(caution); 
    box.shadowcolor('red'); 
    badgelayer.draw; 
} 

//cbox and text 
    var textc = new Konva.Text({ 
     x: init['x']['c']+imagesizeX*scalar+gridcellsize*5, 
     y: init['y']['c']+gridcellsize, 
     text: 'Cooking', 
     align: 'left', 
     width: badgetextwidth 
    }); 
    var boxc = new Konva.Rect({ 
     x: init['x']['c']+imagesizeX*scalar+gridcellsize, 
     y: init['y']['c'], 
     offset: [0, 0], 
     width: 3*gridcellsize, 
     height: 3*gridcellsize, 
     fillPatternImage: images.Cd, 
     fillPatternScaleX: scalar, 
     fillPatternScaleY: scalar, 
     stroke: 'black', 
     strokeWidth: 4, 
     draggable: true, 
     cornerRadius: gridcellsize/2, 
     shadowColor: 'black', 
     shadowBlur: 10, 
     shadowOffset: {x : 0, y : 0}, 
     shadowOpacity: 0.5 
    }); 
    var boxcd = new Konva.Rect({ 
     x: init['x']['c']+imagesizeX*scalar+gridcellsize, 
     y: init['y']['c'], 
     offset: [0, 0], 
     width: 3*gridcellsize, 
     height: 3*gridcellsize, 
     fillPatternImage: images.Cu, 
     fillPatternScaleX: scalar, 
     fillPatternScaleY: scalar, 
     stroke: 'grey', 
     strokeWidth: 2, 
     draggable: false, 
     cornerRadius: gridcellsize/2, 
    }); 
    boxc.on('mouseover ', function() { 
     mouseoverbox (this,images.Ca); 
     }); 
    boxc.on('dragstart', function() { 
     var pos = stage.getPointerPosition(); 
     dragstarttouchstartbox (this,pos,'c'); 
    }); 
    boxc.on('dragmove', function() { 
     var pos = stage.getPointerPosition(); 
     dragmovebox(this,pos,'c',images.Cs,images.Ca,images.Cc); 
    }); 
    boxc.on('dragend', function() { 
     var pos = stage.getPointerPosition(); 
     dragendtouchendbox (this,pos,'c',images.Cc,images.Cd); 
    }); 
    boxc.on('mouseout ', function() { 
     mouseoutbox (this,images.Cd) 
    }); 
    boxc.on('foo', function() { 
     alertbox (this,images.Cd) 
    }); 
//ebox and text 
    var texte = new Konva.Text({ 
     x: init['x']['e']+imagesizeX*scalar+gridcellsize*5, 


...and so on for all the boxes addes here (5 times as long): 


     defaultlayer.add(boxcd); 
     badgelayer.add(boxc); 
     defaultlayer.add(textc); 

     defaultlayer.add(boxed); 
     badgelayer.add(boxe); 
     defaultlayer.add(texte); 

     defaultlayer.add(boxhd); 
     badgelayer.add(boxh); 
     defaultlayer.add(texth); 

     defaultlayer.add(boxld); 
     badgelayer.add(boxl); 
     defaultlayer.add(textl); 

     defaultlayer.add(boxsd); 
     badgelayer.add(boxs); 
     defaultlayer.add(texts); 

     defaultlayer.add(boxwd); 
     badgelayer.add(boxw); 
     defaultlayer.add(textw); 
     stage.add(bglayer); 
    stage.add(gridlayer); 
    stage.add(defaultlayer); 
    stage.add(badgelayer); 
    stage.add(templayer); 
} 

Answer 1

ОК, извините, что мне потребовалось столько времени:

решение было не так-то просто найти. Я обнаружил, что скрипт был загружен асинхронно, а png еще не был доступен с использованием хронологического анализа хромосом. поэтому я пошел в свой код и должен был различать вещи, которые действительно должны быть в функции рисования, а какие нет. я добавил план к массиву изображений (источников), который загружается (SRC = ...) перед выполнением дро(), а затем добавил

sources.onload= loadImages(sources, function(images) { 
    draw(images); 
}); 

в конце моего файла ... нет, это работает без любая проблема. konva.js не имеет ничего общего с ним и до сих пор (я почти готов), как разработан для моего проекта

спасибо за кончик @lavrton, он взял меня на правильном пути

Answer 2

и вы можно просто поставить так:

var imageObj = new Image(); 

imageObj.src = 'http://localhost:8000/plugins/kamiyar/logo.png'; 

imageObj.onload = function() { 

    var img = new Konva.Image({ 
     image: imageObj, 
     x: stage.getWidth()/2 - 200/2, 
     y: stage.getHeight()/2 - 137/2, 
     width: 200, 
     height: 137, 
     draggable: true, 
     stroke: 'blue', 
     strokeWidth: 1, 
     dash: [1,5], 
     strokeEnabled: false 
    }); 

    layer.add(img); 

    layer.draw(); 
}; 

извините за мой плохой английский;)