저는 일반적으로 모바일 및 데스크톱 웹 앱에서 다음 공식을 사용합니다. 그리 나쁘지 않습니다. 표시 객체에 다른 텍스트 및 표시 객체가 많이 포함 된 경우에만 성능 문제가 발생합니다.
로드 된 비트 맵에 드래그 앤 드롭을 활성화하는 예제입니다.
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()
[해당 사이트의 라이브 데모] (http://www.createjs.com/#!/EaselJS/demos/dragdrop)와 동일합니까? 필자는 안드로이드 에서조차도 성능 문제가 발생하지 않았다고 생각했다. 그러나 우리가 사용하고있는 코드없이이 질문에 답하는 방법은 없습니다. – Potatoswatter
자신의 사이트에서 라이브 데모가 너무 원활하지 않습니다 ... 나는 기본적으로 자신의 github repo에서 동일한 코드를 사용하여 내 자신의 웹 서버를 도망. 나는 꽤 괜찮은 컴퓨터 (4GHz 쿼드 코어, 24GB 메모리, ATI 전용 그래픽, SSD)를 가지고 있으며 Chrome과 IE10에서 고르지 않은 것을 볼 수 있습니다. – Nyxynyx
확실히 마력 문제는 아닙니다. 미드 레인지 폰에서는 괜찮을 것입니다. 그것은 당신이 Windows를 실행하는 것 같습니다. 나는 그 플랫폼에서 테스트 해본 적이 없다. 어쩌면 버그 리포트 나 그들의 포럼을 제출해보십시오. – Potatoswatter