1

Kineticjsでドラッグ可能とダブルクリックを一緒に使用する方法は？ドラッグ可能を使用する場合、ダブルクリックは機能しません。これが画像を描くための私のコードです。

  function draw(images) {
       abcImg= new Kinetic.Rect({
       x: 50,
       y: 150,
       width: 50,
       height: 50,
       fillPatternImage: images.abc,
       name: "abc",
       draggable: true
   });
 }

ここでダブルクリックしたときのコード。

  layer.on('dblclick', function(evt) {
    var shape = evt.shape;
    name = shape.getName();

    $( "#dialog-form" ).dialog( "open" );

  });

私はkineticjsとjqueryを使用しています。ありがとうございます。

4

2 に答える 2

2

ステージの空いている領域でマウス/タッチイベントをリッスンする方法は次のとおりです。

ステージ（オブジェクト以外の領域）でマウス/タッチイベントをリッスンするには、ステージを埋める長方形を含む新しいレイヤーを追加する必要があります。次に、空のステージ領域でマウス/タッチイベントを処理できます。eventLayer.on（ "dblclick"、function（e）{//ダブルクリックする}

そのレイヤーコードは次のようになります。

  // Create a layer that will listen for mouse/touch events
  var eventLayer = new Kinetic.Layer();
  eventLayer.add(new Kinetic.Rect({
  x:0,
  y:0,
  width:400,
  height:300
  }));
  stage.add(eventLayer);

  // TEST--listen for "dblclick"
  eventLayer.on('dblclick', function(evt) {
    alert("2click");
  });

完全なコードとフィドルは次のとおりです。http： //jsfiddle.net/m1erickson/gNMRq/

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.2-beta.js"></script>

  </head>
  <body>
    <div id="container"></div>

    <script>
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 400,
        height: 300
      });
      var layer = new Kinetic.Layer();
      var rectX = stage.getWidth() / 2 - 50;
      var rectY = stage.getHeight() / 2 - 25;

      var box = new Kinetic.Rect({
        x: rectX,
        y: rectY,
        width: 100,
        height: 50,
        fill: '#00D2FF',
        stroke: 'black',
        strokeWidth: 4,
        draggable: true
      });

      // add cursor styling
      box.on('mouseover', function() {
        document.body.style.cursor = 'pointer';
      });
      box.on('mouseout', function() {
        document.body.style.cursor = 'default';
      });

      // Create a layer that will listen for mouse/touch events
      var eventLayer = new Kinetic.Layer();
      eventLayer.add(new Kinetic.Rect({
      x:0,
      y:0,
      width:400,
      height:300
      }));
      stage.add(eventLayer);

      // TEST--listen for "dblclick"
      eventLayer.on('dblclick', function(evt) {
        alert("2click");
      });

      layer.add(box);
      stage.add(layer);
    </script>
  </body>
</html>
于 2013-02-26T06:12:46.693 に答える
1

正常に動作しています。これを見てください。ドラッグ可能とdblclickを使用しており、どちらも正常に機能します。

http://jsbin.com/oruhif/1/edit

于 2013-02-26T05:53:06.610 に答える