我在调整图片大小时遇到​​问题。我想调整图像大小,但不保持比例。当我使用setHeight()时,它给我错误的值。

image.setHeight(100);
image.getHeight(); // gives me 140px output


当我使用缩放功能时,所有功能都是正确的,但它也可以保持图像比例

image.scaleToHeight(100);
image.getHeight(); // correct 100px output


这个测试也给了我奇怪的值:

console.log("h: " + image.getHeight()); // 348.25870646766174
image.set({ height : image.getHeight()-10 });
console.log("h: " + image.getHeight()); // 235.6030791317047


编辑:

更多代码:

var flatImage = document.getElementById("flat-image");

var canvas = new fabric.Canvas("frame-canvas",{
        width: 992,
        height: 450
});

var image = new fabric.Image(flatImage, {});
    image.selectable = false;
    // image.scaleToWidth( 250 );

canvas.add(image);
canvas.centerObject(image);
canvas.renderAll();

console.log("h: " + image.getHeight()); // 334
image.set({ height : image.getHeight()-10 });
console.log("h: " + image.getHeight()); // 324 works good


但是当我添加scaleToWidth()时,高度值变得很奇怪:

image.scaleToWidth( 250 );

console.log("h: " + image.getHeight()); // h: 166.66666666666666
image.set({ height : image.getHeight()-10 });
console.log("h: " + image.getHeight()); // h: 78.17697937458415


基本上减少一半,然后减去给定值。

这是为什么 ?

最佳答案

该代码段看起来不错。
我认为没有其他理由获得不同的价值,
请仅查看比例属性img.scaleXimg.scaleY并确保它们等于1,否则将导致问题。

祝好运

关于javascript - Fabric.js setHeight()和scaleToHeight()给出不同的高度值,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30384643/

10-11 13:43