Javascript Angularjs+；Kineticjs鼠标事件_Javascript_Angularjs_Kineticjs

Javascript Angularjs+；Kineticjs鼠标事件

javascript angularjs

Javascript Angularjs+；Kineticjs鼠标事件,javascript,angularjs,kineticjs,Javascript,Angularjs,Kineticjs,我想将Angularjs与Kineticjs一起使用。问题是，angular似乎正在覆盖我的stage对象上的鼠标事件以下html作为独立文件运行良好，您可以对其进行测试。但如果将其作为Angularjs模板，鼠标事件将停止工作 <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; }

我想将Angularjs与Kineticjs一起使用。问题是，angular似乎正在覆盖我的stage对象上的鼠标事件

以下html作为独立文件运行良好，您可以对其进行测试。但如果将其作为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>

谢谢

好的，看起来Angular正在捕获所有DOM事件

解决方案是将Kineticjs标记放在angular.js之前（可能也放在jQuery之前），并确保在任何视图中的其他地方都不会再次声明标记

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