0

为了使问题更易于理解，我制作了这个非常简单的脚本：

<?php
    if(!empty($_POST)){
        $img = imagecreatetruecolor(300,100);

        $font = "./custom_font/aquilinetwo-webfont.ttf";
        $dimensions = imagettfbbox($_POST['font_size'],0,$font,$_POST['font_value']);
        $x_pos = $_POST["font_pos_x"];
        $y_pos = $_POST["font_pos_y"]+abs($dimensions[7]);
        $color = imagecolorallocate($img, 255, 255, 255);
        imagettftext($img,$_POST['font_size'],0,$x_pos,$y_pos,$color,$font,$_POST['font_value']);

        imagepng($img, "./image.png");
    }
?>

<html>
<head>
    <script type="text/javascript" src="jquery-1.11.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#form_font_value").keyup(function(){
                $("#myImage span").html($(this).val());
            });
            $("#form_font_size").keyup(function(){
                $("#myImage span").css("font-size",$(this).val()+"pt");
            });
            $("#form_font_x").keyup(function(){
                $("#myImage span").css("left",$(this).val()+"px");
            });
            $("#form_font_y").keyup(function(){
                $("#myImage span").css("top",$(this).val()+"px");
            });
        });
    </script>
    <style>
        @font-face {
            font-family: 'aquilinetworegular';
            src: url('./custom_font/aquilinetwo-webfont.eot');
            src: url('./custom_font/aquilinetwo-webfont.eot?#iefix') format('embedded-opentype'),
                 url('./custom_font/aquilinetwo-webfont.woff2') format('woff2'),
                 url('./custom_font/aquilinetwo-webfont.woff') format('woff'),
                 url('./custom_font/aquilinetwo-webfont.ttf') format('truetype'),
                 url('./custom_font/aquilinetwo-webfont.svg#aquilinetworegular') format('svg');
            font-weight: normal;
            font-style: normal;
        }

        #myImage        {background-color:#000;width:300px;height:100px;margin-bottom:20px;position:relative;}
        #myImage span   {position:absolute;font-family:"aquilinetworegular";font-size:<?php echo @$_POST["font_size"]?$_POST["font_size"]:"12";?>pt;top:<?php echo @$_POST["font_pos_y"]?$_POST["font_pos_y"]:"0";?>px;left:<?php echo @$_POST["font_pos_x"]?$_POST["font_pos_x"]:"0";?>px;color:#FFF;}
    </style>
</head>
<body>
    <div id="myImage">
        <span><?php echo @$_POST["font_value"]?$_POST["font_value"]:"YourText";?></span>
    </div>
    <form method="post">
        Value : <input type="text" name="font_value" id="form_font_value" value="<?php echo @$_POST["font_value"]?$_POST["font_value"]:"YourText";?>"><br/>
        Size : <input type="text" name="font_size" id="form_font_size" value="<?php echo @$_POST["font_size"]?$_POST["font_size"]:"12";?>">pt<br/>
        Position X :<input type="text" name="font_pos_x" id="form_font_x" value="<?php echo @$_POST["font_pos_x"]?$_POST["font_pos_x"]:"0";?>">px<br/>
        Position Y :<input type="text" name="font_pos_y" id="form_font_y" value="<?php echo @$_POST["font_pos_y"]?$_POST["font_pos_y"]:"0";?>">px<br/>
        <input type="submit">
    </form>
    <hr>
    <img src="image.png" alt="Send datas first">
</body>
</html>

它必须做什么？

用户选择他想在图像上放置文本的位置。然后，生成图像。

问题 ：

文本未放置在正确的 Y 轴位置。取决于字体系列/大小。可以更改字体系列。所以我不能“硬编码”这个职位。

我认为问题可能出在哪里：

imagettftext() 文档说：参数 Y 是字体基线的位置，而不是字符的最底部

所以我想我需要将基线和字体顶部之间的高度添加到我的 Y 位置，以获得与 HTML/CSS 中呈现的完全相同的位置。这就是我使用 imagettfbbox() 的值 7 的原因。

但它不起作用。Y位置有时好，有时坏。我不明白为什么。

如果你有一个想法......谢谢！

结果示例：

在此处输入图像描述

4

1 回答 1

0

阅读有关边界框问题的这篇文章后： PHP imagettftext return bounding box different from rendering bounding box

它改变了我对这个问题的看法。如果字体或 CSS 有问题怎么办？

我试图让 GD2 呈现像在 HTML/CSS 上显示的那样。

但是，HTML/CSS 使用了另一个我完全忘记的变量：行高。

在 HTML 中：Text_center ~= margin_top+line_height/2。其中 line_height 可以根据文本大小或由 CSS 属性更改。

因此，为了在 HTML 渲染和 GD2 渲染之间获得完全相同的位置，我将 CSS 属性 line-height 设置为 0 以忽略它。而现在，位置完全相同。

于 2014-10-23T10:49:32.630 回答