centeredScaling is not working with slider control

centeredScaling is not working with slider control.

It works when we scale object manually by using object's corner.

I want scale object using slider control in my project.

Solution

There is no centered scaling if not for the built in mouse inteaction. When you scale by code, you should take care of object position manually.

Here is how you do it:

$(document).ready(function(){

var canvas = window._canvas = new fabric.Canvas('can');
canvas.set({
		fireRightClick: true,
		stopContextMenu: true,
		preserveObjectStacking: true,
    stateful: false,
		centeredScaling: false,
		
	});
  
var initText = new fabric.Text("Good Morning", {
				left: 170,
				top: 120,
				fill: '#000',
				fontSize: 40,
				textAlign: 'center',
				centeredScaling: true,
				fontFamily: 'Arial',
				hasRotatingPoint: false,
				minScaleLimit:0.4,
				flipX: false,
				flipY: false,
				padding: 10,
				isClick: true,
			});
			
			initText.setControlsVisibility({
				mt: false,
				mb: false,
				ml: false,
				mr: false,
				tr: true,
				tl: true,
				br: true,
				bl: true
			});
			initText.hasRotatingPoint = false;
					 canvas.add(initText).bringToFront(initText).renderAll();
			initText.center();
			initText.setCoords();
      

$("#slider").slider({
		min: 0.3,
		max: 5,
		step:0.1,
		animate: "fast",
		change: function( event, ui ) {
			var obj = canvas.getActiveObject();
			if (obj) {		
				//if(activeObject.type === "text"){
					objscale = obj.scaleX;
					if(obj.scaleX == obj.scaleY){
						objscale = obj.scaleX;
					}	
			}
			
		},
		slide: function( event, ui ) {
			var obj = canvas.getActiveObject();
			if (obj) {		
					var slider_scale = $(this).slider("value");
					objscale = slider_scale;
					
					if(objscale != "" && objscale > 0){
            var center = obj.getCenterPoint();
						obj.scale(parseFloat(objscale));
            obj.setPositionByOrigin(center, 'center', 'center');
						//obj.center().setCoords();
						canvas.requestRenderAll();
					}		
			}
			
		},
	});
  
});

body {
  background: #20262E;
  font-family: Helvetica;
}

#can {
  background: #fff;
  border-radius: 4px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<html>
<head>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
  <canvas id="can" width="600" height="200"></canvas>
<br><br>
 <div class="text-size" style="text-align:center;">
			<div id="slider"></div>
  </div>
</body>
</html>