Question

如何在kineticjs中使用可拖动和双击？使用draggable时，双击将无法正常工作。这是我绘制图像的代码..

  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 ..谢谢..

Answer 1

以下是如何在舞台的空白区域收听鼠标/触摸事件。

要在舞台（任何非对象区域）上侦听鼠标/触摸事件，您需要添加一个包含填充舞台的矩形的新图层。然后你可以在空的舞台区域处理鼠标/触摸事件：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>

Answer 2

工作正常。看看这个，它使用draggable和dblclick，两者都可以正常工作。

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

如何在kineticjs中使用可拖动和双击？

2 个答案: