centeredScaling 不适用于滑块控件

Question

centeredScaling 不适用于滑块控件。

当我们使用对象的角手动缩放对象时，它有效。

我想在我的项目中使用滑块控件来缩放对象。

Answer 1

如果不是内置的鼠标交互，就没有居中缩放。按代码缩放时，您应该手动处理对象位置。

这是您的操作方法：

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

centeredScaling 不适用于滑块控件

centeredScaling is not working with slider control

jquery

slider

fabricjs

fabricjs2