如何在kinetijs中同时使用可拖动和双击

how to use draggable and double click together in kineticjs?

本文关键字：拖动 双击 kinetijs      更新时间：2023-09-26

如何在kinetijs中同时使用可拖动和双击？当使用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。。非常感谢。

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

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

以下是完整的代码和Fiddle：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>

它运行良好。看看这个，它使用了draggable和dblclick，两者都很好。

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

相关文章：