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

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

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

请事先说明。

Regards，

Mystère先生。

2010-09-14 Mister Mystère

您可以用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网址，也可以使用JavaScript事件。支持所有典型的鼠标事件（onclick，onmouseover，onmouseout，onmousedown，onmouseup等）

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

来源

2010-09-14 18:15:11

请问你明确吗？ – 2010-09-14 18:17:38

好的谢谢，更明确:)所以，我应该在哪里放置“onclick =”，作为区域的属性？猜猜是这样，不是吗？ – 2010-09-14 18:27:57

但是，为每个可能的像素单击创建一个矩形将是一个痛苦:)。如果您需要每像素差异，您甚至可以放弃使用JavaScript的图像地图并只捕获x/y坐标。 – Wrikken 2010-09-14 18:31:12

输入类型=“图像”会给你点击图像上的坐标，但这是关于它在'纯'HTML &服务器端PHP。

HTML：

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

PHP：

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

进行更多的互动，你将不得不看的JavaScript，以及更多的可能性我衷心建议Raphael作为一个跨浏览器（ VML for IE，SVG for rest）工具能够处理更复杂的图像&事件（部分）该图像。

来源

2010-09-14 18:15:53 Wrikken

谢谢。我怎样才能得到这些坐标？ P.S：我会同时尝试Raphael。 – 2010-09-14 18:18:46

在答案中编辑输入类型=图像中的裸体要素。 – Wrikken 2010-09-14 18:29:46

在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

来源

2010-09-14 18:18:55

感谢您的选择，我更喜欢Matthew Flaschen的图像映射解决方案，但我始终牢记在心。 – 2010-09-14 18:29:56

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

看看这幅画的应用为例： http://mugtug.com/sketchpad/

这种意志，不过，需要用户具有支持画布（火狐，Chrome），或IE浏览器，使用类似“ explorercanvas”。 IE9出现时会支持我相信的画布，所以应该消除这个问题。

来源

2010-09-14 18:35:48 GrandmasterB

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

回答

相关问题