缩放面料js画布及其所有对象

我正在使用一个函数来缩放整个fabric.js画布，此函数以百分比形式提供值，如zoomCanvas（2.2）;其中2.2意味着220％，而不是百分比我需要按比例缩放画布以适应容器中的画布，例如，当画布从json数据加载到页面上时，其初始大小为1200px x 700px，容器大小为500px。现在我需要找到一种方法，可以将500px转换为百分比值，以便整个canvas及其所有对象都适合500px。缩放面料js画布及其所有对象

这是缩放功能，其中的因素是百分比值

function zoomCanvas(factor) { 
canvas.setHeight(canvas.getHeight() * factor); 
canvas.setWidth(canvas.getWidth() * factor); 
if (canvas.backgroundImage) { 
    // Need to scale background images as well 
    var bi = canvas.backgroundImage; 
    bi.width = bi.width * factor; bi.height = bi.height * factor; 
} 
var objects = canvas.getObjects(); 



var tcounter = 0; 

for (var i in objects) { 

    tcounter++; 


    //alert(tcounter); 
    var scaleX = objects[i].scaleX; 
    var scaleY = objects[i].scaleY; 
    var left = objects[i].left; 
    var top = objects[i].top; 

    var tempScaleX = scaleX * factor; 
    var tempScaleY = scaleY * factor; 
    var tempLeft = left * factor; 
    var tempTop = top * factor; 

    objects[i].scaleX = tempScaleX; 
    objects[i].scaleY = tempScaleY; 
    objects[i].left = tempLeft; 
    objects[i].top = tempTop; 

    objects[i].setCoords(); 
} 
canvas.renderAll(); 
canvas.calcOffset(); 
}

来源

2017-06-12 sunil kumar

你需要吗从1200x700像素转换为500x500像素？ – Observer

感谢您的回复...没有它只是一个示例容器大小将在不同的设备上不同 –

您应该具备一些尺寸的帆布面料。从那张画布上你应该找到你的因子X和因子Y值。例如，您的原始画布是1280x1020像素，您需要转换为尺寸500x500px。

var factorX = 500/1280; 
var factorY = 500/1020;

比，修改你的功能从

到

function zoomCanvas(factorX, factorY) {...}

使用factorX的宽度值，以及工厂的高度值。

来源

2017-06-12 14:34:23 Observer

哇，它完美的作品非常感谢你:) –

您需要的比例因子为：

scaleRatio = Math.min(containerWidth/canvasWidth, containerHeight/canvasHeight);

要放大你的画布，你真的应该只使用：

canvas.setDimensions({ width: canvas.getWidth() * scaleRatio, height: canvas.getHeight() * scaleRatio });

然后

canvas.setZoom(scaleRatio)

自定义缩放功能不应该需要

来源

2017-06-17 18:53:03 AndreaBogazzi

缩放面料js画布及其所有对象

回答

相关问题