【问题标题】:Is it possible to increase scale of map but still can be hovered efficiently? [Using PHP GD]是否可以增加地图的比例但仍然可以有效地悬停? [使用 PHP GD]
【发布时间】:2011-05-10 08:04:55
【问题描述】:

我向你们简要介绍一下我的项目。我正在开发一个 Web 应用程序,它是 一个仓库管理系统。基本上,我使用 PHP GD 来绘制工厂布局图的图像,其中包含每层楼的货架和托盘。
当您将鼠标悬停在货架或托盘上时,您将能够看到它的详细信息。

因为使用GD,为了能够绘制每个货架或托盘,它需要一个特定的x和y坐标,以及它的宽度和高度。我使用标签创建区域,以便它可以使用 jquery 进行悬停。

我被要求制作具有给定比例的比例图像,但我不知道该怎么做。所以我想你们可以帮帮我。

在这方面真的需要帮助。

这是我的代码的一些示例

while($row = mysql_fetch_array($RecordsetZone)){

        $n = substr($row['name'], 4);
    $font = 2;
    $textColor = imagecolorallocate ($source,0,0,0);
    if($row['zonetype']=="Rack"){
        imagerectangle($source, $row['xcord'], $row['ycord'] , $row['width']+($row['xcord']), $row['height']+$row['ycord'], $black);
        imagefilltoborder($source, ($row['xcord'])+1, $row['ycord']+1, $black , $limegreen);
        imagestring ($source, $font, ($row['xcord'])+2, $row['ycord']+5, $n, $textColor);
    }
    elseif($row['zonetype']=="Pallet"){
        imagerectangle($source, $row['xcord'], $row['ycord'] , $row['width']+($row['xcord']), $row['height']+$row['ycord'], $black);
        imagefilltoborder($source, ($row['xcord'])+1, $row['ycord']+1, $black , $dodgerblue);
        imagestring ($source, $font, ($row['xcord'])+5, $row['ycord']+2, $n, $textColor);
    }
}

这就是我通过从数据库中获取 x、y 来绘制图像的方式

<map name="testmap" id="testmap">
  <?php $RecordsetZone = mysql_query($query, $cakewms) or die(mysql_error()); 
  while($row = mysql_fetch_array($RecordsetZone)){?>
   <area id=<?php echo '"'. $row['name']. '"';?> shape="rect" coords=<?php echo '"'. $row['xcord']. ','.$row['ycord']. 
    ',' . ($row['width']+$row['xcord']) . ',' . ($row['height']+$row['ycord']) . '"';?> href="#" alt="Sun" />
  <?php }?>
</map>

之后使用地图创建悬停区域

如果我改变了比例,我仍然可以将鼠标悬停在正确的区域吗?

【问题讨论】:

    标签: php jquery gd


    【解决方案1】:

    您可以使用特殊的 JQuery 插件ImageMapster

    它允许调整图像地图的大小,同时它们仍然保留在正确标记的活动区域中。

    因此,您需要生成一次图像映射,然后重新计算 onresize 将是此插件的任务。

    它在使用图像映射的其他情况下也很有帮助。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-12-31
      • 2019-06-06
      • 2014-02-22
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多