Page 1 of 1
Draw a Line by Mouse Click on Map(Image)
Posted: Mon Nov 01, 2010 1:11 pm
by Behseini
Hi Guys!
I just wonder if it is possible to draw a line by mouse click on an image and calculate the distance between two clicked points.I know how to calculate the distance but I like to know can PHP support a function like other programming languages to draw on image as well?
I know we can hard copy to draw line and shape in PHP by GD but how about mouse event handling?!
Thanks
Re: Draw a Line by Mouse Click on Map(Image)
Posted: Mon Nov 01, 2010 1:41 pm
by Jonah Bron
Not in real time. If you want the user to be able to draw a line right there on the spot, you need Javascript and probably the <canvas> tag.
You might want to read this:
http://en.wikipedia.org/wiki/Server-side_scripting
And this:
http://en.wikipedia.org/wiki/Client-side_scripting
PHP is meant to be used as a server-side scripting language.
Re: Draw a Line by Mouse Click on Map(Image)
Posted: Sat Nov 06, 2010 5:57 pm
by McInfo
Here are the basics.
form.php
Code: Select all
<form method="post" action="">
<input type="image" src="png.php" name="img" />
</form>
<pre><?php
print_r($_POST);
/*
Array
(
[img_x] => 20
[img_y] => 10
)
*/
?></pre>
png.php
Code: Select all
<?php
header('Content-Type: image/png');
$image = imagecreatetruecolor(300, 200);
$color = imagecolorallocate($image, 255, 255, 255);
imageline($image, 0, 0, 20, 10, $color);
imagepng($image);
imagedestroy($image);
Save these files to your server and run form.php in your browser. Notice how $_POST changes as you click different places on the image. Also notice that the image that appears in form.php is generated by another PHP script (png.php).
To allow the user to interact with the image, capture the user-submitted points in form.php and store them in $_SESSION or a database. In png.php, retrieve the points and use them to draw lines on the image.
If you want to modify an existing image, the image file needs to exist in a location that is accessible to the PHP server. Create an image resource from the file using the appropriate imagecreatefrom*() function.