Как обнаружить средние контрольные точки внутреннего прямоугольника, выходящие за пределы прямоугольника контейнера в Fabricjs - PullRequest
0 голосов
/ 24 февраля 2019

У меня есть два прямоугольника, один синий прямоугольник, который содержит красный прямоугольник.Когда пользователь перетаскивает средние контрольные точки внутреннего прямоугольника (красный прямоугольник), как определить, перемещаются ли контрольные точки из прямоугольника контейнера?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>

Заранее спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...