다른 이미지가 임의의 순서로 추가되는 영역이있는 이미지

일부 모양의 오브젝트 (아래 예)가있는 배경 이미지가 있습니다. 새로운 이미지를 추가하고 싶습니다. 레이어 (위치가있는 간단한 div : 절대 왼쪽/위쪽)를이 이미지와 원하는 모양에만 추가하고 싶습니다. 다른 이미지가 임의의 순서로 추가되는 영역이있는 이미지

first sample

그리고 PHP 코드는이 형상과 다른 장소 (.. 실시 예 10, 50)의 이미지를 추가로 다음 :

second example

에서 수행이 가능 PHP/JS/jquery/...와 간단한 방법? 얼마나 많은 항목을 전달해야하며 그 영역에 많은 이미지가 추가되어야합니다 ...

출처

2012-12-14 Mark Frost

PHP 실행을 서버에. JavaScript는 클라이언트에서 실행됩니다. 네가 네가 정말로 묻고있는 걸 이해할 것 같지 않아. 더 구체적으로 말하십시오. –

완료 여부는 중요하지 않으며 클라이언트 또는 서버 측에서 수행 할 수 있습니다. 둘 다 괜찮을거야. 서면으로, 나는 그림에 불타 질 레이어가 필요 없지만 절대 위치를 가진 div로 추가됩니다. 내가 볼 수있는 것만 큼 유효한 X/Y 위치를 얻음으로써 만 수행 할 수 있지만 얻을 수있는 가장 큰 문제입니다. 어쩌면 내가 이미지를 업로드 한 다음 도형을 그릴 수있는 도구가 있습니까? 스크립트가 선택한 영역의 모든 X/Y 값을 계산합니까? 그것은 매우 유용 할 것입니다. –

다음은 내 대답을 완전히 다시 작성한 것입니다. 게 멋진 때문에,

내가 시작 사진 같은 게와 함께 가기로 결정 : 임의의 사진을 감안할 때

, 일부 color가 일치하는 경우에만 많은 작은 사진을 맞게

Crab

그림에서 파란색 부분에 빨간 점만 추가하고 싶습니다.

Red dots

이를 위해, 나는 3 절에 내 대답을 분할합니다 :

HTML

을 나는 아주 간단한 HTML 파일을 시작합니다

<html> 
    <head> 
     <title>Crab Example</title> 
    </head> 
    <body> 
     <div> 
      <h1>Dots on the crab example</h1> 
     </div> 
     <div id="crabSection"> 
      <img src="crab.png"> 
     </div> 
    </body> 
</html>

이 우리에게 출발점을 제공합니다 점선 게를 그리기 위해서!

지금, PHP, 나는 열 PHP 모두 내 crab.png 내 dot.png 콘텐츠를 분석하고, dot.png가 all blue 섹션에 들어갈 수있는 임의의 위치를 찾습니다.오른쪽 <img src="crab.png"> 후, 나는 다음에 삽입 :

<?php 
     $crab = imagecreatefrompng("crab.png"); 
     $dot = imagecreatefrompng("dot.png"); 

     $numDesiredDots = 10; 
     $numCreatedDots = 0; 

     $crabWidth = imagesx($crab); 
     $crabHeight = imagesy($crab); 

     $dotWidth = imagesx($dot); 
     $dotHeight = imagesy($dot); 

     $spawnableWidth = $crabWidth - $dotWidth; 
     $spawnableHeight = $crabHeight - $dotHeight; 

     srand(time()); 

     $testingForDotSubpart = imagecreatetruecolor($dotWidth, $dotHeight); 

     $validCoordinates = array(); 
     $invalidCoordinates = array(); 

     $colorWereLookingFor = 0xFF; // ARGB - our crab is blue

여기

, 몇 가지 세부 사항 :

$numDesiredDots 10으로 하드 코딩되어 있지만, 쉽게 매개 변수가 될 수있다!
$spawnableWidth 및 $spawnableHeight는 dot 단순히 난을 테스트하기 위해 사용됩니다 작은 이미지는 다른 임의마다
$testingForDotSubpart을하는 데 사용되는 그림
srand(time());의 외출없이 배치 할 수 있습니다 좌표 가장 큰 대표 지정된 색상의 픽셀 만 포함되어 있는지 확인하기 위해 주어진 좌표입니다. red을 원한다면 제 게가 파란색이므로 blue으로 설정되고 과 같아야합니다. blue으로 설정되어 있습니다. 현재으로 설정되어 있습니다. 이 예제에서는 HTML과 이미지 처리에 동일한 PNG를 사용했지만 이미지 처리를위한 마스크를 만들고 HTML에 대한 풀 컬러 이미지를 쉽게 만들 수있었습니다. 우리만큼
- 우리는 반복 : 다시
```
 while($numCreatedDots < $numDesiredDots) 
     { 
      $randomX = rand() % $spawnableWidth; 
      $randomY = rand() % $spawnableHeight; 

      imagecopy($testingForDotSubpart, $crab, 0, 0, $randomX, $randomY, $dotWidth, $dotHeight); 
      $valid = true; 
      for($x = 0; $x < $dotWidth; $x++) 
      { 
       for($y = 0; $y < $dotHeight; $y++) 
       { 
        if(imagecolorat($testingForDotSubpart, $x, $y) != $colorWereLookingFor) 
        { 
         $valid = false; 
         break 2; 
        } 
       } 
      } 

      if($valid) 
      { 
       array_push($validCoordinates, array('x' => $randomX, 'y' => $randomY)); 
       $numCreatedDots++; 
      } 
      else 
      { 
       // you can get rid of this else, it's just to show you how many fails there are 
       array_push($invalidCoordinates, array('x' => $randomX, 'y' => $randomY)); 
      } 
     } 
```
  몇 가지 설명 :
이제, 우리는 다음과 같은 PHP로 수행 될 때마다 점, 유효 좌표를 생성해야 우리가 원하는 모든 점들을 만들지는 못했고, 매우 복잡한 이미지의 경우 너무 많은 시간이 걸릴 수 있습니다. 최대 시도 횟수를 더할 수 있습니다.
X,Y 코디네이트
윈도우가 유효한 경우의 있는지 확인하기 위해 우리는이 창 내에서 모든 픽셀을 테스트
을 끝낼 수있는 작은 창을 복사 먹었다, 우리는에 좌표를 추가 디버깅을 위해 배열
, 나는 많은 시도가 실패하는 방법을 보여 위해 $invalidCoordinates 배열을 추가 - 더 복잡한 그림을, 더 많은 우리가 우리의 모든 위치를 계산 했으므로

가있을 것입니다 실패, 우리는 필요 리소스 정리 :

 imagedestroy($testingForDotSubpart); 
     imagedestroy($dot); 
     imagedestroy($crab);

마지막으로 제거 할 수있는 디버그 출력을 추가했지만 크랩에 점을 출력해야합니다. 여기

 echo "<p>Valid Coords: <br>"; 

     foreach($validCoordinates as $coord) 
     { 
      echo "X: " . $coord['x'] . " Y: " . $coord['y'] . "<br>\n"; 
     } 

     echo "<br>Invalid Coords " . count($invalidCoordinates) . "</p>\n"; 

     // Now add the dots on the crab! 
     for($i = 0; $i < count($validCoordinates); $i++) 
     { 
      $coord = $validCoordinates[$i]; 
      echo "<div class='dot' style='left:".$coord['x'].";top:".$coord['y'].";'><a href='javascript:alert(".$i.");'><img src='dot.png'></a></div>\n"; 
     }   
?>

, 내가 styleleft 및 top이 점에 대한 정확한 픽셀 위치를 제공하기 위해 사용하고 각 점은 독특한 있음을 보여주기 위해, 나는 도트 인덱스를 표시하는 JavaScriptalert를 부착. 이들을 부모 그림과 정확히 일치 시키려면 다음 절에서 설명하는대로 position:relative;과 position:absolute;을 사용해야합니다.당신이 볼 수 있듯이, 나는 div에 대한 클래스를 사용하고

CSS

, 이것은 relative positioning을 활용하는 것입니다. 나는 주어진 스크립트의 실행이 여기에

결과

 #crabSection { position:relative; } 
     .dot { margin: 0px 0px 0px 0px; position:absolute; }

있어 다음, 바로 제목 후, 파일의 맨 위에 추가 ... 당신은 쉽게 HTML은 돈 때문에 발생 절약 할 수 'T는 매번 위치를 다시 계산해야합니다 :

희망이 도움이!

편집 : 여기에 전체 코드는, 당신이 그것을 필요로하는 경우 : pastebin

편집 2 : 당신은 사각형 $randomX, $randomY에 의해 정의 된 것을 확인 할 수 있습니다, 더 중복 검사가 없음을 유의 $randomX + $dotWidth 및 $randomY + $dotHeight은 $validCoordinates의 좌표에서 기존의 사각형과 겹치지 않습니다.

편집 3 : 일단 당신이 단순히 HTML 그래서 재생 아니에요 매번에 div를 페이지의 소스를 열고 복사 할 수 있습니다 생성. 또한
<div class='dot' style='left:100;top:105;'><a href='javascript:alert(0);'><img src='dot.png'></a></div> <div class='dot' style='left:150;top:151;'><a href='javascript:alert(1);'><img src='dot.png'></a></div> <div class='dot' style='left:128;top:73;'><a href='javascript:alert(2);'><img src='dot.png'></a></div> <div class='dot' style='left:144;top:93;'><a href='javascript:alert(3);'><img src='dot.png'></a></div> <div class='dot' style='left:164;top:91;'><a href='javascript:alert(4);'><img src='dot.png'></a></div> <div class='dot' style='left:108;top:107;'><a href='javascript:alert(5);'><img src='dot.png'></a></div> <div class='dot' style='left:22;top:101;'><a href='javascript:alert(6);'><img src='dot.png'></a></div> <div class='dot' style='left:54;top:151;'><a href='javascript:alert(7);'><img src='dot.png'></a></div> <div class='dot' style='left:32;top:121;'><a href='javascript:alert(8);'><img src='dot.png'></a></div> <div class='dot' style='left:142;top:87;'><a href='javascript:alert(9);'><img src='dot.png'></a></div>

, 같은 당신이 화려한 게를 원한다면 PHP에서 연 $crab 사진 설명 색 마스크, 당신은 뭔가에 img src을 변경할 수있다. 나는 지금 내 img에서 사용하는 crabc.png 파일을 추가했지만 여전히 crab.png 파일과 같은 윤곽이 : 마지막 모습을 제공

이

:

출처

2012-12-14 15:31:57 emartel

작성된대로 상대 위치로 div를 추가하고 싶지만 문제는 유효한 X/Y 위치를 얻는 중입니다. 어쩌면 내가 이미지를 업로드하고 도형을 그릴 수있는 도구가 있습니까? 그리고 스크립트가 선택된 영역의 모든 X/Y 값을 계산합니까? 그것은 매우 유용 할 것입니다. http://www.mobilefish.com/services/record_mouse_coordinates/record_mouse_coordinates.php와 같은 무언가가 있지만 선택된 지역의 모든 직위가 아닌 특정 지점의 위치 만 표시됩니다 ... –

나는 당신을 위해 뭔가를 쓰고 있습니다. – emartel

를 찾으세요. 미안하지만 작성하는 데 꽤 시간이 걸렸습니다. – emartel

흠, svg에서 모양이 만들어지지 않는 한 모양에 맞게 추가 할 수 있을지 모르겠습니다.

이미지에 div가있을 수 있습니다. 반대쪽 화살표는 이미지가 흰색이고 화살표가 잘리고 div의 bgcolor가있는 이미지입니다.

그러면 같은 div에 점을 추가하고 z- 색인을 화살표 이미지보다 낮게 설정할 수 있습니다.

다음 점만 화살표에 나타납니다. 일부는 추가되지만 표시되지 않을 수 있습니다 (사용자가 상호 작용해야하는 경우에만 문제가 있음).

점으로 정확히 무엇을하고 싶습니까?

출처

2012-12-14 15:18:30

예, 점을 표시하고 특정 영역에 링크가 표시됩니다. –

흠 어떤 경우에 당신이 SVG로 뭔가를 할 수 있는지, 아니면 도형을 행과 열로 나눌 수 있는지 살펴볼 것입니다. 그렇게하면 최대/최소 좌/상을 설정할 수 있습니다. 나는 그것을 할 수있는 또 다른 방법을 생각할 수 없다. 나는 확실히 jQuery tho를 사용할 것이다. –

어쩌면 내가 이미지를 업로드하고 도형을 그릴 수있는 도구가 있습니까? 스크립트가 선택한 영역의 모든 X/Y 값을 계산합니까? 그것은 매우 유용 할 것입니다. –

다른 이미지가 임의의 순서로 추가되는 영역이있는 이미지

답변

관련 문제