Easel.js : 컨테이너에 이미지를 배치하고 마우스 상호 작용을 추가 할 때의 브라우저 호환성

Firefox (v21.0)에서 100 % 작동한다고 말하여이 질문을 시작하겠습니다. 어떤 이유로 Google 크롬에서 작동하지 않습니다 (v27.0.1453.94m). 또한 IE10에서는 작동하지 않습니다.Easel.js : 컨테이너에 이미지를 배치하고 마우스 상호 작용을 추가 할 때의 브라우저 호환성

function canvasDrawBackground(value){ 
    console.log(value);  
    stage.removeChild(background); 
    var temp = new createjs.Bitmap("images/bg_" + value +".jpg"); 
    background = new createjs.Container(); 
    background.x = background.y = 0; 
    background.addChild(temp); 
    stage.addChild(background); 
    background.addEventListener("mousedown", function(evt) { 
     var offset = {x:evt.target.x-evt.stageX, y:evt.target.y-evt.stageY}; 
     evt.addEventListener("mousemove",function(ev) { 
      ev.target.x = ev.stageX+offset.x; 
      ev.target.y = ev.stageY+offset.y; 
      stage.update(); 
     }); 
    }); 
    stage.update(); 
}

그래서, 파이어 폭스에서 위의 코드는 캔버스에 추가되는 이미지에서와 같이 작동하며 주위를 드래그 할 수 있습니다 :

는 여기에 내가 문제가 있습니다 자바 스크립트 코드입니다.

Chrome/IE10에서는 아무 일도 일어나지 않으며 단순히 캔버스에 아무것도 표시되지 않습니다. 문제는 컨테이너에 다른 항목을 배치 할 수 있으므로 이미지를 컨테이너에 추가 할 때와 관련이 있다고 생각합니다.

나는 http://code.createjs.com/easeljs-0.6.1.min.js을 사용하고 있으며이 코드는 "드래그"자습서를 기반으로합니다. 튜토리얼의 코드는 다음과 같습니다.

<!DOCTYPE html> 
<html> 
<head> 
    <title>EaselJS demo: Dragging</title> 
    <link href="../../shared/demo.css" rel="stylesheet" type="text/css"> 
    <script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script> 
    <script> 
     var stage, output; 

     function init() { 
      stage = new createjs.Stage("demoCanvas"); 

      // this lets our drag continue to track the mouse even when it leaves the canvas: 
      // play with commenting this out to see the difference. 
      stage.mouseMoveOutside = true; 

      var circle = new createjs.Shape(); 
      circle.graphics.beginFill("red").drawCircle(0, 0, 50); 

      var label = new createjs.Text("drag me", "bold 14px Arial", "#FFFFFF"); 
      label.textAlign = "center"; 
      label.y = -7; 

      var dragger = new createjs.Container(); 
      dragger.x = dragger.y = 100; 
      dragger.addChild(circle, label); 
      stage.addChild(dragger); 

      dragger.addEventListener("mousedown", function(evt) { 
       var offset = {x:evt.target.x-evt.stageX, y:evt.target.y-evt.stageY}; 

       // add a handler to the event object's onMouseMove callback 
       // this will be active until the user releases the mouse button: 
       evt.addEventListener("mousemove",function(ev) { 
        ev.target.x = ev.stageX+offset.x; 
        ev.target.y = ev.stageY+offset.y; 
        stage.update(); 
       }); 
      }); 

      stage.update(); 
     } 
    </script> 
</head> 
<body onLoad="init();"> 
    <canvas id="demoCanvas" width="500" height="200"> 
     alternate content 
    </canvas> 
</body> 
</html>

"var circle = new createjs.Shape();"을 변경하십시오. 비트 맵/이미지로 createjs.Bitmap ("images/bg_"+ value + ".jpg"); 그런 다음 렌더링되지 않습니다.

도움을 주시면 대단히 감사하겠습니다. 바라기를 나는 잘못하고있다. : P

출처

2013-05-31 666jfox777

업데이트 : 캔버스를 클릭하고 드래그하여 배경이 표시되는 것처럼 보입니다 ... 그래서 나는 약간의 휴식 후에 즉시 배치하지 않는 이유를 알아낼 것입니다. >. < – 666jfox777

이것은 이미지가로드되지 않았기 때문일 수 있습니다. 스테이지를 만든 후에 만 스테이지를 업데이트하면 이미지가 표시되지 않을 수 있습니다. 로드 된 후 스테이지를 업데이트하기 위해 이미지에 콜백을 추가하는 것이 좋습니다.

// Simple approach. May not work depending on the scope of the stage. 
var temp = new createjs.Bitmap("images/bg_" + value +".jpg"); 
temp.image.onload = function() { stage.update(); }

사용하려는 이미지를 미리로드하는 것이 좋습니다.

출처

2013-06-04 15:48:44 Lanny

굉장! 이 작품, 고마워! – 666jfox777

Easel.js : 컨테이너에 이미지를 배치하고 마우스 상호 작용을 추가 할 때의 브라우저 호환성

답변

관련 문제