KineticJS의 드래그 가능 및 정적 레이어 구성

Question

간단한 전략 게임을 만들기 위해 KineticJS를 사용하려고합니다. 하나의 키네틱이 있습니다. 전체 화면에 맞게 스테이지가 리사이즈됩니다. 그 단계에서 나는 일반적으로 3 개의 렌더링 레이어를 가질 예정입니다. 대부분의 HUD 레이어는 게임 통계를 보여 주며 분명히 드래그 할 수 없습니다. 아래의 한 레이어는 "액션 레이어"로 모든 액션이 표시되는 게임 맵입니다. 아래쪽에는 정적 배경 레이어가 있으며,이 예제에서는 재미없는 배경 화면을 보여줍니다. 지도를 스크롤하기 위해 액션 레이어를 드래그 할 수있게하려고합니다. 문제는이 방법으로 작동하지 않는 것 같아서 액션 레이어를 드래그 할 수 없다는 것입니다. 나는 뭔가를 놓치고 있어야합니다.

나는 여기에 바이올린에 문제를 재현 : 내가 발견 액션 층의 루트에 모양을 추가하는 레이어의 드래그 허용하는 한

또한

http://jsfiddle.net/shadowfire/2v9xS/22/

-하지만 당신의 경우 그 모양을 드래그하면 큰 효과가없는 것 같습니다.

대응 코드 :

var stage = new Kinetic.Stage({ 
    container: 'myCanvas', 
    width: 400, 
    height: 400, 
    draggable: false, 
    listening: true 
}); 

var backgroundLayer = new Kinetic.Layer({draggable: false}); 
var actionLayer = new Kinetic.Layer({draggable: true, listening: true}); 
var mapLayer = new Kinetic.Layer({draggable: true}); 
var foregroundLayer = new Kinetic.Layer({draggable: true, clearBeforeDraw: false}); 
var hudLayer = new Kinetic.Layer({draggable: false}); 

backgroundLayer.add(new Kinetic.Rect(
    { 
     x:0, 
     y:0, 
     width: 400, 
     height: 400, 
     fill: 'grey' 
    } 
)); 

mapLayer.add(new Kinetic.Rect(
    { 
     x:100, 
     y:100, 
     width: 200, 
     height: 200, 
     fill: 'orange', 
     stroke: 'black', 
     draggable: true 
    } 
)); 

foregroundLayer.add(new Kinetic.Circle(
    { 
     x:200, 
     y:200, 
     radius: 30, 
     fill: 'yellow', 
     stroke: 'black', 
     draggable: true 
    } 
)); 

actionLayer.add(mapLayer); 
actionLayer.add(foregroundLayer); 
actionLayer.add(new Kinetic.Text({text:"ActionLayer - draggable works only here", fill:'green', x:100, y:100})); 

hudLayer.add(new Kinetic.Text(
    { 
     fontSize: 30, 
     text: 'STATUS', 
     fill: 'green' 
    } 
)); 

stage.add(backgroundLayer); 
stage.add(actionLayer); 
stage.add(hudLayer); 

Answer 1

내 의견의 주요 문제는 레이어에 레이어를 포함한다는 사실에서 비롯된 것입니다. draggable는 엉망이된다. this post은 버그에 대한 가능한 설명입니다. 또한 전체 무대를 listening:false으로 설정한다는 사실. 스테이지에서 listening:false을 제거하면이 레이어의 텍스트와이 영역 만 드래그하여 actionLayer를 드래그 할 수 있음을 알 수 있습니다.

전체 레이어 만 드래그 가능하게하려면 mapLayer 및 foregroundLayer을 그룹으로 변경하는 것이 좋습니다. 정확히 무엇을 원하는지 모르지만이 부분에 fiddle을 설정했는데 mapLayer를 드래그 할 때 을 드래그 할 수 있습니다. 실제로 actionLayer를 드래그하고 foregroundlayer에서 드래그하면이 그룹 만 드래그합니다.

var mapLayer = new Kinetic.Group();

var foregroundLayer = 새로운 키네틱.그룹 ({draggable : true});

아무 것도 드래그 할 때마다 전체 레이어를 드래그하려면 foregroundlayer에서 draggable:true 만 제거하면됩니다.

희망이 있습니다.

Answer 2

놀랍게도, 나는 Kinetic.Layer 심지어 가장 기본적인 예에서, 어느 쪽도 드래그하지 가져올 수 없습니다 : http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-the-stage-with-kineticjs/ 나는 레이어에 무대에서 드래그를 전환했습니다. 난, y는이 같은 사람들을 추가하므로 지정된 더 높이, 폭, X 없었기 때문에 어쩌면 그것이라고 생각 :

var layer = new Kinetic.Layer({ 
    draggable: true, 
    x:0, 
    y:0, 
    width:578, 
    height:200, 
    visible:true, 
    listening: true 
}); 

하지만 을 여전히은 무대 작품을 끌어처럼 작동하지 않았다! 문서를 고려할 때 실제로 이상한 것은 레이어에 속성이 있음을 말합니다. draggablehttp://kineticjs.com/docs/Kinetic.Layer.html.

어쨌든 대안으로 모든 개체를 보유 할 계층에 마스터 Kinetic.Group을 추가하고 해당 마스터 그룹을 draggable: true으로 설정하는 것이 좋습니다. 그런 다음 레이어와 동일한 너비와 높이를 가진 마스터 그룹의 배경 역할을하는 사각형을 추가하면 전체 레이어를 드래그 할 수 있도록 그룹에 높이와 너비가 부여됩니다. 그런 다음 Action 레이어에 속한 다른 모든 요소를 ​​해당 그룹에 추가 할 수 있습니다. 다음과 같은 것 :

var masterGroup = new Kinetic.Group({ 
    x: actionLayer.getX(), 
    y: actionLayer.getY(), 
    draggable: true, 
    name: "masterGroup" 
}); 

actionLayer.add(masterGroup); 

var actionBG = new Kinetic.Rect({ 
    width: actionLayer.getWidth(), 
    height: actionLayer.getHeight(), 
    draggable: true, 
    name: "actionBG" 
}); 

masterGroup.add(actionBG); 
//masterGroup.add(moreActionLayerObjects); 

그룹은 드래그 가능하며 내부의 모든 오브젝트도 드래그 할 수 있어야합니다.