Question

我正在使用Fabric.js并且我动态地更改画布大小，因此我需要使用适当的对象缩进（按百分比取决于画布大小）向上和向左缩放所有画布对象。我如何设置顶部和左侧对象的位置百分比？

就像在css中一样：

上：32％左：10％

＆＃13;

// set canvas size dynamically by resize event
this.canvas.setWidth(size.width);
this.canvas.setHeight(size.height);

＆＃13;

Answer 1

在我看来，你应该有两个值来计算调整大小。

initialCanvasWidth和finalCanvasWidth。

假设您在页面加载中有initialCanvasWidth值。您可以通过以下函数计算每个调整大小的调整大小：

    this.canvas.setWidth(newWidth).setHeight(newHeight)

通过使用div包装画布并在调整大小后使用其新宽度，可以设置新的画布宽度和高度（在setCanvasSizeAndPosition函数中）

    scaleObjectsOnCanvas(resizeRatio) {
        const objects = canvas.getObjects()
        for (let i = 0; i < objects.length; i++) {
            objects[i].left = objects[i].left * resizeRatio
            objects[i].top = objects[i].top * resizeRatio
            objects[i].scaleX = objects[i].scaleX * resizeRatio
            objects[i].scaleY = objects[i].scaleY * resizeRatio
        }
        this.canvas.renderAll()
    }

我认为您还需要在开头存储画布的宽高比，以便计算newHeight值

设置新的画布大小后，您可以继续在画布上缩放和定位对象（scaleObjectsOnCanvas函数）

var a = function () {
    console.log( 'function a' );

    this._require(function(){
       b( 123456 );
    });
};

a.prototype._require = function (callback) {
    var xhr = new XMLHttpRequest();

    xhr.onload = function (e) {
        var script = document.createElement('script');
        script.innerHTML = e.target.responseText;
        document.getElementsByTagName('head')[0].appendChild(script);
        callback();
    };

    xhr.open('GET', 'import2.js', true);
    xhr.send();
};

new a();

希望有所帮助。

这是响应式canvas / fabric.js使用的official docs of USER

Fabric js如何设置百分比对象的位置

1 个答案: