【问题标题】:Resize canvas and object wrong top calculation调整画布大小和对象错误的顶部计算
【发布时间】:2019-08-03 04:11:59
【问题描述】:

我正在尝试调整画布和其中的所有对象的大小。 加载 Json 并设置画布的主要宽度和高度后,我只是尝试调整画布大小。 调整画布和对象的大小后,一些对象不尊重最高值(或者不是在我的函数中正确计算)。

我正在使用 fabricjs 1.7.7

var j      = JSON.parse(json);
setTimeout(function(){
        canvas.loadFromDatalessJSON(JSON.stringify(j), canvas.renderAll.bind(canvas), function(o, object){
    });
    setTimeout(function(){
            var newWidth    =   500;
        if (canvas.width != newWidth) {
          var scaleMultiplier = newWidth / canvas.width;
          var objects = canvas.getObjects();
          var factorX = newWidth / canvas.getWidth();
          var factorY = newWidth / canvas.getHeight();
          for (var i in objects) {
              objects[i].scaleX = objects[i].scaleX;
              objects[i].scaleY = objects[i].scaleY;
              objects[i].left = factorX * objects[i].left;
              objects[i].top = factorY * objects[i].top ;
              objects[i].setCoords();
          };

          canvas.setWidth(canvas.getWidth() * factorX);
          canvas.setHeight(canvas.getHeight() * factorY);
          canvas.renderAll();
          canvas.calcOffset();
      };
    }, 3000);
}, 2000);

这是一个小提琴:http://jsfiddle.net/W3b3r/3stbg75d/

(在这个小提琴中,首先显示加载 json 的结果和调整大小的结果之后有一些超时) 在这种情况下,我得到了一些调整大小后位置不同的元素。

我也只尝试了不缩放的命令 centerH(),但结果是一样的,我从视口中得到了一些图片。

提前致谢。 最好的。

【问题讨论】:

    标签: javascript fabricjs fabricjs2


    【解决方案1】:

    这里有一个解决方案: http://jsfiddle.net/6eb2skx7/1/ 您需要将object.scaleXobject.scaleYfactorX 相乘

    【讨论】:

    • 嗨 Marius,感谢您的帮助,但我的调整大小是 500 x 500 像素,我需要将所有图像调整到完整的画布宽度和高度。如果我 scaleY 和 scaleX 渲染的图片是最小的 500 x 500 px
    猜你喜欢
    • 2018-03-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-08-16
    相关资源
    最近更新 更多