Grup KineticJS

Saya membuat peta dunia interaktif dalam HTML5. Saya menggunakan KineticJS untuk membuat poligon negara, saat ini saya memiliki Australia dan Selandia Baru. Namun saya menginginkannya sehingga jika mouse berada di atas Australia atau Selandia Baru, keduanya akan disorot. Saya tidak tahu cara menggunakan Grup di KineticJS tetapi beginilah cara saya mencobanya (saya menggunakan elips untuk titik karena ada banyak koordinat):

<!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>

Bagaimana cara saya mengimplementasikan grup di KineticJS?


dictionary html kineticjs
person pmimms    schedule 24.05.2013    source sumber

Jawaban (2)


arrow_upward
3
arrow_downward

Anda hampir memilikinya!

Saat Anda menangani peristiwa mouse, atur isiannya pada Australia dan Selandia Baru—bukan pada grup.

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");
});

Berikut ini kode dan Fiddle: 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
Saya perhatikan bahwa sejumlah contoh biola kineticjs tidak lagi berfungsi. Saya sudah mencoba menjalankan Fiddle ini di Chrome34, dan Firefox29.1 dan mengeluh tentang fungsi Isi. Ironisnya, itulah masalah yang ingin saya perbaiki di sini. - person zeristor; 13.05.2014
comment
Ya, KineticJS sering memperkenalkan perubahan yang dapat menyebabkan gangguan pada versi baru -- terlalu sering, IMHO. Dalam versi terbaru .setFill(red) menjadi .fill(red); Banyak, namun tidak semua, perintah .set telah menghapus bagian .set. - person markE; 13.05.2014

arrow_upward
0
arrow_downward

Tutorial ini akan membantu Anda menerapkan grup Kinetik.

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

person Xavier Haennig    schedule 24.05.2013