Thiết kế website giá rẻ

Question

I want to create a circle with a fixed size and in the upper semicircle there should be an image and in the lower semicircle text.
The text should be as large as possible, but it must always be inside the circle and must not extend beyond the edge of the circle.

Unfortunately I can’t get it to work. With longer text, the text goes beyond the edge of the circle. I can now make the font size very small, but with short text the font is then tiny. How can I make it so that the font is as large as possible but always stays within the circle?

Here is my code.
Test input:
Enter Image Name:
https://www.clker.com/cliparts/5/i/q/6/o/E/small-baseball-md.png

Enter Text:
This is a long line
Wrap here

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $str_picture = $_POST["str_picture"];
  $str_text = $_POST["str_text"];
  $selected_font = $_POST["selected_font"];

  // Create a circular SVG image with a light yellow background
  $circle_size = 800;
  $circle_diameter = $circle_size / 2.54 * 8; // 8 cm in pixels
  $svg = '<svg width="' . $circle_size . 'px" height="' . $circle_size . 'px" viewBox="0 0 ' . $circle_size . ' ' . $circle_size . '">';
  $svg .= '<circle cx="' . $circle_size / 2 . '" cy="' . $circle_size / 2 . '" r="' . $circle_size / 2 . '" fill="#fff4d8" />';

  // Display the image inside the circle
  if (!empty($str_picture)) {
    $img_src = $str_picture;
    $img_info = getimagesize($img_src);
    $img_width = $img_info[0];
    $img_height = $img_info[1];

    // Adjust the image size to fit in the upper semicircle
    $max_size = $circle_size / 2;
    if ($img_width > $max_size || $img_height > $max_size) {
      $scale_factor = min($max_size / $img_width, $max_size / $img_height);
      $img_width = $img_width * $scale_factor;
      $img_height = $img_height * $scale_factor;
    }

    $svg .= '<image x="' . ($circle_size - $img_width) / 2 . '" y="' . ($circle_size - $img_height) / 4 . '" width="' . $img_width . '" height="' . $img_height . '" href="' . $img_src . '"/>';
  }

  // Display the text in the lower semicircle
  $text_size = 150; // 1.5 cm font size
  $text_x = $circle_size / 2;
  $text_y = $circle_size * 0.7;
  $text_width = $circle_size * 0.8;
  $text_height = $circle_size * 0.3;

  // Adjust the font size if the text doesn't fit
  $lines = explode("n", $str_text);
  foreach ($lines as $line) {
    $line_width = strlen($line) * $text_size / 15;
    if ($line_width > $text_width) {
      $scale_factor = $text_width / $line_width;
      $text_size = (int)($text_size * $scale_factor);
    }
  }

  // Draw the text on the SVG
  foreach ($lines as $line) {
    $svg .= '<text x="' . $text_x . '" y="' . $text_y . '" font-family="' . $selected_font . ', sans-serif" font-size="' . $text_size . 'px" fill="#000000" text-anchor="middle">' . htmlspecialchars($line) . '</text>';
    $text_y += $text_size;
  }

  $svg .= '</svg>';
  echo '<div class="image-container">' . $svg . '</div>';
  die();
}
?>

<!DOCTYPE html>
<html>
<head>
  <title>Image and Text Overlay</title>
  <style>
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    form {
      background-color: #f1f1f1;
      padding: 20px;
      border-radius: 5px;
      text-align: center;
    }

    label {
      display: block;
      margin-bottom: 10px;
    }

    input[type="text"], textarea, select {
      width: 300px;
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 3px;
    }

    input[type="submit"] {
      padding: 10px 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 3px;
      cursor: pointer;
    }

    input[type="submit"]:hover {
      background-color: #45a049;
    }

    .image-container {
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <form method="post">
      <label for="str_picture">Enter Image Name:</label>
      <input type="text" id="str_picture" name="str_picture">
      <br>
      <label for="str_text">Enter Text (max 100 characters):</label>
      <textarea id="str_text" name="str_text" maxlength="100" required></textarea>
      <br>
      <label for="selected_font">Select Font:</label>
      <select id="selected_font" name="selected_font">
        <option value="Arial">Arial</option>
        <option value="Times New Roman">Times New Roman</option>
        <option value="Verdana">Verdana</option>
        <option value="Georgia">Georgia</option>
        <option value="Courier New">Courier New</option>
      </select>
      <br>
      <input type="submit" value="Submit">
    </form>
  </div>
</body>
</html>

Thiết kế website giá rẻ

Danh mục

How to create a circle with a fixed diameter with an image and text inside on a webpage