Как создать рисунок из PHP в Fabric.js?

Question

[Tereverda]

На стороне PHP создается логика чертежа, затем передается через JSON в fabric.js для отображения.
Создал линию, но она отображается, только при выделении холста, нужно, чтобы изначально отображалось.
Копировал линию из JS, то же самое, явно что-то в моменте рендеринга, но не понимаю, как исправить
canvas.loadFromJSON(dieline, function() {
canvas.renderAll();
});

// Создаем линию
$crease_1 = [
            'type'        => 'line',
            // Относительные координаты точек
            'x1'          => 0,     // относительно left
            'y1'          => 0,     // относительно top
            'x2'          => 200,   // относительно left
            'y2'          => 0,     // относительно top
            'stroke'      => 'black', // self::$creasingColor цвет линии
            'strokeWidth' => 2,     // толщина линии
        ];

<canvas id="canvas" width="800" height="600" data-dieline="{{ json_encode($dieline) }}"></canvas>

// Отображаем линию
import * as fabric from 'fabric';

// Загружаем данные
let dataCanvas = document.getElementById('canvas');
let dieline    = dataCanvas.dataset.dieline;
dieline        = JSON.parse(dieline);

const canvas = new fabric.Canvas('canvas');

canvas.loadFromJSON(dieline, function() {
    canvas.renderAll();
});

// json из консоли
{
    "objects": [
        {
            "type": "group",
            "left": 100,
            "top": 100,
            "objects": []
        },
        {
            "type": "line",
            "x1": 0,
            "y1": 0,
            "x2": 200,
            "y2": 0,
            "stroke": "black",
            "strokeWidth": 2
        }
    ]
}

Answer 1

[Gosha04ye]

Похоже, ты просто не добиваешься нормального первого рендера. В Fabric такое бывает: объект загрузился, но холст не перерисовали, и линия проявляется только когда ты что-то трогаешь.

Что сработало у меня в похожей ситуации:

1. Дай линии явные left/top (а x1/y1/x2/y2 оставь относительными):

{
  "type": "line",
  "left": 100,
  "top": 100,
  "x1": 0, "y1": 0,
  "x2": 200, "y2": 0,
  "stroke": "black",
  "strokeWidth": 2
}

2. Рендер после loadFromJSON — именно requestRenderAll() и обнови координаты:

const canvas = new fabric.Canvas('canvas', { renderOnAddRemove: false });

canvas.loadFromJSON(dieline, () => {
  canvas.forEachObject(o => o.setCoords());
  canvas.requestRenderAll();
});

3. Если суёшь JSON в data-*, убедись, что он не покоцан HTML-энтитями:

data-dieline='<?= json_encode($dieline, JSON_HEX_APOS|JSON_HEX_QUOT) ?>'

Лишние пустые группы в JSON убери (у тебя там {"type":"group","objects":[]}) — они не мешают, но и пользы ноль.

После этих правок линия должна быть видна сразу, без потыкать холст.