0
242
VistasRectángulo redondo en rectángulo: ¿cómo detectar las coordenadas en las esquinas que están fuera del rectángulo redondo?
Estoy luchando para encontrar una manera de resolver este problema.
Obtengo esta imagen 306px x 620px
Es una imagen con un rectángulo redondeado. Para hacer que solo se pueda hacer clic en el rectángulo redondeado, configuro border-radius: 80px; y esto funciona
Ahora estoy tratando de escribir una forma inteligente en la que pueda probarlo y detectar si (x, y) la posición del clic (como en esta imagen)
en realidad está fuera de los parámetros del rectángulo redondeado
Tuve una idea similar a esta https://www.jsparling.com/using-rectangles-to-fill-the-area-outside-of-a-circle/ pero quiero comprobar si hay alguna forma inteligente de detectar si (x, y) está fuera de este rectángulo redondeado
Inicialmente, publiqué en https://math.stackexchange.com/ pero mencionan que es mejor preguntar aquí.
Cualquier ayuda/idea sería apreciada.
Editar 1
Tal vez más información: Izquierda, la parte superior del rectángulo es 0,0
Editar 2
Entorno reproducible https://stackblitz.com/edit/angular-qvf3ue?file=src%2Fapp%2Fapp.component.ts
Editar 3
Solo para aclarar esas son las cosas que sé.
const height = 620; const width = 306; Y sé que border-radius: 80px; evitaría hacer clic fuera de este rectángulo redondeado (esas partes pequeñas)
Estoy tratando de escribir una prueba donde puedo verificar si la coordenada no está dentro del área del rectángulo redondeado
Actualizar - resultado
Gracias tanto a @Yves Daoust como a @MBo
Dado que @MBo respondió primero con la respuesta correcta, marcaré su respuesta como correcta.
Si alguien está interesado en la implementación, échale un vistazo.
1 Respuestas
Responde la pregunta0
Con el radio del arco R , la esquina superior izquierda del rectángulo coordenada Left, Top , las dimensiones Wdt y Hgt , podemos escribir la siguiente condición para los puntos exteriores:
Outside = (X < Left) or (X > Left + Wdt) or (Y < Top) or (Y > Top + Hgt) or Corner(X - Left - R - X, Y - Top - R, R) or Corner(X - Left - R, Top + Hgt - R - Y, R) or Corner(Left + Wdt - R - X, Top + Hgt - R - Y, R) or Corner(Left + Wdt - R - X, Y - Top - R, R) donde Corner es una función para verificar si el punto se encuentra en un triángulo curvo:
function Corner(DX, DY, R) { return DX < 0 and DY < 0 and DX * DX + DY * DY > R * R } Para encontrar si el punto está dentro, simplemente invierta el resultado Outside