如何在 PHP 中绘制交互式图像？答案

【问题标题】：How to draw an interactive image in PHP?如何在 PHP 中绘制交互式图像？
【发布时间】：2010-09-14 18:09:33
【问题描述】：

我知道如何在 PHP（使用 GD）中绘制矩形，但是我们如何使它们具有交互性呢？我的意思是，有没有办法在用户点击的时间和地点得到通知？

最后，我希望用户能够通过单击在一组矩形中选择一个矩形，然后单击其他任何位置来移动它。

先谢谢了。

问候，

神秘先生。

【问题讨论】：

标签： php web-applications image-processing gd

【解决方案1】：

GD 中的矩形是如下图所示的图像：

// Create a 55x30 image
$im = imagecreatetruecolor(55, 30);
$white = imagecolorallocate($im, 255, 255, 255);

// Draw a white rectangle
imagefilledrectangle($im, 4, 4, 50, 25, $white);

// Save the image
imagepng($im, 'imagefilledrectangle.png');
imagedestroy($im);

要使其具有交互性，您可以使用 CSS，例如将图像作为锚标记的背景：

<a href="#" id="myRectangle"></a>

然后在 CSS 中（假设 2 张图片）：

a#myRectangle{
  background-image: url(imagefilledrectangle1.png);
}

a#myRectangle:hover{
 background-image: url(imagefilledrectangle2.png);
}

您可以使用 CSS 做更多事情或查看 http://jquery.com/ 以使用 JavaScript

【讨论】：

感谢您的选择，我更喜欢 Matthew Flaschen 的图像地图解决方案，但我牢记在心。

【解决方案2】：

您可以使用image maps 执行此操作。无论您创建图像，这都适用。基本语法（来自维基百科）是：

<img src="bild.jpg" alt="alternative text" usemap="#mapname" />
<map name="mapname">
  <area shape="rect" coords="9,372,66,397" href="http://en.wikipedia.org/" />
</map>

您可以拥有任意数量的area 元素。您可以使用如上所示的常规 href URL，也可以使用 JavaScript 事件。支持所有典型的鼠标事件（onclick、onmouseover、onmouseout、onmousedown、onmouseup 等）

如果您只有简单的矩形，则没有地图的替代方法是仅将多个图像连续放置，没有边距或填充。

【讨论】：

好的，谢谢，更明确:) 那么，我应该把“onclick=”作为 area 的属性放在哪里？猜对了，不是吗？
但是，为每个可能点击的像素创建一个矩形会很痛苦:)。如果您需要逐像素差异，您甚至可以放弃图像映射，而只使用 javascript 完全捕获 x/y 坐标。
@Mister，是的，事件发生在area 元素上；另见W3School explanation。 @Wrikken，我的理解是我们正在处理一组中的几个矩形，而不是单个像素。
@Matthew: 可能是，在这种情况下你的答案是正确的。问题是：“在其他任何地方单击以移动它”是多么完美的像素。
好问题 Wrikken，但在这种情况下，单击其他任何地方都会选择另一个矩形（相同大小）来替换。所以我采用了这个解决方案，我会尝试为每个矩形自动生成一个区域，让你保持联系。谢谢大家:)

【解决方案3】：

对于您所描述的内容，您可以考虑改用 HTML5 画布功能。也就是说，不是在 PHP 中使用 GD 创建静态图像，而是在浏览器中使用 Javascript 动态创建图像。然后，您可以提供全方位的交互性并对鼠标移动、点击做出反应。

以这个绘画应用为例： http://mugtug.com/sketchpad/

不过，这将要求您的用户拥有支持 Canvas（firefox、chrome）的浏览器，或者对于 IE，使用类似“explorercanvas”的浏览器。我相信 IE9 出来时会支持画布，所以应该可以解决这个问题。

【讨论】：

【解决方案4】：

输入 type="image" 将为您提供单击图像的坐标，但在“普通”HTML 和服务器端 PHP 中仅此而已。

HTML：

<input type="image" name="myimage" src="whatever.png">

PHP：

$x = $_POST['myimage_x'];
$y = $_POST['myimage_y'];

要进行更多交互，您必须查看 javascript，并且要获得更多可能性，我衷心推荐 Raphael 作为跨浏览器（用于 I.E 的 VML，其余为 SVG）工具，能够处理更复杂的图像和事件在该图像的（部分）上。

【讨论】：

谢谢。我怎样才能得到这些坐标？ P.S：我会同时尝试 Raphael。
编辑了答案中 input type=image 中的基本要素。