KineticJS图像到背景

KineticJS Image to background

本文关键字：背景图像 KineticJS 更新时间：2023-09-26

我正在尝试加载一个地图图像作为背景，然后在顶部添加一个网络图。我无法将地图放在网络元素后面。我试过移动到底部等，但我做不好。感谢您的帮助。我在顶部有一些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>

也许只需按照您想要的顺序添加对象，然后稍后设置地图图像：

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