2

我正在用 HTML5 制作交互式世界地图。我正在使用 KineticJS 创建国家的多边形，我目前有澳大利亚和新西兰。但是我想要它，所以如果鼠标在澳大利亚或新西兰上，它们都会被突出显示。我不知道如何在 KineticJS 中使用组，但这就是我尝试的方式（我使用椭圆作为点，因为有很多坐标）：

<!DOCTYPE HTML>
<html>
<head>
<style>
  body {
    margin: 0px;
    padding: 0px;
  }
  #container {
    background-image: url('world_map.png');
    width: 1026px;
    height: 540px;
  }
</style>
</head>
<body>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.2.min.js">      </script>
<script defer="defer">
  var stage = new Kinetic.Stage({
    container: 'container',
    width: 1026,
    height: 540
  });

  var layer = new Kinetic.Layer();

  var nznorth = new Kinetic.Polygon({
    points: [...],
    fill: '#ffffff',
    stroke: 'black',
    strokeWidth: 1
  });

  var nzsouth = new Kinetic.Polygon({
    points: [...],
    fill: '#ffffff',
    stroke: 'black',
    strokeWidth: 1
  });

  var ausmain = new Kinetic.Polygon({
    points: [...],
    fill: '#ffffff',
    stroke: 'black',
    strokeWidth: 1
  });

  var aus = new Kinetic.Group();
      aus.add(ausmain);
      aus.add(nznorth);
      aus.add(nzsouth);

  aus.on('mouseover', function() {
    this.setFill('blue');
    layer.draw();
  });

  aus.on('mouseout', function() {
    this.setFill('#ffffff');
    layer.draw();
  });

  layer.add(aus);
  stage.add(layer);

  </script>
  </body>
  </html>

我应该如何在 KineticJS 中实现组？

4

2 回答 2

3

你刚刚拥有它！

当您处理鼠标事件时，将填充设置在澳大利亚和新西兰，而不是在组上。

group.on("mouseover",function(){
    australia.setFill("blue");
    newzealand.setFill("blue");
    layer.draw();
    console.log("over");
});

group.on("mouseout",function(){
    australia.setFill("skyblue");
    newzealand.setFill("skyblue");
    layer.draw();
    console.log("out");
});

这是代码和小提琴：http: //jsfiddle.net/m1erickson/LXvkg/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.1.min.js"></script>

<style>
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
}
</style>        
<script>
$(function(){

        var stage = new Kinetic.Stage({
            container: 'container',
            width: 400,
            height: 400
        });
        var layer = new Kinetic.Layer();
        stage.add(layer);
        stage.draw();

        var group=new Kinetic.Group();
        layer.add(group);

              var australia = new Kinetic.Rect({
                x: 20,
                y: 20,
                width: 150,
                height: 100,
                fill: "skyblue",
                stroke: "lightgray",
                strokeWidth: 3
              });    
              group.add(australia);

              var newzealand = new Kinetic.Rect({
                x: 250,
                y: 110,
                width: 20,
                height: 50,
                fill: "skyblue",
                stroke: "lightgray",
                strokeWidth: 3
              });    
              group.add(newzealand);

              layer.draw();

        group.on("mouseover",function(){
            australia.setFill("blue");
            newzealand.setFill("blue");
            layer.draw();
            console.log("over");
        });

        group.on("mouseout",function(){
            australia.setFill("skyblue");
            newzealand.setFill("skyblue");
            layer.draw();
            console.log("out");
        });



}); // end $(function(){});

</script>       
</head>

<body>
    <div id="container"></div>
</body>
</html>
于 2013-05-24T20:38:24.757 回答
0

本教程应该可以帮助您实现动力学组。

http://www.html5canvastutorials.com/kineticjs/html5-canvas-complex-shapes-using-groups-with-kineticjs/

于 2013-05-24T20:29:37.703 回答