기울기에 따른 imageftbbox 결과값에 대한 비교


대단할것은 없는 강좌이지만,
제 강좌를 출처를 밝히고 외부로 퍼가는 것은 허용하지만,
다른 강좌의 자료나 책의 자료로 사용되거나 부분적인 인용은 허용하지 않습니다.

강좌는 php 5. 대를 기준으로 하며, 이미지 관련을 다룹니다.
이미지에 글을 쓰거나 이미지를 합치거나 하는 등의 내용을 다루어 볼까 합니다.
나중에는 간단한 짤방 만들기 같은 것도 할수 있지 않을까 싶습니다.

이미지관련 > 기울기에 따른 imageftbbox 결과값에 대한 비교 

 

원래는 이번 내용에서 문자열의 정렬에 대해서 다룰 예정이었습니다.

그러나,
imageftbbox 결과값이 기울기가 있을때 정확하지 않는 부분이 있어서
그것들을 눈으로 보여주고, 앞으로의 내용은 기울기가 없는 상태에서만 다루기 위해서
이번 내용을 다루어 보았습니다.

아래의 예제를 먼저 확인하시기 바랍니다.

 

예제3 > study3.php

 

<?php

header("Content-Type: text/html; charset=UTF-8");



$font_file = './Daum_Regular.ttf';
$font_size = 40;
$string = 'FaggM';
$angles = Array(0, 45, 90, 135, 180, 225, 270, 315, -45, -90, -135, -180, -225, -270, -315);



//그래프를 그리기 위한 용도
$graph_size = 200;
$graph_font_size = 10;



foreach($angles as $k => $angle){

    //그래프용
    $im = imagecreatetruecolor($graph_size * 2, $graph_size * 2);
    $red = imagecolorallocate($im, 0xFF, 0x00, 0x00);
    $blue = imagecolorallocate($im, 0x00, 0x80, 0xFF);
    $white = imagecolorallocate($im, 0xFF, 0xFF, 0xFF);
    $black = imagecolorallocate($im, 0x00, 0x00, 0x00);

    imagefilledrectangle($im, 0, 0, ($graph_size * 2) - 1, ($graph_size * 2) - 1, $white);
    imageline ( $im , $graph_size , 0 , $graph_size, ($graph_size * 2) - 1 , $blue);//세로선
    imageline ( $im , 0 , $graph_size , ($graph_size * 2) - 1, $graph_size , $blue);//가로선

    imagefttext($im, $graph_font_size, 0, 185, 220, $black, $font_file, '0');
    imagefttext($im, $graph_font_size, 0, 135, 20, $black, $font_file, 'Y축 음수');
    imagefttext($im, $graph_font_size, 0, 135, 390, $black, $font_file, 'Y축 양수');
    imagefttext($im, $graph_font_size, 0, 10, 220, $black, $font_file, 'X축 음수');
    imagefttext($im, $graph_font_size, 0, 340, 220, $black, $font_file, 'X축 양수');



    echo "<strong>기울기가 {$angle}도 일때</strong><br><br>" . PHP_EOL;

    $array = imageftbbox ( $font_size, $angle, $font_file, $string );

    print_r($array);
    echo "<br><br>" . PHP_EOL;

    // $graph_size 을 더한것은 그래프상에서 보여주기 위해서
    imageline ( $im , $array[0] + $graph_size , $array[1] + $graph_size , $array[2] + $graph_size, $array[3] + $graph_size , $blue);
    imageline ( $im , $array[2] + $graph_size , $array[3] + $graph_size , $array[4] + $graph_size, $array[5] + $graph_size , $blue);
    imageline ( $im , $array[4] + $graph_size , $array[5] + $graph_size , $array[6] + $graph_size, $array[7] + $graph_size , $blue);
    imageline ( $im , $array[6] + $graph_size , $array[7] + $graph_size , $array[0] + $graph_size, $array[1] + $graph_size , $blue);

    $x_min = min($array[0], $array[2], $array[4], $array[6]) * -1;
    $y_min = min($array[1], $array[3], $array[5], $array[7]) * -1; 

    //전부 양수가 되도록 오른쪽, 하단으로 밀어내림
    imageline ( $im , $array[0] + $x_min + $graph_size , $array[1] + $y_min + $graph_size , $array[2] + $x_min + $graph_size, $array[3] + $y_min + $graph_size , $black);
    imageline ( $im , $array[2] + $x_min + $graph_size , $array[3] + $y_min + $graph_size , $array[4] + $x_min + $graph_size, $array[5] + $y_min + $graph_size , $black);
    imageline ( $im , $array[4] + $x_min + $graph_size , $array[5] + $y_min + $graph_size , $array[6] + $x_min + $graph_size, $array[7] + $y_min + $graph_size , $black);
    imageline ( $im , $array[6] + $x_min + $graph_size , $array[7] + $y_min + $graph_size , $array[0] + $x_min + $graph_size, $array[1] + $y_min + $graph_size , $black);

    imagefttext($im, $font_size, $angle, $array[0] + $x_min + $graph_size, $array[1] + $y_min + $graph_size, $red, $font_file, $string);

    imagepng($im, 'temp/study3_' . ($k + 1) . '.png');
    imagedestroy($im);

    ?>

    <br>
    <img src='temp/study3_<?=($k + 1)?>.png?<?=time()?>'>
    <br><br>

    <?
}

?>

 

※ 예제를 확인 하실때 temp 디렉토리를 생성하시고 퍼미션을 777 로 주시기 바랍니다.

 

사실 이예제만 가지고도 앞으로 구현 할수 있는 부분들에 대한 많은 가능성을 제시합니다.

 


$angles = Array(0, 45, 90, 135, 180, 225, 270, 315, -45, -90, -135, -180, -225, -270, -315);

 

이것은 기울기에 따라 각각 상황을 보여주기 위해 기울기를 미리 배열로 지정해 놓을 것입니다.

 

$graph_size = 200;
$graph_font_size = 10;

 

$im = imagecreatetruecolor($graph_size * 2, $graph_size * 2);
$red = imagecolorallocate($im, 0xFF, 0x00, 0x00);
$blue = imagecolorallocate($im, 0x00, 0x80, 0xFF);
$white = imagecolorallocate($im, 0xFF, 0xFF, 0xFF);
$black = imagecolorallocate($im, 0x00, 0x00, 0x00);

imagefilledrectangle($im, 0, 0, ($graph_size * 2) - 1, ($graph_size * 2) - 1, $white);
imageline ( $im , $graph_size , 0 , $graph_size, ($graph_size * 2) - 1 , $blue);//세로선
imageline ( $im , 0 , $graph_size , ($graph_size * 2) - 1, $graph_size , $blue);//가로선


imagefttext($im, $graph_font_size, 0, 185, 220, $black, $font_file, '0');
imagefttext($im, $graph_font_size, 0, 135, 20, $black, $font_file, 'Y축 음수');
imagefttext($im, $graph_font_size, 0, 135, 390, $black, $font_file, 'Y축 양수');
imagefttext($im, $graph_font_size, 0, 10, 220, $black, $font_file, 'X축 음수');
imagefttext($im, $graph_font_size, 0, 340, 220, $black, $font_file, 'X축 양수');

 

 

기본적으로 보여질 밑그림을 그리는 단계입니다.

좌표값도 있고해서 XY축을 음수 양수 로 구분하여 그렸습니다.

 

bool imageline ( resource $image , int $x1 , int $y1 , int $x2 , int $y2 , int $color )

이 함수는 두점의 XY 좌표를 각각 받아서 1px 짜리의 선을 그어줍니다.

 

imageline ( $im , $array[0] + $graph_size , $array[1] + $graph_size , $array[2] + $graph_size, $array[3] + $graph_size , $blue);


imageline ( $im , $array[2] + $graph_size , $array[3] + $graph_size , $array[4] + $graph_size, $array[5] + $graph_size , $blue);


imageline ( $im , $array[4] + $graph_size , $array[5] + $graph_size , $array[6] + $graph_size, $array[7] + $graph_size , $blue);


imageline ( $im , $array[6] + $graph_size , $array[7] + $graph_size , $array[0] + $graph_size, $array[1] + $graph_size , $blue); 

 

$array = imageftbbox ( $font_size, $angle, $font_file, $string );  

을 통해서 받은 네개의 점 좌표를 가지고 순서대로 글자가 위치하게 될 부분을 박스로 표현합니다.

 

각 좌표마다 $graph_size 을 더해 준것은 원래는 의미 없는 부분이나

그림상 가운데 0 인부분을 기준으로 해서 보여주기 위해서 $graph_size 을 더하는 것입니다.

 

$x_min = min($array[0], $array[2], $array[4], $array[6]) * -1;
$y_min = min($array[1], $array[3], $array[5], $array[7]) * -1;


//전부 양수가 되도록 오른쪽, 하단으로 밀어내림

imageline ( $im , $array[0] + $x_min + $graph_size , $array[1] + $y_min + $graph_size , $array[2] + $x_min + $graph_size, $array[3] + $y_min + $graph_size , $black);

 

imageline ( $im , $array[2] + $x_min + $graph_size , $array[3] + $y_min + $graph_size , $array[4] + $x_min + $graph_size, $array[5] + $y_min + $graph_size , $black);

 

imageline ( $im , $array[4] + $x_min + $graph_size , $array[5] + $y_min + $graph_size , $array[6] + $x_min + $graph_size, $array[7] + $y_min + $graph_size , $black);

 

imageline ( $im , $array[6] + $x_min + $graph_size , $array[7] + $y_min + $graph_size , $array[0] + $x_min + $graph_size, $array[1] + $y_min + $graph_size , $black); 

 

이부분이 중요한데

이전 내용에서도 다루었듯이 imageftbbox 의 결과값 좌표에는 음수들이 있습니다.

우리가 이미지 위에 글자를 그려야 하므로 기본적으로 음수가 나오면 안됩니다.

 

이전 내용에서는 기울기가 0 이었기 때문에 아래위가 같은 직사각형이라서

Y 축에 -1 을 곱해서 위아래를 뒤집어서 계산하였습니다.

 

그러나 이번 내용에서는 기울기가 존재하기 때문에

그냥 상하로 뒤집으면 모양이 뒤바뀌게 되어서 그렇게 하면 안됩니다.

 

따라서

X 좌표중 제일 작은 것을 찾고 그것과 0 과의 거리만큼 모든 x 좌표를 조절합니다.

Y 좌표 역시 동일한 방법입니다.

 

위의 예제를 실행하면  

파란색 사각형이 원래 imageftbbox 로 받은 결과값으로 그린 사각형이고

검은색 사각형이 모두 0 을 기준으로 오른쪽이나 하단으로 이동시킨 사각형입니다.

 

결과에서도 나타나듯이 기울기가 0 인 경우를 제외하고는 모두 신뢰할수 없는 결과가 나옵니다.

버그인지 정확한 이유는 모르겟지만......

아무튼 기울기에 따른 문제를 해결하기 위해선

기울기가 0 인것을 기준으로 삼고 여러가지 복잡한 계산식을 사용해 직접 기울기에 맞는 좌표를 구할수 밖에 없습니다.

 

그래서 제가 앞으로 하는 내용에서는 그 부분을 제외하고 기울기가 0 인 상태를 전제로 진행할 예정입니다. 

첨부파일

study3.php (3.4 KB) 8회 2014-07-22 11:26
|

댓글 4개

그동안 있었던 궁금증이 좀 풀렸습니다. 감사합니다.
네 그랫군요.
다행입니다.
예제 바로보기: https://dbckdghk-c9-terrorboy.c9.io/study/study3.php

c9.io를 위하여 수정된 소스 <php 본문내에서 ?>로 닫았다 <?php로 여는것을 허용 안됨에 따라 수정>
// 허용 불가 if, for, foreach 등 php문을 닫았다 열수 없음.(표준 방법에 위배 라네요.)
[code]
<?php
header("Content-Type: text/html; charset=UTF-8");

$font_file = './Daum_Regular.ttf';
$font_size = 40;
$string = 'FaggM';
$angles = Array(0, 45, 90, 135, 180, 225, 270, 315, -45, -90, -135, -180, -225, -270, -315);



//그래프를 그리기 위한 용도
$graph_size = 200;
$graph_font_size = 10;



foreach($angles as $k => $angle){

//그래프용
$im = imagecreatetruecolor($graph_size * 2, $graph_size * 2);
$red = imagecolorallocate($im, 0xFF, 0x00, 0x00);
$blue = imagecolorallocate($im, 0x00, 0x80, 0xFF);
$white = imagecolorallocate($im, 0xFF, 0xFF, 0xFF);
$black = imagecolorallocate($im, 0x00, 0x00, 0x00);

imagefilledrectangle($im, 0, 0, ($graph_size * 2) - 1, ($graph_size * 2) - 1, $white);
imageline ( $im , $graph_size , 0 , $graph_size, ($graph_size * 2) - 1 , $blue);//세로선
imageline ( $im , 0 , $graph_size , ($graph_size * 2) - 1, $graph_size , $blue);//가로선

imagefttext($im, $graph_font_size, 0, 185, 220, $black, $font_file, '0');
imagefttext($im, $graph_font_size, 0, 135, 20, $black, $font_file, 'Y축 음수');
imagefttext($im, $graph_font_size, 0, 135, 390, $black, $font_file, 'Y축 양수');
imagefttext($im, $graph_font_size, 0, 10, 220, $black, $font_file, 'X축 음수');
imagefttext($im, $graph_font_size, 0, 340, 220, $black, $font_file, 'X축 양수');



echo "<strong>기울기가 {$angle}도 일때</strong><br><br>" . PHP_EOL;

$array = imageftbbox ( $font_size, $angle, $font_file, $string );

print_r($array);
echo "<br><br>" . PHP_EOL;

// $graph_size 을 더한것은 그래프상에서 보여주기 위해서
imageline ( $im , $array[0] + $graph_size , $array[1] + $graph_size , $array[2] + $graph_size, $array[3] + $graph_size , $blue);
imageline ( $im , $array[2] + $graph_size , $array[3] + $graph_size , $array[4] + $graph_size, $array[5] + $graph_size , $blue);
imageline ( $im , $array[4] + $graph_size , $array[5] + $graph_size , $array[6] + $graph_size, $array[7] + $graph_size , $blue);
imageline ( $im , $array[6] + $graph_size , $array[7] + $graph_size , $array[0] + $graph_size, $array[1] + $graph_size , $blue);

$x_min = min($array[0], $array[2], $array[4], $array[6]) * -1;
$y_min = min($array[1], $array[3], $array[5], $array[7]) * -1;

//전부 양수가 되도록 오른쪽, 하단으로 밀어내림
imageline ( $im , $array[0] + $x_min + $graph_size , $array[1] + $y_min + $graph_size , $array[2] + $x_min + $graph_size, $array[3] + $y_min + $graph_size , $black);
imageline ( $im , $array[2] + $x_min + $graph_size , $array[3] + $y_min + $graph_size , $array[4] + $x_min + $graph_size, $array[5] + $y_min + $graph_size , $black);
imageline ( $im , $array[4] + $x_min + $graph_size , $array[5] + $y_min + $graph_size , $array[6] + $x_min + $graph_size, $array[7] + $y_min + $graph_size , $black);
imageline ( $im , $array[6] + $x_min + $graph_size , $array[7] + $y_min + $graph_size , $array[0] + $x_min + $graph_size, $array[1] + $y_min + $graph_size , $black);

imagefttext($im, $font_size, $angle, $array[0] + $x_min + $graph_size, $array[1] + $y_min + $graph_size, $red, $font_file, $string);

imagepng($im, 'temp/study3_' . ($k + 1) . '.png');
imagedestroy($im);

$img_num = $k + 1;
$img_time = time();
echo "<br>
<img src='temp/study3_{$img_num}.png?{$img_time}'>
<br><br>";
}

?>
[/code]
어 그래.
고마워
댓글을 작성하시려면 로그인이 필요합니다. 로그인

프로그램

태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
11년 전 조회 2,918
11년 전 조회 738
11년 전 조회 3,442
11년 전 조회 856
11년 전 조회 756
11년 전 조회 1,052
11년 전 조회 861
11년 전 조회 666
11년 전 조회 1,096
11년 전 조회 1,796
11년 전 조회 1,051
11년 전 조회 810
11년 전 조회 656
11년 전 조회 2,424
11년 전 조회 1,975
11년 전 조회 2,496
11년 전 조회 1,431
11년 전 조회 2,714
11년 전 조회 3,116
11년 전 조회 4,461
11년 전 조회 5,819
11년 전 조회 2,152
11년 전 조회 1,719
11년 전 조회 1,466
11년 전 조회 1,133
11년 전 조회 875
11년 전 조회 1,047
11년 전 조회 944
11년 전 조회 1,424
11년 전 조회 2,229
11년 전 조회 903
11년 전 조회 1,078
11년 전 조회 1,739
11년 전 조회 1,415
11년 전 조회 1,316
11년 전 조회 1,232
11년 전 조회 1,157
11년 전 조회 3,508
11년 전 조회 1,147
11년 전 조회 1,761
11년 전 조회 2,014
11년 전 조회 1,328
11년 전 조회 1,319
11년 전 조회 1,314
11년 전 조회 769
11년 전 조회 1,174
11년 전 조회 1,509
11년 전 조회 1,470
11년 전 조회 843
11년 전 조회 1,192
11년 전 조회 958
11년 전 조회 1,715
11년 전 조회 1,353
11년 전 조회 735
11년 전 조회 2,159
11년 전 조회 6,633
11년 전 조회 1,289
11년 전 조회 1,135
11년 전 조회 1,067
11년 전 조회 931
11년 전 조회 1,461
11년 전 조회 855
11년 전 조회 3,423
11년 전 조회 1,263
11년 전 조회 1,654
11년 전 조회 1,031
11년 전 조회 2,666
11년 전 조회 1,301
11년 전 조회 2,589
11년 전 조회 1,949
11년 전 조회 2,465
11년 전 조회 1,410
11년 전 조회 2,539
11년 전 조회 1,358
11년 전 조회 1,045
11년 전 조회 1,052
11년 전 조회 5,428
11년 전 조회 1,238
11년 전 조회 801
11년 전 조회 765
11년 전 조회 1,121
11년 전 조회 1,468
11년 전 조회 1,886
11년 전 조회 2,196
11년 전 조회 1,101
11년 전 조회 1,426
11년 전 조회 1,366
11년 전 조회 1,005
11년 전 조회 764
11년 전 조회 2,192
11년 전 조회 1,434
11년 전 조회 3,266
11년 전 조회 1,169
11년 전 조회 1,023
11년 전 조회 2,105
11년 전 조회 2,762
11년 전 조회 2,122
11년 전 조회 3,158
11년 전 조회 1,547
11년 전 조회 3,289
🐛 버그신고