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