Fatal编程技术网

Javascript KineticJS图像到背景

javascript image

Javascript KineticJS图像到背景,javascript,image,background,kineticjs,Javascript,Image,Background,Kineticjs,我试图加载一个地图图像作为背景，然后在顶部添加一个网络图。我无法让地图位于网络元素后面。我试过搬家、搬家、搬家等等，但都做不好。谢谢你的帮助。我有一些php在顶部，因为一旦这个概念被证明，数据将来自数据库 <?php $AHS1x = 145; $AHS1y = 450; $AHS1status = '"lightblue"'; $AHSport1x = 200; $AHSport1y = 40; $AHSport1status = '"green"'; $AHS

我试图加载一个地图图像作为背景，然后在顶部添加一个网络图。我无法让地图位于网络元素后面。我试过搬家、搬家、搬家等等，但都做不好。谢谢你的帮助。我有一些php在顶部，因为一旦这个概念被证明，数据将来自数据库

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


身体{
边际：0px；
填充：0px；
}
var stage=新的动能.stage（{container:'container'，宽度：1200，高度：1200}）；
var staticLayer=新的dynamic.Layer（）；
var imageObj=新图像（）；
imageObj.onload=函数（）{
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=新的动能.Rect（{x:，y:，宽度：20，高度：10，填充：，笔划：“黑色”，笔划宽度：1}）；
var AHSport1=新的动力学圆（{x:，y:，半径：6，填充：，笔划：“黑色”，笔划宽度：1，可拖动：false}）；
var AHSlink1=新的动能.Line（{点：[，，]，笔划：，笔划宽度：2，lineJoin:'round'，dashArray:[3,5]}）；
var AHSport2=新的动力学圆（{x:，y:，半径：6，填充：，笔划：“黑色”，笔划宽度：1，可拖动：false}）；
var AHSlink2=新的动能.Line（{点：[，，]，笔划：，笔划宽度：2，lineJoin:'round'，dashArray:[3，5]}）；
var AHSport3=新的动力学圆（{x:，y:，半径：6，填充：，笔划：“黑色”，笔划宽度：1，可拖动：false}）；
var AHSlink3=新的动能.Line（{点：[，，]，笔划：，笔划宽度：2，lineJoin:'round'，dashArray:[3，5]}）；
var AHSport4=新的动力学圆（{x:，y:，半径：6，填充：，笔划：“黑色”，笔划宽度：1，可拖动：false}）；
var AHSlink4=新的动能.Line（{点：[，，]，笔划：，笔划宽度：2，lineJoin:'round'，dashArray:[3，5]}）；
var AHSport5=新的动力学圆（{x:，y:，半径：6，填充：，笔划：“黑色”，笔划宽度：1，可拖动：false}）；
var AHSlink5=新的动能.Line（{点：[，，]，笔划：，笔划宽度：2，lineJoin:'round'，dashArray:[3，5]}）；
var text=new dynamic.text（{x:2，y:2，text:'Static Layer'，fontSize:'30'，fontfamin:'Calibri'，fill:'black'}）；
staticLayer.add（文本）；
staticLayer.add（AHS1）；//添加上面定义的对象
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（）//把上面的链接
stage.add（静态层）；
staticLayer.draw（）；
也许只需按所需顺序添加对象，然后稍后设置地图图像：

  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';