[英]FabricJS: How to manually set object width and height
我有一個織物矩形,我想手動更改寬度和高度。 下一個問題是:當我第一次使用縮放調整 rect 大小時,它會按預期調整大小,但是在此之后我嘗試更改輸入中的值 - 矩形以錯誤的尺寸重新呈現,但 javascript object 中的寬度和高度值正確.
代碼:
<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();
});
找到了解決方案,也許這會對某人有所幫助。 當我們監聽寬度/高度的變化時,我們還應該考慮當前的比例值。
w.addEventListener('change', (e) => {
const scale = rect.getObjectScaling();
rect.set('width', parseInt(e.target.value) / scale.scaleX);
rect.setCoords();
rect.requestRenderAll();
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.