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

Question

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

最终，我想让用户通过单击它来选择一组矩形，然后单击其他任何地方来移动它。

预先感谢。

问候，

神秘先生。

Answer 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

Answer 2

您可以使用图像映射来完成此操作。无论您如何创建图像，这都适用。基本语法（来自维基百科）是：

<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 等）。

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

Answer 3

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

看一下这个绘画应用程序的示例：
http://mugtug.com/sketchpad/

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

Answer 4

输入 type="image" 将为您提供在图像上单击的坐标，但这就是“普通”HTML 和 HTML 中的内容。服务器端 PHP。

HTML：

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

PHP：

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

要获得更多交互，您必须查看 javascript，为了获得更多可能性，我衷心推荐 Raphael 作为一个跨浏览器（IE 为 VML，其余为 SVG）工具，能够处理更复杂的图像和图像。该图像（部分）上的事件。