将元素移动预定角度的最佳和最优雅的方法是什么,只是将其移出容器外?
如下图所示,我想移动元素,使其刚好位于容器之外。我只想定义一个角度来实现它。 (忽略这里的度数范围,这只是为了说明我的情况)
该元件应能够在所有角度(0-359°)移动
我通过使用Find rectangle boundary point at an angle from point that is not in the middle of the rectangle的函数解决了它。
刚刚修改了一下这个函数,所以元素完全在容器之外。
function getEdgePointBasedOnAngle(position: Position, elementSize: Size, angle: number): Position {
angle = (angle) * (Math.PI / 180);
const canvasSize: Size = { width: 1, height: 1 };
const dx = Math.cos(angle);
const dy = Math.sin(angle);
// Left border
if (dx < 1.0e-16) {
const y = (position.x) * dy / dx + (canvasSize.height - position.y);
if (y >= 0 && y <= canvasSize.height) {
return {
x: -(elementSize.width / 2) ,
y: canvasSize.height - y - elementSize.height * -(dy * 0.5);
};
}
}
// Right border
if (dx > 1.0e-16) {
const y = (canvasSize.width - position.x) * dy / dx + position.y;
if (y >= 0 && y <= canvasSize.height) {
return {
x: canvasSize.width + (elementSize.width / 2),
y: y + elementSize.height * (dy * 0.5)
};
}
}
// Top border
if (dy < 1.0e-16) {
const x = (position.y) * dx / dy + (canvasSize.width - position.x);
if (x >= 0 && x <= canvasSize.width) {
return {
x: canvasSize.width - x - elementSize.width * -(dx * 0.5),
y: -(elementSize.height / 2)
};
}
}
// Bottom border
if (dy > 1.0e-16) {
const x = (canvasSize.height - position.y) * dx / dy + position.x;
if (x >= 0 && x <= canvasSize.width) {
return {
x: x + elementSize.width * (dx * 0.5),
y: canvasSize.height + (elementSize.height / 2)
};
}
}
return position;
}