KineticJS圖像到背景

我想加載一張地圖的圖像作爲背景，然後在頂部添加一個網絡圖。我無法將地圖置於網絡元素之後。我已經嘗試moveToBottom等，但我不能正確的。任何幫助讚賞。一旦概念被證明，數據將來自數據庫，我在頂部有一些php。KineticJS圖像到背景

<?php 
$AHS1x = 145; $AHS1y = 450;  $AHS1status = '"lightblue"'; 
$AHSport1x = 200; $AHSport1y = 40; $AHSport1status = '"green"'; 
$AHSport2x = 500; $AHSport2y = 540; $AHSport2status = '"black"'; 
$AHSport3x = 600; $AHSport3y = 479; $AHSport3status = '"red"'; 
$AHSport4x = 700; $AHSport4y = 760; $AHSport4status = '"pink"'; 
$AHSport5x = 20; $AHSport5y = 600; $AHSport5status = '"blue"'; 
?> 
<!DOCTYPE HTML> 
<html> 
    <head> 
    <style> 
     body { 
     margin: 0px; 
     padding: 0px; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="container"> </div>  
    <script src="kinetic-v4.7.4.js"></script> 

    <script> 
     var stage = new Kinetic.Stage({ container: 'container', width: 1200, height: 1200 }); 
     var staticLayer = new Kinetic.Layer(); 

     var imageObj = new Image(); 
     imageObj.onload = function() { 
     var map = new Kinetic.Image({x: 0, y: 0, image: imageObj, width: 200, height: 200, draggable: true }); 
     map.moveToBottom(); 
     staticLayer.add(map); 
     staticLayer.draw(); 
      }; 
imageObj.src = 'england-large.png'; 


     var AHS1 = new Kinetic.Rect   ({ x: <? echo $AHS1x; ?>, y: <? echo $AHS1y; ?>, width: 20, height: 10, fill: <? echo $AHS1status; ?>, stroke: 'black', strokeWidth: 1 }); 

     var AHSport1 = new Kinetic.Circle  ({ x: <? echo $AHSport1x; ?>, y: <? echo $AHSport1y; ?>, radius: 6, fill: <? echo $AHSport1status; ?>, stroke: 'black', strokeWidth: 1, draggable: false }); 
     var AHSlink1 = new Kinetic.Line  ({ points: [<? echo $AHSport1x; ?>, <? echo $AHSport1y; ?>, <? echo $AHS1x +10 ; ?>, <? echo $AHS1y +5; ?>], stroke: <? echo $AHSport1status; ?>, strokeWidth: 2, lineJoin: 'round', dashArray: [3, 5] }); 

     var AHSport2 = new Kinetic.Circle  ({ x: <? echo $AHSport2x; ?>, y: <? echo $AHSport2y; ?>, radius: 6, fill: <? echo $AHSport2status; ?>, stroke: 'black', strokeWidth: 1, draggable: false }); 
     var AHSlink2 = new Kinetic.Line  ({ points: [<? echo $AHSport2x; ?>, <? echo $AHSport2y; ?>, <? echo $AHS1x +10 ; ?>, <? echo $AHS1y +5; ?>], stroke: <? echo $AHSport2status; ?>, strokeWidth: 2, lineJoin: 'round', dashArray: [3, 5] }); 

     var AHSport3 = new Kinetic.Circle  ({ x: <? echo $AHSport3x; ?>, y: <? echo $AHSport3y; ?>, radius: 6, fill: <? echo $AHSport3status; ?>, stroke: 'black', strokeWidth: 1, draggable: false }); 
     var AHSlink3 = new Kinetic.Line  ({ points: [<? echo $AHSport3x; ?>, <? echo $AHSport3y; ?>, <? echo $AHS1x +10 ; ?>, <? echo $AHS1y +5; ?>], stroke: <? echo $AHSport3status; ?>, strokeWidth: 2, lineJoin: 'round', dashArray: [3, 5] }); 

     var AHSport4 = new Kinetic.Circle  ({ x: <? echo $AHSport4x; ?>, y: <? echo $AHSport4y; ?>, radius: 6, fill: <? echo $AHSport4status; ?>, stroke: 'black', strokeWidth: 1, draggable: false }); 
     var AHSlink4 = new Kinetic.Line  ({ points: [<? echo $AHSport4x; ?>, <? echo $AHSport4y; ?>, <? echo $AHS1x +10 ; ?>, <? echo $AHS1y +5; ?>], stroke: <? echo $AHSport4status; ?>, strokeWidth: 2, lineJoin: 'round', dashArray: [3, 5] }); 

     var AHSport5 = new Kinetic.Circle  ({ x: <? echo $AHSport5x; ?>, y: <? echo $AHSport5y; ?>, radius: 6, fill: <? echo $AHSport5status; ?>, stroke: 'black', strokeWidth: 1, draggable: false }); 
     var AHSlink5 = new Kinetic.Line  ({ points: [<? echo $AHSport5x; ?>, <? echo $AHSport5y; ?>, <? echo $AHS1x +10 ; ?>, <? echo $AHS1y +5; ?>], stroke: <? echo $AHSport5status; ?>, strokeWidth: 2, lineJoin: 'round', dashArray: [3, 5] }); 

     var text = new Kinetic.Text({ x: 2, y: 2, text: 'Static Layer', fontSize: '30', fontFamily: 'Calibri', fill: 'black' }); 
     staticLayer.add(text); 

     staticLayer.add(AHS1);   // add objects defined above 
     staticLayer.add(AHSport1);   
     staticLayer.add(AHSlink1); 
     staticLayer.add(AHSport2);   
     staticLayer.add(AHSlink2); 
     staticLayer.add(AHSport3);   
     staticLayer.add(AHSlink3); 
     staticLayer.add(AHSport4);   
     staticLayer.add(AHSlink4); 
     staticLayer.add(AHSport5);   
     staticLayer.add(AHSlink5); 

     AHS1.moveToTop();    //put above links 
     stage.add(staticLayer);  
     staticLayer.draw(); 

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

來源

2013-12-16 user3106929

也許只是在你需要的順序添加對象再後來設定的地圖圖像：

var map = new Kinetic.Image({x: 0, y: 0, width: 200, height: 200, draggable: true }); 

    var AHS1 = new Kinetic.Rect ... 

    ... 

    staticLayer.add(map); 
    staticLayer.add(AHS1);   // add objects defined above 
    staticLayer.add(AHSport1);   
    staticLayer.add(AHSlink1); 

    ... 

    var imageObj = new Image(); 
    imageObj.onload = function() { 
     map.setImage(imageObj); 
     staticLayer.draw(); 
    }; 
    imageObj.src = 'england-large.png';

來源

2013-12-16 17:26:15 markE

KineticJS圖像到背景

回答

相關問題