Question

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

最后，我想让用户通过点击它来选择一个矩形，然后点击其他地方移动它。

先谢谢。

此致

Mystère先生。

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

您可以使用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等）

如果您只有简单的矩形，那么没有贴图的替代方法就是连续放置多个图像，没有边距或填充。

Answer 3

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

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

但是，这将要求您的用户拥有支持Canvas（firefox，chrome）或IE的浏览器，以使用“explorercanvas”之类的东西。 IE9出来的时候会支持我相信的画布，所以应该删除那个问题。

Answer 4

输入类型=“图像”将为您提供点击图像的坐标，但这是关于它的“普通”HTML＆amp;服务器端PHP。

HTML：

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

PHP：

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

要获得更多互动，您必须查看javascript，并且为了更多的可能性，我衷心地推荐Raphael作为跨浏览器（用于IE的VML，用于其余的SVG）工具，能够处理更复杂的图像＆安培; （图像的一部分）上的事件。

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

4 个答案: