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不适用于滑块控件

1 个答案: