Fabric js画布转换成pdf(TCPPDF)

Question

我使用 fabric.js 来绘制一些明信片（背景、图像、文本）。我想根据这张卡创建pdf。所以我将 json 对象发送到 php 并使用 foreach 来获取所有元素。但是当我以相同的分辨率（761x430）创建文档并从 json 设置边距、位置和其他值时，pdf 中的对象位置与织物 js 中的位置不同。所以我应该做的是，我的 pdf 中的位置与画布上的位置相同。 要创建 pdf，我使用 TCPDF。

JSON 文件

{"objects":[{"type":"text","originX":"center","originY":"center","left":531.22,"top":249,"width":115,"height":31.2,"fill":"e2ddcf","stroke":null,"strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1.14,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","text":"MOJE TŁO","fontSize":24,"fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"normal","lineHeight":1.3,"textDecoration":"","textAlign":"left","path":null,"textBackgroundColor":"","useNative":true},{"type":"image","originX":"center","originY":"center","left":63,"top":304,"width":66,"height":66,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":340.06,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","src":"src_to_picture","filters":[]}],"background":"cyan","backgroundImage":"src_to_my_picture","backgroundImageOpacity":1,"backgroundImageStretch":true}

PHP 代码

$pdf = new MYPDF("L", "px", array(761, 430), true, 'UTF-8', false, false, $objects->backgroundImage, $objects->background);
    $pdf->SetCreator(PDF_CREATOR);
    $pdf->SetLeftMargin(0);
    $pdf->SetRightMargin(0);
    $pdf->SetHeaderMargin(0);
    $pdf->SetFooterMargin(0);
    $pdf->setPrintFooter(false);
    #$pdf->setPrintHeader(false);
    $pdf->AddPage();
    foreach ($objects->objects as $object) {
        $pdf->StartTransform();
        switch ($object->type) {
            case 'text':
                $align = $this->setAlign($object->textAlign);
                $style = $this->setStyle($object->fontStyle);
                $newColor = $this->hex2RGB($object->fill);
                $pdf->setXY($object->left, $object->top);
                $pdf->SetFont("times", $style, $object->fontSize);
                $pdf->SetTextColor($newColor['red'], $newColor['green'], $newColor['blue']);
                $pdf->MultiCell(0, $object->height, $object->text, 0, $align, false, 1, '', '', true, 0, false, true, 0, 'T', false);
                break;
            case 'image':
                $pdf->setXY($object->left, $object->top);
                $pdf->Rotate(360-$object->angle);
                $pdf->Image($object->src, $object->left, $object->top, $object->width, $object->height, '', '', '', false, 300, '', false, false, 0);
                break;
            default:
                break;
        }
        $pdf->StopTransform();
    }
    $pdf->Close();
    echo $pdf->Output('test.pdf', 'D');

Answer 1

好吧，它可以工作，让这段代码工作很容易：D left 和 top 是从对象的中心给出的，所以足够的左边距使用减去对象宽度的一半就可以了

$pdf = new MYPDF("L", "px", array(761, 430), true, 'UTF-8', false, false, $objects->backgroundImage, $objects->background);
$pdf->SetCreator(PDF_CREATOR);
$pdf->SetLeftMargin(0);
$pdf->SetRightMargin(0);
$pdf->SetHeaderMargin(0);
$pdf->SetFooterMargin(0);
$pdf->setPrintFooter(false);
#$pdf->setPrintHeader(false);
$pdf->AddPage();
foreach ($objects->objects as $object) {
    $pdf->StartTransform();
    $left = $object->left - ($object->width/2);
    $top = $object->top - ($object->height/2);
    switch ($object->type) {
        case 'text':
            $align = $this->setAlign($object->textAlign);
            $style = $this->setStyle($object->fontStyle);
            $newColor = $this->hex2RGB($object->fill);
            $pdf->setXY($left, $top);
            $pdf->SetFont("times", $style, $object->fontSize);
            $pdf->SetTextColor($newColor['red'], $newColor['green'], $newColor['blue']);
            $pdf->MultiCell(0, $object->height, $object->text, 0, $align, false, 1, '', '', true, 0, false, true, 0, 'T', false);
            break;
        case 'image':
            $pdf->setXY($left, $top);
            $pdf->Rotate(360-$object->angle);
            $pdf->Image($object->src, $object->left, $object->top, $object->width, $object->height, '', '', '', false, 300, '', false, false, 0);
            break;
        default:
            break;
    }
    $pdf->StopTransform();
}
$pdf->Close();
echo $pdf->Output('test.pdf', 'D');

如果有人对此有疑问，上面是正确的代码。