如何检测内部矩形的中间控制点正在从Fabricjs中移出容器矩形

时间:2019-02-24 17:39:45

标签: html5-canvas fabricjs fabricjs2



我有两个矩形,一个是包含红色矩形的蓝色矩形。当用户拖动内部矩形(红色矩形)的中间控制点时,如何检测控制点是否从容器矩形中移出? enter image description here
这是我的代码:

var canvasObject = document.getElementById("editorCanvas");

// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());

var canvas = new fabric.Canvas('editorCanvas', {
	backgroundColor: 'white',
	selectionLineWidth: 2,
	width: $("#canvasContainer").width(),
	height: $("#canvasContainer").height()
});

// Test
var containerRect = new fabric.Rect({
	top: 50,
	left: 50,
	width: 150,
	height: 200,
	fill: 'blue',
	selectable: false
});

containerRect.rotate(35);
canvas.add(containerRect);


var innerRect = new fabric.Rect({
	top: 100,
	left: 70,
	width: 100,
	height: 100,
	fill: 'red',
	lockRotation: true,
});

innerRect.rotate(35);
canvas.add(innerRect);

innerRect.on('scaling', function(event) {
	// TODO: 'need detect when middle control points of red rectangle is moving out of blue rectangle'
	console.log('need detect when middle control points of red rectangle is moving out of blue rectangle');
});
#canvasContainer {
		  width: 100%;
		  height: 100vh;
		  background-color: gray;
		}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
  
<div id="canvasContainer">
  <canvas id="editorCanvas"></canvas>
</div>


预先谢谢你!

0 个答案:

没有答案