如何在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中繪製交互式圖像？

回答

相關問題