Блог

Я использую точно такой же код javascript для NodeJS и HTML-файла с Javascript, который вы можете увидеть здесь https://jsfiddle.net/4th8poa9 /

 fabric.Object.prototype.set({
    cornerSize: 22,
    borderColor: 'rgba(205,205,205,0.5)',
    centeredRotation: true,
    centeredScaling: true,
    rotatingPointOffset: 0,
});
fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';
fabric.Object.prototype.transparentCorners = false;

var canvas = new fabric.Canvas('stage', {
    width: 1288,
    height: 1288,
    preserveObjectStacking: true,
    controlsAboveOverlay: true,
    enableRetinaScaling: false,
});

var data = {
    "stages": {
        "SP": {
            "data": {
                "objects": [{
                    "type": "i-text",
                    "originX": "center",
                    "originY": "center",
                    "left": 331.3,
                    "top": 126.2,
                    "width": 131.37,
                    "height": 33.9,
                    "fill": "#FFFFFF",
                    "visible": true,
                    "text": "Text Layer",
                    "fontSize": "30",
                    "fontWeight": "normal",
                    "fontFamily": "Nerko One",
                    "fontStyle": "",
                    "lineHeight": 1.16,
                    "evented": true,
                   "name": "Text Layer",
                   "styles": {}
                }],
                "limit_zone": {
                    "width": 191,
                    "height": 254,
                    "top": 109,
                    "left": 260
                },
                "product_width": 437,
                "product_height": 437
            },
        }
    },
}

var j = 1288;
var pw = 1288

var editing = {
    width: 564,
    height: 751,
    top: 53,
    left: 12
 };

var limit_zone = {}

fabric.util.loadImage('https://core.simpleprint.com/cdn/xx/gildan_64000_black.jpg', function (a) {
    var i = new fabric.Image(a);

    i.set({
        left: canvas.width / 2,
        top: (canvas.height) / 2,
        width: 1288,
        height: 1288,
        selectable: false,
        evented: false,
    });

    limit_zone = new fabric.Rect({
        fill: 'transparent',
        left: ((canvas.width / 2)   editing.left) - (editing.width / 2),
        top: (((j / 2)   editing.top) - (editing.height / 2)),
        height: editing.height,
        width: editing.width,
        originX: 'left',
        originY: 'top',
        stroke: '#ffffff',
        strokeDashArray: [5, 5],
        selectable: false,
        evented: false,
        visible: true,
        radius: 0,
        rx: 0,
        ry: 0,
    });

    canvas.add(i, limit_zone)

    let xCenter = data.stages.SP.data.limit_zone !== undefined ? data.stages.SP.data.limit_zone.left   (data.stages.SP.data.limit_zone.width / 2) : 0,
        yCenter = data.stages.SP.data.limit_zone !== undefined ? data.stages.SP.data.limit_zone.top   (data.stages.SP.data.limit_zone.height / 2) : 0;
    xCenter = xCenter !== 0 ? (limit_zone.left   (limit_zone.width / 2)) - xCenter : 0;
    yCenter = yCenter !== 0 ? (limit_zone.top   (limit_zone.height / 2)) - yCenter : 0;

    var scale = (data.stages.SP.data.product_height ? 1288 / data.stages.SP.data.product_height : 1);

    var o = extend({
        stroke: '',
        strokeWidth: 0,
        scaleX: 1,
        scaleY: 1,
        angle: 0,
        skewX: 0,
        skewY: 0,
        left: limit_zone.left   (limit_zone.width / 2),
        top: limit_zone.top   (limit_zone.height / 2)
    }, data.stages.SP.data.objects[0]);

    o.top  = yCenter;
    o.left  = xCenter;

    var d = limit_zone,
        _ops = extend({
            left: d.left   (d.width / 2),
            top: d.top   (d.height / 2),
            name: o.text ? o.text : 'Sample Text'
        }, o)


    var object = new fabric.IText(o.text ? o.text : 'Sample Text', _ops);

    canvas.add(object);

    if (scale !== 1) {
        objs = canvas.getObjects().filter(function (o) {
            if (o.evented === true) {
                o.set('active', true);
                return true
            } else return false
        });

        if (objs.length === 0) {
            return false
        };
        var d = new fabric.Group(objs, {
            scaleX: scale,
            scaleY: scale,
            originX: 'center',
            originY: 'center'
        });


        var e = (limit_zone.width / 2)   limit_zone.left,
            yl = (limit_zone.height / 2)   limit_zone.top;


        d.set({
            left: e - ((e - d.left) * scale),
            top: yl - ((yl - d.top) * scale)
        })


        canvas._activeObject = null;

        d.setCoords()

        canvas.renderAll()
    }
}, null, {
    crossOrigin: 'Anonymous'
})


function extend() {
    for (var i = 1; i < arguments.length; i  )
        for (var key in arguments[i])
            if (arguments[i].hasOwnProperty(key))
                arguments[0][key] = arguments[i][key];
    return arguments[0];
}
 

В структуре браузера холст отображается так, как и должно быть, но в NodeJS есть проблема: текстовый объект, похоже, имеет гораздо больший интервал между символами. Я прикрепляю изображение, как оно выглядит в NodeJS

Я использую некоторые вычисления для изменения размера объектов

Я думаю, что проблема в этом фрагменте кода

 var d = new fabric.Group(objs, {
        scaleX: scale,
        scaleY: scale,
        originX: 'center',
        originY: 'center'
    });
 

Он масштабирует ширину и высоту объекта, но также масштабирует интервал между символами. Как предотвратить это, как сохранить интервал между символами по умолчанию?