Text Anchor Point / Alignment

[ti.s.cavalcanti]

I Have a Shape and a Text;

• Put "sourceRectAtTime()" expression in Shape size, to be equal Real Text size in pixels. That is, not the size in pixels shown in Chacterer box (nominal size in pixles).
• Need keep Text, always, on top of Shape aligned.
• I assured that Text and Shape properties were:
• Comp = 1280x720
• Text and Shape:

1. Achor Point [0,0]
2. Position [640,360] (middle Comp size)

• I expected to see the text on the shape, perfectly aligned.

But the value of Anchor Point to Shape is not equal to Text.

"0" for text is = middle in width and low in height.

"0" for shape is  = middle in width and middle in height.

Yes, i can drag text to the alignment of Shape.

In reality, the problem is not Height. Not even in Anchor Point. But in Width Position. Why, when I change the text, there variations in the position. Look:

When I change text, with Anchor Point is okay, always in center, but the position becomes misaligned.The text leaves the Shape position, going to the right.

This should happen because of variations in the width of the letters, the "sourceRectAtTime()" expression is extremely sensitive to the letters.

When I drag to the correct location looks like this:

Except that I can not be dragging, I need everything lines up forever, automatically. Even though I change the text.

How to solve this problem?

Update: Please, note that if I put some "symbol", larger in height It is also impaired:

[Mylenium]

That's nothing you can change easily. Font metrics are complicated and even just changing tiny details can have great effects. In any case, you cannot bypass issues inherent in the design of a font's glyphs like your swayed brackets. That can only be worked around by using more layers and aligning them differently or applying position text animators to compensate. For the width issue enforcing proper placment of pothe the rectangle and the text using Math.round() to quantize values to full pixels may resolve the matter, but ultimately it still comes down to using a suitable font.

Mylenium

[ti.s.cavalcanti]

Can you give me an example of the implementation of the expression "Math.round ()", please?

I have no idea how to use.

Thanks.

[Mathias Moehl]

Math.round() is normal javascript. You find a documentation and examples for it quickly with the help of google.

For example JavaScript round() Method

[ti.s.cavalcanti]

Thank you friend!

[Dan Ebberts · Accepted solution]

Try this.For the size of the rectangle (works the same as what you have, I think):

r = thisComp.layer("TEXT").sourceRectAtTime(time,false);

[r.width,r.height]

For the position of the text layer:

L = thisComp.layer("Rectangle");

rect = L.sourceRectAtTime(time,false);

hisPos = L.toComp([rect.left+rect.width/2, rect.top + rect.height/2]);

rect = sourceRectAtTime(time,false);

myPos = toComp([rect.left+rect.width/2, rect.top + rect.height/2]);

value - (myPos - hisPos)

Dan

[ti.s.cavalcanti]

Yap!

Wonderful expression! Perfect! Thank you very, very much!

An amazing capacity.

[ti.s.cavalcanti]

rect = L.sourceRectAtTime(time,false);

and

rect = sourceRectAtTime(time,false);

Dan, could tell me something about that expression?

I want to understand why a variable is defined twice, "rect".

What value is considered? Both?

If you can explain to me how this expression works, please, I am grateful.

I tried to change this part marked (in red) for a variable (val) that changes according a condition. But it seems that with variables, this piece of code can not be replaced.

hisPos = L.toComp([rect.left+rect.width/2, rect.top + rect.height/2]);

For example:

val = 0;

L = thisComp.layer("Shape Layer 1"); // Changed place
rect = L.sourceRectAtTime(time, false); // Changed place
rect = sourceRectAtTime(time, false); // Changed place

function getLayerName(theLayer, theName, theParm) {
  try {
  return theLayer.effect(theName)(theParm).name;
  } catch (err) {
  return "None";
  }
}

L1 = comp("Main").layer("A");
a = getLayerName(L1, "Arrange", "Layer");

function getValue() {
  switch (a) {
  case "A":
  return rect.left
  case "B":
  case "Default":
  return rect.left + rect.width / 2
  case "C":
  return rect.left + rect.width
  default:
  return rect.left + rect.width / 2
  }
}

val = getValue();

// L = thisComp.layer("Shape Layer 1");   Empty place
// rect = L.sourceRectAtTime(time, false); Empty place
hisPos = L.toComp([val, rect.top + rect.height / 2]);
// rect = sourceRectAtTime(time, false); Empty place
myPos = toComp([val, rect.top + rect.height / 2]);
value - (myPos - hisPos)

I tried to change the place of "rect" (x2) and "L" to satisfy the conditions. But not work.

In order that the conditions do not refer to variables that do not exist in the above code.

[Dan Ebberts]

I just reused the variable name "rect" because its first value is only needed for the following statement ("hisPos = ..."). It's an old, admittedly sloppy habit (from the days when memory usage was an issue). I probably should have used "rect1" and "rect2" (or something like that).

Dan

[ti.s.cavalcanti]

I understand, But you're right, once you know very well what you are doing.

I'm trying to understand, now, why this expression is not getting the value of the variable "Val".

The array within:

hisPos = L.toComp([ , ]);

and

myPos = toComp([ , ]); 

can not receive variables? only direct values?

[ti.s.cavalcanti]

Yes! I got it!

val = 0;

function getLayerName(theLayer, theName, theParm) {
  try {
  return theLayer.effect(theName)(theParm).name;
  } catch (err) {
  return "None";
  }
}

L1 = comp("Main").layer("A");
a = getLayerName(L1, "Arrange", "Layer");

function getValue() {
  switch (a) {
  case "A":
  return rect.left
  case "B":
  case "Default":
  return rect.left + rect.width / 2
  case "C":
  return rect.left + rect.width
  default:
  return rect.left + rect.width / 2
  }
}

L = thisComp.layer("Shape Layer 1");
rect = L.sourceRectAtTime(time, false);
val = getValue();
hisPos = L.toComp([val, rect.top + rect.height / 2]);
rect = sourceRectAtTime(time, false);
val = getValue();
myPos = toComp([val, rect.top + rect.height / 2]);
value - (myPos - hisPos)

His explanation was crucial for me to understand that I need to call the function twice to obtain two values.

And it must be after the variable "rect". Each "rect" Get a function call, and everything works properly. Thank you!