javascript - Fabric.js 调整对象大小无法正常工作

Question

我无法调整对象的大小我正在使用两个输入，从中获得新的宽度和高度，并将该输入值用作新高度，并且用于活动对象和对象容器正在调整大小，但内容不是。

(function() {
    var canvas = this.__canvas = new fabric.Canvas('canvas');
  var imgURL = 'http://i.imgur.com/8rmMZI3.jpg';
    // create a rectangle with a fill and a different color stroke
    
    var pugImg = new Image();
pugImg.onload = function (img) {    
    var pug = new fabric.Image(pugImg, {
     
        width: 500,
        height: 500,
        left: 50,
        top: 70,
        scaleX: .25,
        scaleY: .25
    });
    canvas.add(pug);
};
pugImg.src = imgURL;
    
    
    
    canvas.renderAll();   
    
    
    
$('#objSetterWidth, #objSetterHeight').bind('input', function() { 	
   
  o = canvas.getActiveObject();
	w = $('#objSetterWidth').val();
	h = $('#objSetterHeight').val();
	o.width  =  w / o.scaleX
	o.height =  h / o.scaleY
  o.setCoords();
	canvas.renderAll();    
	
	
});
    
    
    
    
    
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-6">
		 <input type="number" class="form-control form-control-sm" placeholder="Width" id="objSetterWidth">
		</div>
		<div class="form-group col-md-6">
		 <input type="number" class="form-control form-control-sm" placeholder="Height" id="objSetterHeight">
		</div>	
    
    <canvas id="canvas" width="800" height="600"></canvas>

标签： javascriptjqueryfabricjs

Answer 1

这就是width/height要做的 - 他们不会调整原始图像的大小，而是调整容器的大小，有效地“裁剪”原始图像。您要做的是让fabric 根据图像的原始尺寸设置widthandheight并缩放对象 - 这样您将影响图像容器和图像本身。您也不需要width传入height构造Image函数。如果您想立即添加图像并缩放到特定大小，请使用scaleToWidth()或scaleToHeight()。

无论如何，这是通过输入调整图像大小的代码：

(function() {
  var canvas = this.__canvas = new fabric.Canvas('canvas');
  var imgURL = 'http://i.imgur.com/8rmMZI3.jpg';
    // create a rectangle with a fill and a different color stroke
  var pugImg = new Image();
pugImg.onload = function (img) {  
  var pug = new fabric.Image(pugImg, {
      //width: 500, //- you don't need this unless you want to 'crop'
      //height: 500, //- you don't need this unless you want to 'crop'
      left: 50,
      top: 70,
      scaleX: .25,
      scaleY: .25
    });
    canvas.add(pug);
    canvas.renderAll();
  };
  pugImg.src = imgURL;
    
  $('#objSetterWidth, #objSetterHeight').bind('input', function() {
    var o = canvas.getActiveObject();
    // if no object selected, do nothing
    if (!o) {
      return
    }
    var w = $('#objSetterWidth').val();
    var h = $('#objSetterHeight').val();
    // get the original image dimensions
    var originalW = o.getOriginalSize().width;
    var originalH = o.getOriginalSize().height;
    // if w input is empty, don't scale width
    if (w) {
      o.set('scaleX', w / originalW);
    }
    // if h input is empty, don't scale height
    if (h) {
      o.set('scaleY', h / originalH);
    }
    o.setCoords();
    canvas.renderAll();
  });
    
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-6">
		 <input type="number" class="form-control form-control-sm" placeholder="Width" id="objSetterWidth">
		</div>
		<div class="form-group col-md-6">
		 <input type="number" class="form-control form-control-sm" placeholder="Height" id="objSetterHeight">
		</div>	
    
    <canvas id="canvas" width="800" height="600"></canvas>