πŸ“ БистСма ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚

describes coordinate system used in Actions and Triggers

πŸ“ Π‘Π»ΠΎΠΊ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ Π² EyeAuras

Π‘Π»ΠΎΠΊ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… дСйствиях ΠΈ Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€Π°Ρ…. Он позволяСт:

  • πŸ“ Π—Π°Π΄Π°Ρ‚ΡŒ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΉ Ρ€Π΅Π³ΠΈΠΎΠ½ Π·Π°Ρ…Π²Π°Ρ‚Π°.
  • πŸ“ Π£ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ овСрлСя ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ элСмСнта Π½Π° экранС.


πŸ”„ Всё ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ

Π‘Ρ…Π΅ΠΌΠ° draw.io
НаТмитС Π½Π° схСму для увСличСния.

Π’ EyeAuras ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Ρ‚Ρ€ΠΈ основных систСмы ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚:

πŸ–₯️ Π­ΠΊΡ€Π°Π½Π½Ρ‹Π΅ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹

ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹Π΅ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ Π½Π° экранС. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ Π»Π΅Π²Ρ‹ΠΉ ΡƒΠ³ΠΎΠ» ΠΈΠΌΠ΅Π΅Ρ‚ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ (0,0), Π° Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΏΡ€Π°Π²Ρ‹ΠΉ соотвСтствуСт Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡŽ экрана (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, 1920x1080). Если Ρƒ вас нСсколько ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€ΠΎΠ², Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ Π»Π΅Π²Ρ‹ΠΉ ΡƒΠ³ΠΎΠ» ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ.

🟒 Когда ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ?

  • Для отобраТСния ΠΎΠ²Π΅Ρ€Π»Π΅Π΅Π² ΠΈ Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π½Π°ΠΉΠ΄Π΅Π½Π½Ρ‹Ρ… ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ².
  • Для ΠΊΠ»ΠΈΠΊΠΎΠ² Π½Π° экранС Π±Π΅Π· привязки ΠΊ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΌΡƒ ΠΎΠΊΠ½Ρƒ.

πŸͺŸ ΠšΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ ΠΎΠΊΠ½Π°

ΠšΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΡƒΠ³Π»Π° ΠΎΠΊΠ½Π°.

🟒 Когда ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ?

  • Π Π΅Π³ΠΈΠΎΠ½Ρ‹ Π·Π°Ρ…Π²Π°Ρ‚Π° Π²ΠΎ всСх Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€Π°Ρ… Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π² ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Π°Ρ… ΠΎΠΊΠ½Π°.

πŸ”² Π“Ρ€Π°Π½ΠΈΡ†Ρ‹ Π½Π°ΠΉΠ΄Π΅Π½Π½ΠΎΠ³ΠΎ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° (Match bounds)

ΠšΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π°ΠΉΠ΄Π΅Π½Π½ΠΎΠ³ΠΎ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΎΠΊΠ½Π°.

🟠 Когда ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ?

  • Π Π΅Π΄ΠΊΠΎ. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ достаточно экранных ΠΈΠ»ΠΈ ΠΎΠΊΠΎΠ½Π½Ρ‹Ρ… ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚.

πŸ“Œ ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ ΠΈ смСщСниС

ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ° опрСдСляСтся Π΅Π³ΠΎ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Π°ΠΌΠΈ X (ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ) ΠΈ Y (ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ), Π° Ρ‚Π°ΠΊΠΆΠ΅ Π΅Π³ΠΎ ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ (Width) ΠΈ высотой (Height).

ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Offset (X, Y, Width, Height) ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ овСрлСя. НапримСр:

  • ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ: (100, 100)
  • Offset: (10, 20)
  • πŸ“ Π˜Ρ‚ΠΎΠ³ΠΎΠ²Π°Ρ позиция: (110, 120)

βš“ Якоря (Anchors)

Π’ EyeAuras ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ Π΄Π²Π° Ρ‚ΠΈΠΏΠ° якорСй:

  • ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ (Position Anchor)
  • ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚Π½Ρ‹ΠΉ (Content Anchor)

πŸ“ ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ ΡΠΊΠΎΡ€ΡŒ

ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ Ρ‚ΠΎΡ‡ΠΊΡƒ привязки Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΎΠΊΠ½Π° ΠΈΠ»ΠΈ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ°. ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ ΠΈ смСщСниС Ρ€Π°ΡΡΡ‡ΠΈΡ‚Ρ‹Π²Π°ΡŽΡ‚ΡΡ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ этой Ρ‚ΠΎΡ‡ΠΊΠΈ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Если ΡΠΊΠΎΡ€ΡŒ установлСн Π² TopLeft, Ρ‚ΠΎ позиция ΠΈ смСщСниС Π±ΡƒΠ΄ΡƒΡ‚ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Π½Π° Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ Π»Π΅Π²Ρ‹ΠΉ ΡƒΠ³ΠΎΠ» ΠΎΠΊΠ½Π°. Если установлСн Π² Center, Ρ‚ΠΎ β€” Π½Π° Ρ†Π΅Π½Ρ‚Ρ€ ΠΎΠΊΠ½Π°.

πŸ”³ ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ якорСй

πŸ” AnchorType: TopLeft

  • ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ: (300, 100), Π Π°Π·ΠΌΠ΅Ρ€: (200, 100), Offset: (0, 0, 0, 0) βž” (300, 100, 200, 100)
  • ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ: (300, 100), Π Π°Π·ΠΌΠ΅Ρ€: (200, 100), Offset: (100, 50, 0, 0) βž” (400, 150, 200, 100)

πŸ” AnchorType: Top

  • ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ: (300, 100), Π Π°Π·ΠΌΠ΅Ρ€: (200, 100), Offset: (0, 0, 0, 0) βž” (200, 100, 200, 100)
  • ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ: (300, 100), Π Π°Π·ΠΌΠ΅Ρ€: (200, 100), Offset: (100, 50, 0, 0) βž” (250, 150, 200, 100)

πŸ” AnchorType: TopRight

  • ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ: (300, 100), Π Π°Π·ΠΌΠ΅Ρ€: (200, 100), Offset: (0, 0, 0, 0) βž” (100, 100, 200, 100)
  • ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ: (300, 100), Π Π°Π·ΠΌΠ΅Ρ€: (200, 100), Offset: (100, 50, 0, 0) βž” (200, 150, 200, 100)

➑️ AnchorType: Right

  • ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ: (300, 100), Π Π°Π·ΠΌΠ΅Ρ€: (200, 100), Offset: (0, 0, 0, 0) βž” (100, 50, 200, 100)
  • ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ: (300, 100), Π Π°Π·ΠΌΠ΅Ρ€: (200, 100), Offset: (100, 50, 0, 0) βž” (200, 75, 200, 100)

πŸ”½ AnchorType: BottomRight

  • ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ: (300, 100), Π Π°Π·ΠΌΠ΅Ρ€: (200, 100), Offset: (0, 0, 0, 0) βž” (100, 0, 200, 100)
  • ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ: (300, 100), Π Π°Π·ΠΌΠ΅Ρ€: (200, 100), Offset: (100, 50, 0, 0) βž” (200, -50, 200, 100)

πŸ”½ AnchorType: Bottom

  • ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ: (300, 100), Π Π°Π·ΠΌΠ΅Ρ€: (200, 100), Offset: (0, 0, 0, 0) βž” (200, 0, 200, 100)
  • ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ: (300, 100), Π Π°Π·ΠΌΠ΅Ρ€: (200, 100), Offset: (100, 50, 0, 0) βž” (250, -50, 200, 100)

⬅️ AnchorType: Left

  • ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ: (300, 100), Π Π°Π·ΠΌΠ΅Ρ€: (200, 100), Offset: (0, 0, 0, 0) βž” (300, 50, 200, 100)
  • ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ: (300, 100), Π Π°Π·ΠΌΠ΅Ρ€: (200, 100), Offset: (100, 50, 0, 0) βž” (400, 75, 200, 100)

🎯 AnchorType: Center

  • ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ: (300, 100), Π Π°Π·ΠΌΠ΅Ρ€: (200, 100), Offset: (0, 0, 0, 0) βž” (200, 50, 200, 100)
  • ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ: (300, 100), Π Π°Π·ΠΌΠ΅Ρ€: (200, 100), Offset: (100, 50, 0, 0) βž” (250, 25, 200, 100)

πŸ–ΌοΈ ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚Π½Ρ‹ΠΉ ΡΠΊΠΎΡ€ΡŒ

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² особых случаях для выравнивания содСрТимого Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ° ΠΈΠ»ΠΈ ΠΎΠΊΠ½Π°.