Question

我正在尝试使用fabricjs将图像添加到我的canvas元素中，我需要能够按百分比设置/调整大小而不是设置像素。

var canvas = new fabric.Canvas('canvas');
fabric.Image.fromURL('http://s17.postimg.org/4740ku7z3/i_Stock_000000284123_XSmall.jpg',     function (oImg) {
    oImg.setWidth(480);
    oImg.setHeight(360);
    canvas.add(oImg);
});

无论如何我可以在setWidth()和setHeight()内有一个百分比吗？我想将它设置为画布容器的百分比，所以我希望图像宽度始终是画布的60％（画布是动态的，可以是不同的数量）所以在这个实例480中，画布宽度为800但如果画布是600等于360宽度

当我尝试插入setWidth('60%')

时，我收到了意外的令牌

Answer 1

您可以设置从画布大小计算的值：

var canvas = new fabric.Canvas('canvas');
var percentage = 0.6;

fabric.Image.fromURL('http://s17.postimg.org/4740ku7z3/i_Stock_000000284123_XSmall.jpg', function (oImg) {
    oImg.scaleToWidth(canvas.width*percentage);
    console.log("Image width: ", oImg.currentWidth);
    canvas.add(oImg);
});

这是一个更新的小提琴http://jsfiddle.net/F2P9Y/4/ 问候，贝尼克

Fabric.js - 使用图像/对象大小的百分比

1 个答案: