代码之家 › 专栏 › 技术社区 › Mister Mystère

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

gd image-processing web-applications php

1

Mister Mystère · 技术社区 · 16 年前

我知道如何用PHP(用gd)绘制矩形,但是我们如何使它们交互?我的意思是,有没有一种方法可以通知用户何时何地点击?

最后,我想允许用户通过单击集合中的一个矩形,然后单击其他任何位置来移动它来选择它。

事先谢谢。

当做,

迈斯特先生。

4 回复 | 直到 15 年前

1

2

Matthew Flaschen 16 年前

你可以用 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等)

如果只有简单的矩形,则不带地图的另一种选择是只定位几个相邻的没有边距或填充的图像。

2

3

Todd Moses 16 年前

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

3

1

GrandmasterB 16 年前

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

查看此绘画应用程序的示例: http://mugtug.com/sketchpad/

不过,这将要求您的用户拥有一个支持画布(火狐、Chrome)的浏览器,或者IE浏览器,以使用“ExplorerCanvas”。IE9一旦出现,我相信它将支持画布,这样就可以解决这个问题。

4

0

Wrikken 16 年前

输入type=“image”将为您提供单击图像时的坐标,但仅限于“plain”HTML&server-sided PHP中的坐标。

HTML:

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

PHP:

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

为了获得更多的交互,您必须查看javascript,对于更多的可能性,我衷心推荐 Raphael 作为一个跨浏览器(vml表示,即,svg表示其余)工具,它能够在该图像(部分)上处理更复杂的图像和事件。