fabric.js нестандартный размер отображаемого изображения с помощью toDataUrl ()

Question

Я внедряю доску в существующее приложение, которое оптимизировано для огромных сенсорных экранов (дисплей NEC). Сам холст находится в виджете, размер которого можно изменить, это означает, что видимая часть холста может варьироваться от 400x500 пикселей до полноэкранного размера. Однако корректируется только область просмотра, холст всегда имеет полноэкранный размер в beackround (и выровнен по верхнему левому углу виджета), поэтому объекты не искажаются по размеру и соотношению при изменении размера виджета. Это означает, что при рендеринге изображения с помощью canvas.toDataUrl('png') изображение всегда имеет одинаковый размер.

Теперь мы хотим добавить функцию, позволяющую прокручивать сам холст, для простоты предположим, что его размер составляет 3x3 на весь экран, то есть если вам нужно больше места, вы можете прокрутить один размер экрана влево или вправо, соответственно. сверху или снизу. Это не сложно, но теперь мы подходим к моему вопросу:

Можно ли настроить функцию рендеринга, чтобы изображение отображалось не по всему размеру холста, а по размеру "ограничительной рамки" всех элементов, соответственно? только выбранные элементы? Вот изображение, чтобы объяснить:

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

По-настоящему хакерским способом было бы следующее, но я не уверен, есть ли более простой способ:

1. создать невидимый "imageRenderCanvas"
2. при рендеринге, рассчитать верхний и левый крайние уголки, правый и нижний крайний угол, вычислить размер этой «ограничительной рамки» и добавьте 2 x отступа к каждой стороне и установите этот размер на imageRenderCanvas
3. поместить (выбранные) объекты в положение 0+padding / 0+padding
4. визуализировать холст как изображение

Есть ли другой способ сделать это?

Answer 1

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

renderSelection() {
    const selectedObject = fabric.util.object.clone(this.canvas.getActiveObject());
    const defaultPadding = 100;
    this.dynamicCanvas = new fabric.Canvas('#dynamicCanvas', {
        preserveObjectStacking: true
    });

    if ( selectedObject.type !== 'activeSelection') {
        this.renderSingleSelectionDynamicCanvas(selectedObject, defaultPadding);
    } else {
        this.renderMultiSelectionCanvas(selectedObject, defaultPadding);
    }

    const renderedImage = this.dynamicCanvas.toDataURL('image/png');
}

renderSingleSelectionDynamicCanvas(selectedObject: any, defaultPadding: number) {
    const totalWidth = selectedObject.width * selectedObject.scaleX;
    const totalHeight = selectedObject.height * selectedObject.scaleY;
    this.dynamicCanvas.setWidth(totalWidth + 2 * defaultPadding);
    this.dynamicCanvas.setHeight(totalHeight + 2 * defaultPadding);
    selectedObject.set({
        left: defaultPadding,
        top: defaultPadding
    });
    this.dynamicCanvas.add(selectedObject);
    this.dynamicCanvas.renderAll();
}

renderMultiSelectionCanvas(multiSelectionObject: any, defaultPadding: number) {
    const clonedObjects: Array<any> = [];
    multiSelectionObject.forEachObject( obj => {
        clonedObjects.push(fabric.util.object.clone(obj));
    });

    const group = new fabric.Group(clonedObjects, {
        left: defaultPadding,
        top: defaultPadding,
        width: multiSelectionObject.width,
        height: multiSelectionObject.height,
        originX: multiSelectionObject.originX,
        originY: multiSelectionObject.originY,
        scaleX: multiSelectionObject.scaleX,
        scaleY: multiSelectionObject.scaleY
    });
    const totalWidth = multiSelectionObject.width + 2 * defaultPadding;
    const totalHeight = multiSelectionObject.height + 2 * defaultPadding;
    this.dynamicCanvas.setWidth(totalWidth);
    this.dynamicCanvas.setHeight(totalHeight);
    this.dynamicCanvas.add(group);
    this.dynamicCanvas.renderAll();
}