fabricjs — Fabric.js для Imagick (php)

Я использую пользовательский инструмент продукта, который построен на основе Fabric.js (FancyProductDesigner). Мне нужно было воссоздать то, что я сделал с Fabric.js (представления хранятся в таблице базы данных), и заново создать его, используя imagick для печати / предварительного просмотра. целями фабрики, без необходимости хранить каждое из изображений высокой четкости на сервере. Поскольку мы производим около 400 таких пользовательских продуктов в среднем в день, если бы я хранил каждый из них, для их хранения потребовалось бы около 160 Мб в день, и мы хотим хранить их для наших клиентов в течение как минимум 90 дней после покупки. ,

Мне удалось воссоздать весь продукт, используя PHP / Imagick, за исключением одной вещи, если кто-то добавляет текст на страницу под углом, угол не работает с координатами x / y, переданными Fabric.js, Я пытался работать с настройками originX / originY, и это, похоже, не оказало никакого влияния.

Ниже приведен код:

$print = new Imagick();
$print->setResolution(72, 72);
$print->newImage(894, 765, new ImagickPixel('#ffffff'));
foreach ($printData[0]->elements as $i => $object) {
if($object->type == 'image'){
$img = $object->source;
$src = new Imagick($img);

$size = $src->getImageGeometry();

$resizeWidth = ($object->parameters->width * $object->parameters->scaleX);
$resizeHeight = ($object->parameters->height * $object->parameters->scaleY);
$src->resizeImage($resizeWidth, $resizeHeight, Imagick::FILTER_LANCZOS, 1);
$sizeAfterResize = $src->getImageGeometry();

if($object->parameters->flipX){
$src->flopImage();
}

if($object->parameters->flipY){
$src->flipImage();
}

if($object->parameters->angle > 0){
$src->rotateImage(new ImagickPixel('transparent'), $object->parameters->angle);
$sizeAfterRotate = $src->getImageGeometry();
}

if($object->parameters->fill != ''){
$color = new ImagickPixel($object->parameters->fill);

$opacityColor = new ImagickPixel("rgba(0, 0, 0, 1)");
$src->colorizeImage($color, $opacityColor);
}$src->evaluateImage(Imagick::EVALUATE_MULTIPLY, $object->parameters->opacity, Imagick::CHANNEL_ALPHA);

$left = $object->parameters->left;
$top = $object->parameters->top;

$left= ($left-($resizeWidth/2));
$top = ($top-($resizeHeight/2));

$print->compositeImage($src, Imagick::COMPOSITE_DEFAULT, $left, $top);
} else {
$draw = new ImagickDraw();
$color = new ImagickPixel($object->parameters->fill);
$foundFont = false;
foreach($fonts as $name => $file){
if($name == $object->parameters->fontFamily){
$draw->setFont('fonts/custom/ttf/'.$file);
$foundFont = true;
continue;
}
}
if(!$foundFont) $draw->setFont('fonts/'.$object->parameters->fontFamily.'.ttf');

$draw->setFontSize($object->parameters->fontSize);
//$draw->setFontSize(32);
$draw->setFontWeight(($object->parameters->fontWeight == 'bold') ? 600 : 100 );
$draw->setFontStyle(0);
$draw->setFillColor($color);
$draw->setStrokeAntialias(true);
$draw->setTextAntialias(true);
//$draw->setGravity(Imagick::GRAVITY_CENTER);
$draw->setTextAlignment(Imagick::ALIGN_CENTER);if($object->parameters->stroke){
$draw->setStrokeColor($object->parameters->stroke);
$draw->setStrokeWidth($object->parameters->strokeWidth);
$draw->setStrokeAntialias(true);  //try with and without
}

$metrics = $print->queryFontMetrics($draw, $object->parameters->text);

$realleft = round($object->parameters->left);
$realtop = round($object->parameters->top);

$top = $realtop;
$left = $realleft;

$print2 = new Imagick();
$print2->setResolution(72, 72);

$print2->newImage(894, 765, new ImagickPixel('#00000000'));
$print2->setImageVirtualPixelMethod( imagick::VIRTUALPIXELMETHOD_BACKGROUND );

$print2->annotateImage($draw, $left, $top, $object->parameters->angle, $object->parameters->text);

if($object->parameters->flipX == 1) $print2->flopImage(); // x
if($object->parameters->flipY == 1) $print2->flipImage(); // y

$print2->trimImage(0);
$print2->setImagePage(0, 0, 0, 0);

$d = $print2->getImageGeometry();

$left-=($d['width']/2);
$top-=($d['height']/2);

$print->compositeImage($print2, Imagick::COMPOSITE_DEFAULT, $left, $top);
}
}

Мне пришлось добавить текст в изображение, а затем добавить это изображение в элемент из-за нескольких функций, которые я не смог найти для текста, таких как флип и флоп. Если текстовый элемент не имеет угла, изображения прекрасно воссоздаются между Fabric.js и Imagick.

ожидание

реальность

Если вы посмотрите на него, то увидите, что поворот приводит к тому, что текст находится в другом месте между Imagick и Fabric.js. Эта проблема более заметна на некоторых шрифтах, чем на других.

Я мог бы упустить что-то действительно легкое, но я просто не вижу этого, и это сводит меня с ума. На данный момент я только что отключил возможность вращать текст в инструментах дизайна, однако это не идеальное решение.

Просто чтобы уточнить это не дубликат PHP / Imagick: Как создать большое (высокое качество 300 dpi) изображение из JSON / массива данных (ширина, высота, x, y, ангелы) с помощью PHP ImageMagic / Imagick, это не решает проблему углов при добавлении текста.