1

如何在动力学js中同时使用可拖动和双击？使用可拖动时，双击将不起作用。这是我绘制图像的代码..

  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) {//do doubleclick stuff}

该层代码如下所示：

  // 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 回答