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 배경으로 이미지

답변

관련 문제