简体   繁体   English

根据图像大小调整居中的文本字体大小。 如何?

[英]Adjusting centered text font size based on image size. How?

With some research, I have created the following piece of code to generate a simple image with a text string right on the center showing the resolution of this image.通过一些研究,我创建了以下代码来生成一个简单的图像,该图像的中心有一个文本字符串,显示该图像的分辨率。 The challenge is, when you change X & Y dimensions to larger or smaller values, the font size remains the same.挑战在于,当您将 X 和 Y 尺寸更改为更大或更小的值时,字体大小保持不变。

My question is, what would be a good way to "grow" or "shrink" the font size as the user chooses between image sizes?我的问题是,当用户在图像大小之间进行选择时,什么是“增大”或“缩小”字体大小的好方法?

One idea I had would be to calculate predetermined areas, add them to an array of key value pairs where the value is the hard-coded font size for a given range of areas.我的一个想法是计算预定区域,将它们添加到键值对数组中,其中值是给定区域范围的硬编码字体大小。

Perhaps you have a simpler idea?也许你有一个更简单的想法?

PS: The font I am using can be downloaded from Google fonts here: PS:我使用的字体可以从 Google fonts 下载:

Montserrat-SemiBold蒙特塞拉特-半粗体

The output looks like this: output 看起来像这样:

256x256

And the code:和代码:

<?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);

?>

Here is the comment above implemented as an answer.这是上面作为答案实施的评论。 Interestingly enough, even though the lines and the font don't appear to align, they are indeed actually centered.有趣的是,即使线条和字体看起来没有对齐,它们实际上是居中的。

The "x" at the center creates the illusion of nonalignment ;中心的“x”会产生不对齐的错觉 a possible side effect of NOT using mono-spaced fonts in order to achieve a more unnecessarily precise alignment..?!使用等间距 fonts 的可能副作用是为了实现更不必要的精确 alignment..?!

Then again.. mono-spaced fonts are not that good looking...再说一次.. 等距的 fonts 不是那么好看...

Sample resize outputs:示例调整大小输出:

样本

样品2

样品3

<?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);

?>

The imageftbbox() function illustrated.图示的imageftbbox() function。

The imageftbbox() returns an array with 8 elements representing four points making the bounding box of the text: imageftbbox()返回一个包含 8 个元素的数组,这些元素代表构成文本边界框的四个点

图像1

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM