KineticJS Group

Я делаю интерактивную карту мира в 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?


dictionary html kineticjs
person pmimms    schedule 24.05.2013    source источник

Ответы (2)


arrow_upward
3
arrow_downward

У вас почти есть это!

Когда вы обрабатываете события мыши, установите заливку как для Австралии, так и для Новой Зеландии, а не для группы.

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>
person markE    schedule 24.05.2013
comment
Я заметил, что некоторые примеры кинетических скриптов больше не работают. Я пытался запустить этот Fiddle в Chrome34 и Firefox29.1, и он жалуется на функцию заполнения. По иронии судьбы, это проблема, которую я пришел сюда решить. - person zeristor; 13.05.2014
comment
Да, KineticJS часто вносит критические изменения в новые версии - слишком часто, ИМХО. В последних версиях .setFill(красный) стал .fill(красный); Многие, но не все, команды .set удалили часть .set. - person markE; 13.05.2014

arrow_upward
0
arrow_downward

Этот учебник должен помочь вам реализовать кинетические группы.

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

person Xavier Haennig    schedule 24.05.2013