1

こんにちは私はkineticjsを使用していますが、指定されたクラスのキャンバスに図形をドロップする方法を考えていました。したがって、同じクラスのキャンバスが5つある場合は、ここにシェイプをドロップできます。これらのキャンバスの1つにドロップされていない場合は、元の場所に戻ります。私が今持っている唯一のコードは、私が作成した私の形です。

var stage = new Kinetic.Stage({
    container: 'container',
    width: 965,
    height: 200
  });

  var layer = new Kinetic.Layer();    
  var poly = new Kinetic.Rect({
    x: 75,
    y: 75,
    width: 100,
    height: 50,
    fill: '#00D2FF',
    stroke: 'white',
    strokeWidth: 4,
    draggable: true
  });

  // add the shape to the layer
  layer.add(poly);

  // add the layer to the stage
  stage.add(layer);
4

1 に答える 1

1

KineticJSには

 .moveTo();  // (  node.moveTo(container);  )

方法。例：

 poly.moveTo(stage);

または、stage1、stage2、stage3のような複数のキャンバスがある場合：

 poly.moveTo(stage1); poly.moveTo(stage2); poly.moveTo(stage3);

また、マウス座標を指定してコンテナを返すリスナーを作成する必要があります。これにより、「mousemove」または「touchmove」を実行するときに、どの「コンテナ/ステージ」にいるのかを判断できます。有効なコンテナにいる場合は、シェイプをそのコンテナに移動します。

個人的には、1つのステージを作成し、それをパーツに分割して、それらのパーツを固定サイズのレイヤーにする方が簡単だと思います。この方法で、次のことができます。

 var coordinates = stage.getUserPosition();

それを使用して、オブジェクトを配置するレイヤーを決定します（レイヤーはコンテナーのタイプです）

于 2013-01-15T18:24:40.043 に答える