FabricJS:如何手动设置对象的宽度和高度
FabricJS:如何手动设置对象的宽度和高度
提问于 2020-05-15 17:28:17
我有一个织物长方形，我想手动改变宽度和高度。问题是下一个问题:当我第一次通过缩放调整rect大小时，它使大小按预期调整，但在此之后，我尝试更改输入中的值--尺寸错误的矩形重选器，但是javascript对象中的宽度和高度值是正确的。
代码：
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
<canvas id="draw"></canvas>
width:<input type="number" id="w" value="50">var w = document.getElementById('w');
var c = new fabric.Canvas('draw');
var rect = new fabric.Rect({
top: 50,
left: 50,
width: parseInt(w.value),
height: parseInt(h.value),
fill: 'lightblue',
type: 'rect'
});
c.add(rect);
c.renderAll();
c.on('object:scaling', function(e) {
var width = parseInt(e.target.width * e.target.scaleX);
w.value = width;
});
w.addEventListener('change', function(e) {
rect.set('width', parseInt(e.target.value));
rect.setCoords();
c.requestRenderAll();
});
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-05-16 13:30:10
找到了解决办法也许这能帮上忙。当我们聆听宽度/高度的变化时，我们也应该考虑到当前的比例值。
w.addEventListener('change', (e) => {
const scale = rect.getObjectScaling();
rect.set('width', parseInt(e.target.value) / scale.scaleX);
rect.setCoords();
rect.requestRenderAll();
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61825070
复制相关文章
相似问题
腾讯云开发者
