За последние 24 часа нас посетили 60919 программистов и 1582 робота. Сейчас ищут 1192 программиста ...

Пропорциональное увеличение шрифта и координат до текста

Тема в разделе "PHP для профи", создана пользователем desertFox, 2 фев 2017.

  1. desertFox

    desertFox Активный пользователь

    С нами с:
    19 окт 2013
    Сообщения:
    62
    Симпатии:
    0
    Здравствуйте.
    Пытаюсь сделать конструктор сертификатов. Имеется готовое изображение, на которое нужно нанести текст ФИО.
    Вот как это выглядит:
    [​IMG]
    В редакторе стоит уменьшенная копия сертифика(картинки). Поверх, средствами css наложен блок с текстом, размер и положение которого регулируется с помощью js.
    Задача стоит в том, что после регулировки размера и положения текста нужно сохранить текст на оригинальном сертификате, а он, естественно, значительно больше картинки-превью, на которой идёт настройка текста.

    Поэтому, после сохранения, на сертификате с оригинальными размерами текст наносится мелкий и не в том месте, где надо. Надеюсь, поняли, в чём проблема. Попробовал вычислить коэффициент-разницу в размере картинки-превью и сертификата-оригинала. Считал по этой формуле:

    $k = $w_bigimg / $w_miniimg; - ширину большой картинки поделить на ширину маленькой,

    $font_size=$font_size * $k; - затем этот коэффициент умножил на размер шрифта (шрифт передаётся в пикселях), но в результате размер шрифта получается очень большой. Также данный коэффициент умножал на расстояние от верха картинки до текста (координата по оси Y), расчеты оказались неверными, текст стал намного выше, чем на превью в редакторе.

    Каким образом можно правильно рассчитать пропорциональное увеличение шрифта и координат до текста?
     
  2. MouseZver

    MouseZver Суперстар

    С нами с:
    1 апр 2013
    Сообщения:
    7.815
    Симпатии:
    1.332
    Адрес:
    Лень
    что - то про порции, не стал вчитываться сорь.. повангую:
    PHP:
    1. define("SIZE", 250);
    2.  
    3. $width = 850;
    4. $height = 500;
    5.  
    6. $newHeight = ceil($height/($width/SIZE));
    7. $THEND = imagecreatetruecolor(SIZE,$newHeight);
    8.  
    9. imagecopyresampled($THEND,$BACKGROUND,0,0,0,0,SIZE,$newHeight,$width,$height);
     
  3. desertFox

    desertFox Активный пользователь

    С нами с:
    19 окт 2013
    Сообщения:
    62
    Симпатии:
    0
    одну ошибку нашел и устранил - для создания нового изображения нужно использовать размер шрифта в пунктах, а я передавал значение в пикселях, теперь размер шрифта практически такой же, как на уменьшенной копии, т.е. формула для шрифта работает:

    $k = $w_bigimg / $w_miniimg; - ширину большой картинки поделить на ширину маленькой,
    $font_size=$font_size * $k; - коэффициент умножил на размер шрифта (размер должен быть в пунктах!)

    а вот с расчетом координаты до текста по оси Y что-то не то, высота меньше чем надо:
    [​IMG]
     
  4. desertFox

    desertFox Активный пользователь

    С нами с:
    19 окт 2013
    Сообщения:
    62
    Симпатии:
    0
    не знаю, как и почему, но когда прибавил высоту текста, то стало более менее:
    PHP:
    1. $pos_y = $pos_text_miniimg * $k + $text_height;
    [​IMG]

    про размеры изображений забыл сказать,
    658 х 465 - уменьшенная копия в редакторе,
    1280 х 905 - изображение, на которое требовалось нанести текст,

    наверное, можно тему закрывать, задача решена :)
     
  5. Poznakomlus

    Poznakomlus Активный пользователь

    С нами с:
    12 сен 2014
    Сообщения:
    96
    Симпатии:
    19
    Адрес:
    Киев
    Делайте все манипуляции на клиенте с помощью js
    К примеру ваша задача легко решается с помощью Fabric js
    На сервере, если нужно храните данные и их координаты
     
    Fell-x27 нравится это.
  6. desertFox

    desertFox Активный пользователь

    С нами с:
    19 окт 2013
    Сообщения:
    62
    Симпатии:
    0
    благодарю, посмотрел демо - http://fabricjs.com/demos/
    решения мод мою задачу не увидел, там совсем другое, да и оно мне ненужно, что требовалось - уже сделано, работает как нужно.
     
  7. Poznakomlus

    Poznakomlus Активный пользователь

    С нами с:
    12 сен 2014
    Сообщения:
    96
    Симпатии:
    19
    Адрес:
    Киев
    Прикрепил пример в архиве. Который показывает как легко это сделать, главное не лениться
     

    Вложения:

    • diplom.zip
      Размер файла:
      274,2 КБ
      Просмотров:
      3
  8. desertFox

    desertFox Активный пользователь

    С нами с:
    19 окт 2013
    Сообщения:
    62
    Симпатии:
    0
    спасибо за пример и что рассказали про более лучший вариант, классно, не спорю, возможно когда-нить изучу Fabric js ,

    а он (Fabric js) сможет сразу 50 изображений обработать и выдать клиенту готовый результат в архиве?
    мой редактор может, собственно, именно для этого он и создавался, чтобы вставить список фамилий и на выходе получить готовые бланки.
     
  9. Poznakomlus

    Poznakomlus Активный пользователь

    С нами с:
    12 сен 2014
    Сообщения:
    96
    Симпатии:
    19
    Адрес:
    Киев
    В принципе это возможно. Генерировать на клиенте, zip