Angularjs + Kineticjs鼠标事件

Question

I want to use Angularjs with Kineticjs . 我想将Angularjs与Kineticjs一起使用。 The problem is that, it seems angular is overriding mouse events on my stage object. 问题是，角度似乎覆盖了我舞台对象上的鼠标事件。

The following html works fine as stand alone file , you can test it. 以下html可以作为独立文件正常运行 ，您可以对其进行测试。 But if you put this as an Angularjs template, the mouse events stop working. 但是，如果将其作为Angularjs模板，则鼠标事件将停止工作。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #container {
        background-color: black;
        background-image: url("http://www.html5canvastutorials.com/demos/assets/line-building.png");
        background-position: 1px 0px;
        background-repeat: no-repeat;
        width: 580px;
        height: 327px;
      }
    </style>
   </head>
  <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.1.min.js"></script>
    <script defer="defer">
  function getData() {
    return {
      '1st Floor': {
        color: 'blue',
        points: [366, 298, 500, 284, 499, 204, 352, 183, 72, 228, 74, 274]
      },
      '2nd Floor': {
        color: 'red',
        points: [72, 228, 73, 193, 340, 96, 498, 154, 498, 191, 341, 171]
      },
      '3rd Floor': {
        color: 'yellow',
        points: [73, 192, 73, 160, 340, 23, 500, 109, 499, 139, 342, 93]
      },
      'Gym': {
        color: 'green',
        points: [498, 283, 503, 146, 560, 136, 576, 144, 576, 278, 500, 283]
      }
    }
  }
  function updateTooltip(tooltip, x, y, text) {
    tooltip.getText().setText(text);
    tooltip.setPosition(x, y);
    tooltip.show();
  }
  var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 325
  });
  var shapesLayer = new Kinetic.Layer();
  var tooltipLayer = new Kinetic.Layer();

  var tooltip = new Kinetic.Label({
    opacity: 0.75,
    visible: false,
    listening: false,
    text: {
      text: '',
      fontFamily: 'Calibri',
      fontSize: 18,
      padding: 5,
      fill: 'white'
    },
    rect: {
      fill: 'black',
      pointerDirection: 'down',
      pointerWidth: 10,
      pointerHeight: 10,
      lineJoin: 'round',
      shadowColor: 'black',
      shadowBlur: 10,
      shadowOffset: 10,
      shadowOpacity: 0.5
    }
  });

  tooltipLayer.add(tooltip);

  // get areas data
  var areas = getData();

  // draw areas
  for(var key in areas) {

    var area = areas[key];
    var points = area.points;

    var shape = new Kinetic.Polygon({
      points: points,
      fill: area.color,
      opacity: 0,
      // custom attr
      key: key
    });

    shapesLayer.add(shape);

  }

  stage.add(shapesLayer);
  stage.add(tooltipLayer);

  stage.on('mouseover', function(evt) {
    var shape = evt.targetNode;
    shape.setOpacity(0.5);
    shapesLayer.draw();
  });
  stage.on('mouseout', function(evt) {
    var shape = evt.targetNode;
    shape.setOpacity(0);
    shapesLayer.draw();
    tooltip.hide();
    tooltipLayer.draw();
  });
  stage.on('mousemove', function(evt) {
    var shape = evt.targetNode;
    var mousePos = stage.getMousePosition();
    var x = mousePos.x;
    var y = mousePos.y - 5;
    updateTooltip(tooltip, x, y, shape.attrs.key);
    tooltipLayer.batchDraw();
  }); 

</script>

How does event handling work on angular? 事件处理如何在angular上工作？ And how could I prevent from overriding events like: 以及如何防止覆盖诸如以下的事件：

stage.on('mouseover', function(evt) {
    var shape = evt.targetNode;
    shape.setOpacity(0.5);
    shapesLayer.draw();
  });

Thanks! 谢谢！

Answer 1

Ok, it seems Angular was capturing all DOM events. 好的，看来Angular正在捕获所有DOM事件。

The solution is to put Kineticjs tag before angular.js (and probably before jQuery too), and be sure you don't declare the tag again elsewhere in any view. 解决的办法是把Kineticjs标签angular.js之前（也可能是jQuery的前太），并确保你没有申报的标签在任何视图可能在其他地方 。

Angularjs + Kineticjs鼠标事件

问题描述

1 个解决方案

解决方案1
2 2013-05-21 14:20:42

Angularjs + Kineticjs鼠标事件

问题描述

1 个解决方案

解决方案1 2 2013-05-21 14:20:42

解决方案1
2 2013-05-21 14:20:42