CSS — PHP GD2: imagettftext в той же позиции, что и в HTML
Чтобы сделать вопрос проще для понимания, я сделал этот очень простой скрипт:
<?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 () doc говорит: аргумент Y — это позиция базовой линии шрифтов, а не самая нижняя часть символа
Поэтому я полагаю, что мне нужно добавить высоту между базовой линией и верхом шрифта к моей позиции Y, чтобы получить ту же позицию, что и в HTML / CSS. Вот почему я использую значение 7 для imagettfbbox ().
Но это не работает. Позиция Y иногда хорошая, иногда плохая.
Я не понимаю почему.
Если у вас есть идея … Спасибо!
Пример результата:
Решение
После прочтения этого поста о проблеме ограничительной рамки:
Ограничительный прямоугольник возврата PHP imagettftext отличается от отображаемого ограничивающего прямоугольника
Это изменило мой взгляд на проблему. Что делать, если проблема связана со шрифтом или CSS?
Я пытался сделать так, чтобы GD2 рендеринг отображался на HTML / CSS.
НО, HTML / CSS использует другую переменную, которую я полностью забыл: line-height.
В HTML:
Text_center ~ = margin_top + line_height / 2.
Где line_height может варьироваться в зависимости от размера текста или при изменении свойства CSS.
Итак, чтобы получить одинаковую позицию между HTML-рендерингом и GD2-рендерингом, я установил свойство CSS-line-height в 0, чтобы игнорировать его.
И сейчас позиция совершенно идентична.
Другие решения
Других решений пока нет …