이미지 너비에 맞게 문자열의 자동 개행


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

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

이미지관련 > 이미지 너비에 맞게 문자열의 자동 개행   

 

문자열을 이미지에 그리게 될때  

문자열이 이미지 보다 긴데, 어느 시점에서 개행을 시켜야 할지 모를때가 많습니다.

폰트크기나 폰트에 따라 차이가 있기 때문에 정확히 맞추기란 매우 어렵습니다.

 

이번 내용에서는 어떤 긴 문자열에 대해 자동으로 개행한후 이미지에 그리는 부분을 다룹니다.

 

 

function image_box_auto_newline ($font_file, $font_size, $angle, &$text, $padding, $image_width) {

    $array = list($x1, $y1, $x2, $y2, $x3, $y3, $x4, $y4, $width, $height, $x_gap, $y_gap) = image_box ($font_file, $font_size, $angle, $text);

    if (function_exists('mb_strlen') !== true || function_exists('mb_substr') !== true)
        return $array;


    if ($padding > 0)
        $width += ($padding * 2);

    if ($width > $image_width) {

        $text_array = preg_split("`\r?\n`", $text);

        foreach($text_array as $k => $text_){

            $temp = Array();
            $temp_text = '';
            $text_len = mb_strlen($text_, 'UTF-8');
            $j = 0;
            for ($i = 0; $i < $text_len; $i++) {

                $temp_text .= mb_substr($text_, $i, 1, 'UTF-8');

                list($x1, $y1, $x2, $y2, $x3, $y3, $x4, $y4, $width, $height, $x_gap, $y_gap) = image_box ($font_file, $font_size, $angle, $temp_text);

                if ($padding > 0)
                    $width += ($padding * 2);

                if ($width > $image_width) {

                    $temp[] = mb_substr($text_, $j, $i - $j, 'UTF-8');
                    $temp_text = mb_substr($text_, $i, 1, 'UTF-8');
                    $j = $i;
                }
            }

            $temp[] = $temp_text;

            $text_array[$k] = implode(PHP_EOL, $temp);;
        }

        $text = implode(PHP_EOL, $text_array);
        $array = list($x1, $y1, $x2, $y2, $x3, $y3, $x4, $y4, $width, $height, $x_gap, $y_gap) = image_box ($font_file, $font_size, $angle, $text);
    }

    return $array;
}

 

image.lib.20140728.php 파일에는 위의 함수가 추가 되었습니다.

 

image_box_auto_newline ($font_file, $font_size, $angle, &$text, $padding, $image_width)


주어진 문자열이 주어진 이미지 너비보다 크면 알아서 문자열의 길이를 재어서 적정한 위치에 개행을 시키는 함수 입니다.

 

$text 앞에 & 를 붙이는 것은 참조 표현이며

함수의 반환값으로 $text 를 반환하지 않고 함수내에서 값이 변하면  

원래 $text 도 변하도록 하기 위해서 참조를 사용하였습니다.

 

if (function_exists('mb_strlen') !== true || function_exists('mb_substr') !== true)
    return $array;

mbstring 관련 함수가 지원되어야만 사용가능하므로 위와같이 처리하였습니다.

phpinfo(); 로 php 상태를 찍어봐서 mbstring 이 보이고 enable 상태이어야 합니다.

 

if ($padding > 0)
        $width += ($padding * 2);

패딩이 0 보다 클때 문자열의 길이에 패딩을 두번 더해줍니다

 

기존의 image_text (&$image, $font_file, $font_size, $font_color, $angle, $text, $align='left', $valign='top', $padding=0)


에서 $auto_newline=true 가 추가 되었습니다.

 

if ($auto_newline === true) {

    $array = list($x1, $y1, $x2, $y2, $x3, $y3, $x4, $y4, $width, $height, $x_gap, $y_gap) = image_box_auto_newline ($font_file, $font_size, $angle, $text, $padding, $image_width);
}
else {

    $array = list($x1, $y1, $x2, $y2, $x3, $y3, $x4, $y4, $width, $height, $x_gap, $y_gap) = image_box ($font_file, $font_size, $angle, $text);
}

 

else 부분은 이전의 내용과 동일하고

auto_newline === true 일때는 이번에 새로만든 image_box_auto_newline 함수를 호출합니다.

 

그리고 $align => center 일때와 $valign => middle 일때 계산식이 조금 수정되었습니다.

gap  부분을 나눈후에 처리되도록 하였습니다.

 

$x = ceil(($image_width - $width) / 2) + $x_gap;

$y = ceil(($image_height + $height) / 2) + $y_gap;

 

 

예제6 > study6.php

 

<?php

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

include_once('image.lib.20140728.php');



$font_file = './Daum_Regular.ttf';
$font_size = 15;
$angle = 0;
$text = '동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세';
$padding = 10;

$array = list($x1, $y1, $x2, $y2, $x3, $y3, $x4, $y4, $width, $height, $x_gap, $y_gap) = image_box ($font_file, $font_size, $angle, $text);

?>

폰트파일 : <?php echo $font_file?><br>

폰트크기 : <?php echo $font_size?> px<br>

기울기 : <?php echo $angle?><br>

문자열 : <?php echo nl2br($text)?><br>

패딩 : <?php echo $padding?> px<br>
<br>

<?php

$aligns = Array('left', 'center', 'right');
$valigns = Array('top', 'middle', 'bottom');

$i = 1;
foreach($aligns as $align){

    foreach($valigns as $valign){

        $im = imagecreatetruecolor(300, 300);
        $red = imagecolorallocate($im, 0xFF, 0x00, 0x00);
        $blue = imagecolorallocate($im, 0x00, 0x80, 0xFF);
        $white = imagecolorallocate($im, 0xFF, 0xFF, 0xFF);
        $black = imagecolorallocate($im, 0x00, 0x00, 0x00);
        $gray = imagecolorallocate($im, 0XD0, 0XD0, 0XD0);

        imagefilledrectangle($im, 0, 0, 299, 299, $gray);

        image_text ($im, $font_file, $font_size, $black, $angle, $text, $align, $valign, $padding);

        imagepng($im, 'temp/study6_' . $i . '.png');
        imagedestroy($im);

        ?>

        <br><br>
        <strong><?php echo $align; ?>,  <?php echo $valign; ?></strong><br>

        <img src='temp/study6_<?php echo $i; ?>.png?<?php echo time();?>'>
        <br><br>

        <?php

        $i++;
    }
}

?>

 

 

위 예제를 실행 하여 보면 문자열이 개행이 되어 각 위치별로 그려짐을 알수 있습니다. 

예제를 실행할 때에는 temp 디렉토리를 생성하고 퍼미션을 777 로 주어야 합니다.  

 

다음에는  

left center right 일때

개행된 부분까지도 같이 정렬 되는 부분을 다룰 예정입니다. 

 

첨부파일

Daum_Regular.ttf (1.2 MB) 4회 2014-07-28 18:07
|

댓글 2개

감사합니다.

https://dbckdghk-c9-terrorboy.c9.io/study/study6.php
댓글을 작성하시려면 로그인이 필요합니다. 로그인

프로그램

태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
11년 전 조회 2,392
11년 전 조회 792
11년 전 조회 1,327
11년 전 조회 1,265
11년 전 조회 891
11년 전 조회 3,039
11년 전 조회 1,521
11년 전 조회 1,373
11년 전 조회 761
11년 전 조회 3,083
11년 전 조회 2,987
11년 전 조회 812
11년 전 조회 3,510
11년 전 조회 931
11년 전 조회 810
11년 전 조회 1,114
11년 전 조회 920
11년 전 조회 728
11년 전 조회 1,157
11년 전 조회 1,869
11년 전 조회 1,116
11년 전 조회 870
11년 전 조회 724
11년 전 조회 2,490
11년 전 조회 2,044
11년 전 조회 2,571
11년 전 조회 1,497
11년 전 조회 2,774
11년 전 조회 3,185
11년 전 조회 4,528
11년 전 조회 5,873
11년 전 조회 2,215
11년 전 조회 1,790
11년 전 조회 1,533
11년 전 조회 1,201
11년 전 조회 940
11년 전 조회 1,125
11년 전 조회 1,009
11년 전 조회 1,487
11년 전 조회 2,294
11년 전 조회 976
11년 전 조회 1,139
11년 전 조회 1,798
11년 전 조회 1,487
11년 전 조회 1,377
11년 전 조회 1,296
11년 전 조회 1,220
11년 전 조회 3,572
11년 전 조회 1,221
11년 전 조회 1,826
11년 전 조회 2,073
11년 전 조회 1,386
11년 전 조회 1,376
11년 전 조회 1,377
11년 전 조회 834
11년 전 조회 1,236
11년 전 조회 1,570
11년 전 조회 1,537
11년 전 조회 906
11년 전 조회 1,252
11년 전 조회 1,016
11년 전 조회 1,769
11년 전 조회 1,414
11년 전 조회 792
11년 전 조회 2,219
11년 전 조회 6,691
11년 전 조회 1,353
11년 전 조회 1,196
11년 전 조회 1,134
11년 전 조회 987
11년 전 조회 1,519
11년 전 조회 914
11년 전 조회 3,486
11년 전 조회 1,320
11년 전 조회 1,722
11년 전 조회 1,089
11년 전 조회 2,727
11년 전 조회 1,374
11년 전 조회 2,647
11년 전 조회 2,016
11년 전 조회 2,527
11년 전 조회 1,480
11년 전 조회 2,611
11년 전 조회 1,408
11년 전 조회 1,116
11년 전 조회 1,121
11년 전 조회 5,488
11년 전 조회 1,296
11년 전 조회 857
11년 전 조회 821
11년 전 조회 1,179
11년 전 조회 1,526
11년 전 조회 1,945
11년 전 조회 2,253
11년 전 조회 1,166
11년 전 조회 1,483
11년 전 조회 1,423
11년 전 조회 1,075
11년 전 조회 828
11년 전 조회 2,260
🐛 버그신고