잘못된 이미지의 src 오류

Question

var nodeIconImg = new Image(); 
nodeIconImg.onload = function() { 

    var nodeIcon = new Kinetic.Image({ 
     image: nodeIconImg, 
     width: 30, 
     height: 30 
    }); 
} 

var url = '<?= $baseurl; ?>/img/' + node.main_photo; 
nodeIconImg.src = url; 

이 오류가 (정확히의 drawImage 메소드에서) 발생 kinetic.js의 핵심 코드 라인 :

이

drawImage: function() { 
    var a = arguments, 
     b = this._context; 
    3 === a.length ? b.drawImage(a[0], a[1], a[2]) : 5 === a.length ? b.drawImage(a[0], a[1], a[2], a[3], a[4]) : 9 === a.length && b.drawImage(a[0], a[1], a[2], a[3], a[4], a[5], a[6], a[7], a[8]) 
} 

오류 메시지는 다음과 같습니다

Uncaught InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable.

아이디어가 있으십니까? 누구든지이 문제가 있었습니까?

Answer 1

onload 함수가 완료된 후 nodeIcon이 범위 내에 있지 않습니다.

나중에 코드에서 nodeIcon을 사용하려고하면 더 이상 정의되지 않고 오류가 throw됩니다.

당신은 온로드 기능

var nodeIcon; 

var nodeIconImg = new Image(); 
nodeIconImg.onload = function() { 

    nodeIcon = new Kinetic.Image({ 
     image: nodeIconImg, 
     width: 30, 
     height: 30 
    }); 

} 
var url = "ship.png"; 
nodeIconImg.src = url; 

외부 var nodeIcon를 선언 또는 온로드 기능 내부 레이어에 nodeIcon을 추가하거나 필요

var nodeIconImg = new Image(); 
nodeIconImg.onload = function() { 

    var nodeIcon = new Kinetic.Image({ 
     image: nodeIconImg, 
     width: 30, 
     height: 30 
    }); 
    layer.add(nodeIcon); 
    layer.draw(); 

} 
var url = "ship.png"; 
nodeIconImg.src = url;