1

KineticJS を使用して単純な戦略ゲームを構築しようとしています。画面全体に収まるようにサイズ変更された Kinetic.Stage が 1 つあります。その段階では、一般的に 3 つのレンダリング レイヤーを使用する予定です。ゲームの統計を表示する HUD レイヤーの一番上 - 明らかにドラッグできません。1 つ下のレイヤーは「アクション レイヤー」で、ゲーム マップとすべてのアクションが表示されます。一番下には静的な背景レイヤーがあり、ある種の背景を表示していますが、この例では興味深いものではありません。マップをスクロールするために、アクション レイヤーをドラッグ可能にするつもりです。問題は、この方法では機能しないようで、アクション レイヤーをドラッグできないことです。私は何かが欠けているに違いない。

ここでフィドルで問題を再現しました：

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);
4

2 に答える 2

1

驚いたことに、最も基本的な例でさえ、Kinetic.Layer をどちらもドラッグできませんでした: http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-the-stage-with-kineticjs /ドラッグ可能をステージからレイヤーに切り替えてみました。高さ、幅、x、yが指定されていなかったからかもしれないと思ったので、次のように追加しました。

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

それでも、ステージをドラッグするようには機能しませんでした。レイヤーにはプロパティdraggable http://kineticjs.com/docs/Kinetic.Layer.htmlがあるとドキュメントが言っていることを考えると、本当に奇妙です。

とにかく、代替手段として、すべてのオブジェクトを保持するレイヤーにマスター Kinetic.Group を追加し、そのマスター グループを に設定することをお勧めしますdraggable: true。次に、レイヤーと同じ幅と高さのマスター グループに背景として機能する四角形を追加します。これにより、グループに高さと幅が与えられ、レイヤー全体をドラッグできるようになります。次に、アクション レイヤーに属する他のすべての要素をそのグループに追加できます。このようなもの：

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);

グループはドラッグ可能になり、ドラッグ可能にする必要があるすべてのオブジェクトを内部に保持します。

于 2013-07-02T15:13:30.313 に答える
1

私の意見では、主な問題は、レイヤーをレイヤーに含めるという事実に由来します。ドラッグ可能なものは混乱します。この投稿は、バグの可能な説明です。さらに、ステージ全体をlistening:false. ステージからを削除するlistening:falseと、このレイヤーのテキストとこの領域のみをドラッグすることで、actionLayer をドラッグできることがわかります。

レイヤー全体のみをドラッグ可能にしたい場合の回避策は、mapLayerandforegroundLayerをグループに変更することです。私はあなたが何を望んでいるのか正確にはわかりませんが、このフィドルではドラッグ可能なものを設定しactionLayerました.mapLayerをドラッグするときは実際にactionLayerをドラッグし、foregroundlayerをドラッグするとこのグループのみをドラッグします.

var mapLayer = new Kinetic.Group();

var foregroundLayer = new Kinetic.Group({draggable:true});

レイヤー内の何かをドラッグするたびにレイヤー全体のみをドラッグする場合draggable:trueは、フォアグラウンドレイヤーを削除するだけです。

それが役に立てば幸い。

于 2013-07-03T02:33:20.977 に答える