Переместить элемент на определенный угол, чтобы переместить его за пределы контейнера.

Question

Каков наилучший и самый элегантный способ перемещения элемента на заданный угол, если его перемещать за пределы контейнера?

Как показано на рисунке ниже, я хочу переместить элемент так, чтобы он находился снаружи контейнера. И я только хочу определить определенный угол, чтобы это произошло. (игнорируйте диапазон градусов здесь, это просто для иллюстрации моего случая)

Элемент должен иметь возможность перемещаться во всех углах (0-359 °)

Answer 1

Я решил это с помощью функции из Найти граничную точку прямоугольника под углом от точки, которая не находится в середине прямоугольника .

Просто немного изменил функцию, чтобыэлемент находится полностью вне контейнера.

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;
}