2012-03-04 1 views
0

내가 HTML 캔버스에 이미지를 그릴하려고 작동하지 캔버스에 다른 모양도 100 % 작동합니다. 무엇 작동하지 않는 것은 다음의 코드 조각 그림 이미지입니다 : 나는 이미지를로드하는 크롬 개발자 도구로 확인할캔버스의 drawImage

$(data).find('Object').each(function(){ 
    type = $(this).attr('type'); 
    x = $(this).attr('X'); 
    y = $(this).attr('Y'); 
    switch(type){ 
    case '2': 
    height = h_panel; 
    width = w_panel; 
    ctx.fillStyle = sColor; 
    ctx.fillRect(x,y,width,height); 
    break; 
    case '1': 
    var powerFactoryImg = new Image(); 
    powerFactoryImg.onload = function(){ 
     alert('test'); 
     ctx.drawImage(powerFactoryImg,x,y,90,80); 
    }; 
    powerFactoryImg.src = 'images/power_factory.png'; 
    break; 

    //Other cases go here - they draw rectangles - all of them work 

    } 
}); 

는; 또한 .onload에서 경고가 호출되고 있습니다. 이 코드는 Chrome과 FF 모두에서 작동하지 않습니다. 여기에 무슨 문제가있을 수 있습니까?

당신에게

+0

이미지가로드되는 것을 감안할 때 문제는 제공 한 코드가 아닌 다른 곳에 있거나 문제를 볼 수 없도록 캔버스 바깥 쪽에서 이미지를 그립니다. 아니면 무언가를 그리는거야? – Delta

+1

onload에서 x 및 y의 값을 확인하십시오. alert ('test :'+ x + ','+ y); –

답변

3

버그가 가능성이 과제에서 var의 부재로 인해 발생합니다 감사합니다. 루프에서는 type, xy 변수를 계속 덮어 씁니다. 문제를 해결하려면 var 앞에 붙여 넣으십시오.

은 참조 : What is the purpose of the var keyword and when to use it (or omit it)?

$(data).find('Object').each(function(){ 
    var type = $(this).attr('type');//<-- var 
    var x = $(this).attr('X');  //<-- var 
    var y = $(this).attr('Y');  //<-- var 
    switch(type){ 
    case '2': 
     var height = h_panel; // <-- var 
     var width = w_panel; // <-- var 
     ctx.fillStyle = sColor; 
     ctx.fillRect(x,y,width,height); 
    break; 
    case '1': 
     var powerFactoryImg = new Image(); 
     powerFactoryImg.onload = function(){ 
      alert('test: ' + [x, y]); //<-- "test" is not very useful. Add [x,y] 
      ctx.drawImage(powerFactoryImg,x,y,90,80); 
     }; 
     powerFactoryImg.src = 'images/power_factory.png'; 
    break; 

    //Other cases go here - they draw rectangles - all of them work 

    } 
}); 

PS를 : 디버깅 목적을 위해, 내가 alert 이상 console.log를 사용하는 것이 좋습니다.

+0

위대한 일을했습니다. 고마워요! 이전에 X와 Y는 정의되지 않았습니다. 하지만 필자는 덮어 쓰기로 인한 문제를 이해하는 데 여전히 어려움을 겪고 있습니다. X와 Y 값이 전역 적으로 여러 번 덮어 쓰게되면 왜 제대로 읽히지 않았고 읽었을 때 정의되지 않은 결과를 얻었습니까? – ZenJ

+1

@doktor'.onload' 이벤트 리스너는 연기되어 이미지가로드 될 때 실행됩니다. 첫 번째 이미지가로드되기 전에'.each' 루프가 이미 완료되어 가장 가까운 (전역 변수)'x'와'y' 변수가 최신'x'와'y' 속성과 동일하게됩니다. 따라서 단 한 줄만 그립니다. 결과적으로, 당신은 "아무것도"발생하지 않는다고 생각합니다. 사실, 같은 줄이 여러 번 그려집니다. 각'onload' 핸들러가'x'와'y'를 바르게 해석 할 것이기 때문에 변수들을 지역적으로 선언하면 문제가 해결됩니다. –

+0

잘 설명해 주셔서 감사합니다. – ZenJ