我有两个矩形,一个是包含红色矩形的蓝色矩形。当用户拖动内部矩形(红色矩形)的中间控制点时,如何检测控制点是否从容器矩形中移出?
这是我的代码:
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>
预先谢谢你!