[英]Adjusting centered text font size based on image size. How?
通過一些研究,我創建了以下代碼來生成一個簡單的圖像,該圖像的中心有一個文本字符串,顯示該圖像的分辨率。 挑戰在於,當您將 X 和 Y 尺寸更改為更大或更小的值時,字體大小保持不變。
我的問題是,當用戶在圖像大小之間進行選擇時,什么是“增大”或“縮小”字體大小的好方法?
我的一個想法是計算預定區域,將它們添加到鍵值對數組中,其中值是給定區域范圍的硬編碼字體大小。
也許你有一個更簡單的想法?
PS:我使用的字體可以從 Google fonts 下載:
output 看起來像這樣:
和代碼:
<?php
// We Declare our canvas width & height dimensions
$myCanvasWidth = 256;
$myCanvasHeight = 256;
// We Create an empty and dark canvas from these dimensions above
$myCanvas = imagecreate($myCanvasWidth, $myCanvasHeight) or die("Can't create image!");
// We Allocate a color to be used as the canvas background
$colorIndigo = imagecolorallocate($myCanvas, 0x3F, 0x51, 0xB5);
// We Apply color as canvas background
imagefill($myCanvas, 0, 0, $colorIndigo);
// We Allocate a color to be used with the canvas text
$colorWhite = imagecolorallocate($myCanvas, 0xFF, 0xFF, 0xFF);
// We Declare our TTF font path in Windows 10...
$myFont = 'J:\Montserrat-SemiBold.ttf';
// We set the font size
$myFontSize = 16;
// We set the text angle
$myTextAngle = 0;
// We Declare the text string to be drawn on canvas...
$myText = $myCanvasWidth . ' x ' . $myCanvasHeight;
// We Calculate and return the bounding box in pixels for the text string to be drawn on canvas...
$myTextBoundingBox = imageftbbox($myFontSize, $myTextAngle, $myFont, $myText);
// Get the text upper, lower, left and right corner bounds of our text bounding box...
$lower_left_x = $myTextBoundingBox[0];
$lower_left_y = $myTextBoundingBox[1];
$lower_right_x = $myTextBoundingBox[2];
$lower_right_y = $myTextBoundingBox[3];
$upper_right_x = $myTextBoundingBox[4];
$upper_right_y = $myTextBoundingBox[5];
$upper_left_x = $myTextBoundingBox[6];
$upper_left_y = $myTextBoundingBox[7];
// Get Text Width and Height
$myTextWidth = $lower_right_x - $lower_left_x; //or $upper_right_x - $upper_left_x
$myTextHeight = $lower_right_y - $upper_right_y; //or $lower_left_y - $upper_left_y
//Get the starting position for centering
$start_x_offset = ($myCanvasWidth - $myTextWidth) / 2;
$start_y_offset = (($myCanvasHeight - $myTextHeight) + $myFontSize * 2) / 2;
// Write text to the image using TrueType fonts
imagettftext($myCanvas, $myFontSize, $myTextAngle, $start_x_offset, $start_y_offset, $colorWhite, $myFont, $myText);
// Draw a horizontal dashed line for reference only
imagedashedline($myCanvas, 0, $myCanvasHeight/2, $myCanvasWidth, $myCanvasHeight/2, $colorWhite);
// Draw a vertical dashed line for reference only
imagedashedline($myCanvas, $myCanvasWidth/2, 0, $myCanvasWidth/2, $myCanvasHeight, $colorWhite);
// We se the correct http header for png images...
header('Content-Type: image/png');
// We Output a PNG image to either the browser or a file
imagepng($myCanvas);
// Free any memory associated with myCanvas; image.
imagedestroy($myCanvas);
?>
這是上面作為答案實施的評論。 有趣的是,即使線條和字體看起來沒有對齊,它們實際上是居中的。
中心的“x”會產生不對齊的錯覺; 不使用等間距 fonts 的可能副作用是為了實現更不必要的精確 alignment..?!
再說一次.. 等距的 fonts 不是那么好看...
示例調整大小輸出:
<?php
// We Declare our canvas width & height dimensions
$myCanvasWidth = 640;
$myCanvasHeight = 360;
// We Create an empty and dark canvas from these dimensions above
$myCanvas = imagecreate($myCanvasWidth, $myCanvasHeight) or die("Can't create image!");
// We Allocate a color to be used as the canvas background
$colorIndigo = imagecolorallocate($myCanvas, 0x3F, 0x51, 0xB5);
// We Apply color as canvas background
imagefill($myCanvas, 0, 0, $colorIndigo);
// We Allocate a color to be used with the canvas text
$colorWhite = imagecolorallocate($myCanvas, 0xFF, 0xFF, 0xFF);
// We Declare our TTF font path in Windows 10...
$myFont = 'J:\Montserrat-SemiBold.ttf';
// Static font seed value...
$fontSize = 16;
// We set the dynamic font size
$myFontSize = $myCanvasWidth / $fontSize;
// We set the text angle
$myTextAngle = 0;
// We Declare the text string to be drawn on canvas...
$myText = $myCanvasWidth . ' x ' . $myCanvasHeight;
// We Calculate and return the bounding box in pixels for the text string to be drawn on canvas...
$myTextBoundingBox = imageftbbox($myFontSize, $myTextAngle, $myFont, $myText);
// Get the text upper, lower, left and right corner bounds of our text bounding box...
$lower_left_x = $myTextBoundingBox[0];
$lower_left_y = $myTextBoundingBox[1];
$lower_right_x = $myTextBoundingBox[2];
$lower_right_y = $myTextBoundingBox[3];
$upper_right_x = $myTextBoundingBox[4];
$upper_right_y = $myTextBoundingBox[5];
$upper_left_x = $myTextBoundingBox[6];
$upper_left_y = $myTextBoundingBox[7];
// Get Text Width and Height
$myTextWidth = $lower_right_x - $lower_left_x; //or $upper_right_x - $upper_left_x
$myTextHeight = $lower_right_y - $upper_right_y; //or $lower_left_y - $upper_left_y
//Get the starting position for centering
$start_x_offset = ($myCanvasWidth - $myTextWidth) / 2;
$start_y_offset = (($myCanvasHeight - $myTextHeight) + $myFontSize * 2) / 2;
// Write text to the image using TrueType fonts
imagettftext($myCanvas, $myFontSize, $myTextAngle, $start_x_offset, $start_y_offset, $colorWhite, $myFont, $myText);
// Draw a horizontal dashed line for reference only
imagedashedline($myCanvas, 0, $myCanvasHeight/2, $myCanvasWidth, $myCanvasHeight/2, $colorWhite);
// Draw a vertical dashed line for reference only
imagedashedline($myCanvas, $myCanvasWidth/2, 0, $myCanvasWidth/2, $myCanvasHeight, $colorWhite);
// We set the correct http header for png images...
header('Content-Type: image/png');
// We Output a PNG image to either the browser or a file
imagepng($myCanvas);
// Finally, we free any memory associated with myCanvas; the image.
imagedestroy($myCanvas);
?>
圖示的imageftbbox() function。
imageftbbox()
返回一個包含 8 個元素的數組,這些元素代表構成文本邊界框的四個點:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.