我在调整图像大小方面遇到问题。我想调整图像大小但不保持比例。当我使用 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
基本上减半然后减去给定的值。
这是为什么?
最佳答案
代码片段看起来不错。
我想不出任何其他获得不同值(value)的理由,
请查看比例属性 img.scaleX
和 img.scaleY
并确保它们等于 1,否则会导致问题。
祝你好运
关于javascript - Fabric.js setHeight() 和 scaleToHeight() 给出不同的高度值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30384643/