2012-12-03 1 views
0

난 그냥 EaselJS을 시도하기 시작 원활하지 않고 내 첫 번째 시도는 드래그를 다음과 https://github.com/CreateJS/EaselJS/blob/master/examples/DragAndDrop.htmlEaselJS이

문제에서 예를 드롭 JPEG 이미지를로드에 있습니다 : 나는 물체를 끌어 시도 할 때, 드래그 동작이 매우 불안정하고 부드럽 지 않습니다! 왜 이런거야?

나는 stage.enableMouseOver(50);을 시도했지만 여전히 동일합니다. KineticJS를 사용하는 this example처럼 매끄럽지 않습니다.

+0

[해당 사이트의 라이브 데모] (http://www.createjs.com/#!/EaselJS/demos/dragdrop)와 동일합니까? 필자는 안드로이드 에서조차도 성능 문제가 발생하지 않았다고 생각했다. 그러나 우리가 사용하고있는 코드없이이 질문에 답하는 방법은 없습니다. – Potatoswatter

+0

자신의 사이트에서 라이브 데모가 너무 원활하지 않습니다 ... 나는 기본적으로 자신의 github repo에서 동일한 코드를 사용하여 내 자신의 웹 서버를 도망. 나는 꽤 괜찮은 컴퓨터 (4GHz 쿼드 코어, 24GB 메모리, ATI 전용 그래픽, SSD)를 가지고 있으며 Chrome과 IE10에서 고르지 않은 것을 볼 수 있습니다. – Nyxynyx

+0

확실히 마력 문제는 아닙니다. 미드 레인지 폰에서는 괜찮을 것입니다. 그것은 당신이 Windows를 실행하는 것 같습니다. 나는 그 플랫폼에서 테스트 해본 적이 없다. 어쩌면 버그 리포트 나 그들의 포럼을 제출해보십시오. – Potatoswatter

답변

0

저는 일반적으로 모바일 및 데스크톱 웹 앱에서 다음 공식을 사용합니다. 그리 나쁘지 않습니다. 표시 객체에 다른 텍스트 및 표시 객체가 많이 포함 된 경우에만 성능 문제가 발생합니다.

로드 된 비트 맵에 드래그 앤 드롭을 활성화하는 예제입니다.

var canvas; 
var stage; 

init = function() { 

    canvas = document.getElementById("canvas"); 
    stage = new createjs.Stage(canvas); 
    displayPicture ("YOUR PATH"); 
} 

displayPicture = function (imgPath) { 

    var image = new Image(); 

    image.onload = function() { 

     // Create a Bitmap from the loaded image 
     var img = new createjs.Bitmap(event.target) 

     // scale it 
     img.scaleX = img.scaleY = 0.5; 

     /// Add to display list 
     stage.addChild(img); 

     //Enable Drag'n'Drop 
     enableDrag(img); 

     // Render Stage 
     stage.update(); 

    } 

    // Load the image 
    image.src = imgPath; 
} 

enableDrag = function (item) { 

    // OnPress event handler 
    item.onPress = function(evt) { 

     var offset = { x:item.x-evt.stageX, 
         y:item.y-evt.stageY}; 

     // Bring to front 
     stage.addChild(item); 

     // Mouse Move event handler 
     evt.onMouseMove = function(ev) { 

      item.x = ev.stageX+offset.x; 
      item.y = ev.stageY+offset.y; 
      stage.update(); 
     } 
    } 
} 

init()