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

时间:2018-11-23 09:17:00

标签: javascript jquery fabricjs

我无法调整对象的大小,我在使用两个输入来获取新的宽度和高度,并使用该输入值作为新的高度以及用于Active Object和对象容器的大小进行调整,但内容没有调整。

(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>

1 个答案:

答案 0 :(得分:1)

width / height就是这样做的-他们不会调整原始图像的大小,而是调整容器的大小,有效地“裁剪”了原始图像。您要做的是让Fabric根据图像的原始尺寸设置widthheight并缩放对象-这样,您将同时影响图像容器和图像本身。您也不需要将widthheight传递到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>