从JSON加载 - 未缩放的对象？

Question

我的猜测是,这是我做错了......

使用toJSON和fromJSON方法保存和加载Fabric图形,似乎缩放的对象不会保留其缩放.

仅供参考,它创建的PNG文件看起来正确.

所以,这是保存时图像的样子:

然后,当我重新加载它:

码:

function save () {
    // Need to clear selection and remove overlay before saving.
    canvas.deactivateAll();
    if (!mask) {canvas.setOverlayImage('', canvas.renderAll.bind(canvas));}
    // If they're zoomed in, reset the image
    resetZoom();
    var name = prompt("Please enter a filename", "NewPresentation");
    var url = 'http://localhost/fabric/img/'+name+'.png';
    var stat = checkUrl(url);
    //console.log("Stat: "+stat);
    if (stat) {
        if (!confirm(url+" already exists. Do you want to overwrite the existing file?")) return false;
    }

    $.ajax({
        type: 'POST',
        url: 'save.php',
        data: {
            task: 'save', 
            img: canvas.toDataURL('png'),
            json: JSON.stringify(canvas.toJSON()),
            name: name, 
            coid: companyId,
            id: ''
        },
        success: function(json) {
            if (!json.success) {
                alert('Error!'); return;
                currPresId = json.id;
            }
        }
       });
    if (!mask) {canvas.setOverlayImage('dist/pixelmask.png', canvas.renderAll.bind(canvas));}
    list();
}

加载例程:

function loadPresentation(id) {
    console.log("We should be loading "+id);
    $.ajax({
        type: 'GET',
        url: 'loadPresentation.php',
        data: {
            id: id
        },
        success: function(json) {
            console.log("Success");
            var j = JSON.parse(json);
            canvas.loadFromJSON(j);
        }
    });
}

任何人都可以向我指出我可能会做的事情会导致这种情况吗？在此先感谢您的帮助.如果我没有给你一些你需要解决的问题,LMK,我很快就会在这里得到它.

Answer 1

弄清楚了...

scaleX/scaleY数字是四舍五入的.

来自JSON:scaleX:0.05

实际规模为scaleX:0.05203252032520325

看看fabric.js代码:

toObject: function(propertiesToInclude) {

      var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS,

          object = {
            type:               this.type,
            originX:            this.originX,
            originY:            this.originY,
            left:               toFixed(this.left, NUM_FRACTION_DIGITS),
            top:                toFixed(this.top, NUM_FRACTION_DIGITS),
            width:              toFixed(this.width, NUM_FRACTION_DIGITS),
            height:             toFixed(this.height, NUM_FRACTION_DIGITS),
            fill:               (this.fill && this.fill.toObject) ? this.fill.toObject() : this.fill,
            stroke:             (this.stroke && this.stroke.toObject) ? this.stroke.toObject() : this.stroke,
            strokeWidth:        toFixed(this.strokeWidth, NUM_FRACTION_DIGITS),
            strokeDashArray:    this.strokeDashArray,
            strokeLineCap:      this.strokeLineCap,
            strokeLineJoin:     this.strokeLineJoin,
            strokeMiterLimit:   toFixed(this.strokeMiterLimit, NUM_FRACTION_DIGITS),
            scaleX:             toFixed(this.scaleX, NUM_FRACTION_DIGITS),
            scaleY:             toFixed(this.scaleY, NUM_FRACTION_DIGITS),
            angle:              toFixed(this.getAngle(), NUM_FRACTION_DIGITS),
            flipX:              this.flipX,
            flipY:              this.flipY,
            opacity:            toFixed(this.opacity, NUM_FRACTION_DIGITS),
            shadow:             (this.shadow && this.shadow.toObject) ? this.shadow.toObject() : this.shadow,
            visible:            this.visible,
            clipTo:             this.clipTo && String(this.clipTo),
            backgroundColor:    this.backgroundColor
          };

所以,最简单的方法是设置NUM_FRACTION_DIGITS:

canvas = new fabric.Canvas('canvas', {width: w, height: h});
canvas.setBackgroundColor($('#bgcolor').val(), canvas.renderAll.bind(canvas));
fabric.Object.NUM_FRACTION_DIGITS = 17;

现在正确保存了比例.希望这有助于其他人走出困境.