如何在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

您可以使用圖像貼圖進行此操作。 這適用於您創建圖像的情況。 基本語法（來自Wikipedia）是：

<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

輸入type =“ image”將為您提供在圖像上單擊的坐標，但是在“普通” 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）工具，能夠在（部分）上提供更復雜的圖像和事件。該圖像。