Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][AJAX] Rysowanie jak w paincie
Forum PHP.pl > Forum > Przedszkole
fenix.robi
25.03.2009, 20:23:32
Witam,

Chciałbym napisać cos w stylu internetowego painta opartego na ajax'ie i php, cos w ten deseń:

http://www.pixlr.com/editor/?loc=pl

tylko nie we flash'u.

1. Czy to jest możliwe.

2. Czy jest już może jakaś biblioteka ajax'a ktora oferuje obrobke grafiki etc.

3. Jeśli macie jakieś materiały, tutoriale bardziej szczegułowe pod tem temat bardzo bym był wdzieczny

PS. http://pl.lmgtfy.com/?q=ajax-image-draw & http://pl.lmgtfy.com/?q=ajax-image-editor szukałem



Na poczatek chciałem zrobić zwykłe rysowanie po utworzunym obrazku 

- tworze obrazek funkcją createimage() w php i go wyswietlam w przegladarce gdzie lewy gorny róg jest zawsze w tej samej odległości od punktu 0px; 0px przegladarki

- na obrazku sprawdzam zdarzenie onClick i jesli jest ono w obszarze obrazka to rysuje kropke funkcja imagesetpixel() we wpółrzednych myszki, i sprawdza czy wspolrzedne są rózne od poprzednich, jesli tak to rysuje nastepny pixel, oczywiśćie dziala dopóki klawisz myszy jest nacisniety.

na poczatek chciałeby cos takiego jak w tej grze: http://www.gry.jeja.pl/652,zbiorowe-rysowanie.html 

Jesli popełniłem jakiś błąd w algorytmie i jesli da się go wykonać to bedę wdzieczy za pomoc/propozycjie/rady

edit: ahh mysłem ze pisze w dziale [xml/ajax] jesli to nie sprawi problemu to prosze o przeniesienie do tego dzialu biggrin.gif
erix
25.03.2009, 21:18:09
Cytat
- na obrazku sprawdzam zdarzenie onClick i jesli jest ono w obszarze obrazka to rysuje kropke funkcja imagesetpixel() we wpółrzednych myszki, i sprawdza czy wspolrzedne są rózne od poprzednich, jesli tak to rysuje nastepny pixel, oczywiśćie dziala dopóki klawisz myszy jest nacisniety.

Raczej onmousedown/up. Z przekazaniem punktów do PHP nie byłoby problemu, gorzej chyba z wyświetlaniem po stronie klienta. I tu zostaje w zasadzie tylko <canvas />, ale to wyklucza IE z użytku. Niestety, więcej nie pozostaje nic prócz Flasha/apletu w Javie.

Cytat
edit: ahh mysłem ze pisze w dziale [xml/ajax] jesli to nie sprawi problemu to prosze o przeniesienie do tego dzialu

Twój problem, to raczej DHTML, nie AJAX. tongue.gif
fenix.robi
28.03.2009, 19:54:04
Dopiero zająłem sie tym skryptem, lecz natrafiłem na pewne trudnosci, funkcja onmousedown nie wywołuje mi funkcji rysuj, gdy dam jak w przykładach onmousedown="alert('cos tam ');" to wyswielta komunikat, a jesli chcem dac onmoisedown="rysuj();" to nic nie pokazuje, nie wiem czy mam cos przekazywac w funkcji i jakie "krzaki" dalej napisałem, a oto kod:

index.php

[PHP] pobierz, plaintext 
  1. <?php session_start(); ob_start();
  2. if (!file_exists("./grafika/obrazek.jpg"))
  3.  include("./inc/nowy.inc.php");
  4. ?>
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  6. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  7. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
  8. <head>
  9.  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  10.  <link rel="stylesheet" type="text/css" href="main.css" />
  11.  <title>::Rysowanie::</title>
  12.  <script type="text/javascript">
  13.  // <!-- <![CDATA[ 
  14.  function rysuj_start()
  15.  {
  16.      var mysz_x = event.clientX -50; //poniewaz rysunek zaczyna się od wspoóarzednych 50,50 
  17.      var mysz_y = event.clientY -50; //narazie na sztywno
  18.      window.location= './inc/rysuj.inc.php?x='mysz_x'&y='mysz_y;     
  19.  }
  20.  function rysuj_stop()
  21.  { 
  22.      window.opener.location.reload();
  23.      alert("Powinno cos powstac");
  24.   
  25.  }
  26.  function rysuj(handler, event)
  27.  { 
  28.      document.addEventListener('mousemove', rysuj_start(), true);
  29.      document.addEventListener('mouseup', rysuj_stop(), true);
  30.  }
  31.  // --> ]]>
  32.  </script>
  33. </head>
  34. <body id="body">
  35.  <div id="srodek">
  36.          <img src="./grafika/obrazek.jpg" onmousedown="rysuj();"/>
  37.  <div>
  38. </body>
  39. </html>
[PHP] pobierz, plaintext
rysuj.inc.php

[PHP] pobierz, plaintext 
  1. <?php session_start(); ob_start();
  2.  $x = $_GET['x'];
  3.  $y = $_GET['y'];
  4.  $sciezka = "../grafika/obrazek.jpg";
  5.  $img   = imagecreatefromjpeg($sciezka)
  6.  or die("Nie można otworzyc obrazka");  
  7.  $pixel  = ImageColorAllocate($img, 0,0,0); 
  8.  imagesetpixel($img,$x,$y,$pixel);
  9.  imagesetpixel($img,$x-1,$y,$pixel);
  10.  imagesetpixel($img,$x+1,$y,$pixel);
  11.  imagesetpixel($img,$x,$y-1,$pixel);
  12.  imagesetpixel($img,$x,$y+1,$pixel);
  13.  ImageJPEG($img,$sciezka, 100);
  14.  imagedestroy($img);
  15.  header("Location: ../index.php"); // questionmark.gif
  16. ?>
[PHP] pobierz, plaintext
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.