กลุ่ม KineticJS

ฉันกำลังสร้างแผนที่โลกเชิงโต้ตอบใน HTML5 ฉันใช้ KineticJS เพื่อสร้างรูปหลายเหลี่ยมของประเทศต่างๆ ปัจจุบันฉันมีออสเตรเลียและนิวซีแลนด์ อย่างไรก็ตาม ฉันต้องการหากเลื่อนเมาส์ไปเหนือออสเตรเลียหรือนิวซีแลนด์ ทั้งสองรายการจะถูกไฮไลต์ ฉันไม่รู้วิธีใช้ Groups ใน 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
ฉันสังเกตเห็นว่าตัวอย่างซอ kineticjs จำนวนหนึ่งใช้ไม่ได้อีกต่อไป ฉันได้ลองใช้ Fiddle นี้บน Chrome34 และ Firefox29.1 แล้วและมันก็บ่นเกี่ยวกับฟังก์ชัน Fill ซึ่งน่าแปลกที่เป็นปัญหาที่ฉันมาที่นี่เพื่อแก้ไข - person zeristor; 13.05.2014
comment
ใช่ KineticJS แนะนำการเปลี่ยนแปลงที่ร้ายแรงบ่อยครั้งกับเวอร์ชันใหม่ - บ่อยเกินไป IMHO ในเวอร์ชันล่าสุด .setFill(red) ได้กลายเป็น .fill(red); คำสั่ง .set หลายคำสั่งได้ลบส่วน .set ออกแล้ว - person markE; 13.05.2014

arrow_upward
0
arrow_downward

บทช่วยสอนนี้จะช่วยคุณในการใช้งานกลุ่ม Kinetic

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

person Xavier Haennig    schedule 24.05.2013