Centering a text in a clip from JS

Help
#1

HowToRecenterTextInClip.wick (2.2 KB)

Hi,
Is it possible to recenter a text in a clip after dynamically changing it via JS?
Please see the attached wick file. Visually, it merely looks like this:
image
It has a clip (myClip) that has a background, defining the background color, and a text (myText).
Initially, the text is well centered: OriginX and OriginY are set to 0 manually.
The text will be changed dynamically from Javascript. Then, if longer or shorter, it will get de-centered.

A sample code is provided in the Code layer.

I thought I would just need to reset originX and originY to 0 to recenter the text.
But from Javascript, .originX and .originY are undefined.
Since I have access to myClip.myText.x, I then thought a workaround could be to reposition it based on the text width:

myClip.myText.x = -myClip.myText.width/2

But .width is also undefined.

Any way to recenter the text?

Thank you.

#2

There isn’t a Wick.Path.prototype.width, but there is a Wick.Path.prototype.bounds:

#3

Thank you for the link.
path.bounds.width correctly returns the width, good to know! :+1:
However, unfortunately, it didn’t help for the text centering, as the attached .wick shows.

CenterTextKO.wick (2.4 KB)

Here is a screenshot:

image

Clicking on the ‘Execute Code’ button will execute the three lines under it, with the following result:

image

The x coordinate has been correctly redefined, as the alert() message shows. But the problem is that the OriginX changed.

Anyway to reset the OriginX to 0?

Otherwise, which other way to recenter the text?

Thank you.

#4

Try using OriginX instead, X and OriginX position stuff is a weird thing.

#5

Thank you for helping. Unfortunately,

bnComponent.OriginX = 0;

didn’t return any error, but hasn’t had any result either.
Maybe this is just not possible…

#6

Sorry for the late response.

@LapisLazuli since your text is inside of a clip object, myClip, all you need to do to center it is set it’s x value to zero. It is recommended to do this inside of an update script.

See wick file: centeredText.wick (2.2 KB)

Origin X & Y are defined as just the x/ y coordinates of the object. Instead of doing .originX and .originY just do .x and .y

Yes this wouldn’t work since text object’s don’t have a width.
Unfortunately only clips have width/ height adjustable from code.

If you want to track a text object’s width, you would need to turn it into another clip.

1 Like
#7

Hi @Hamzah_Alani, so amazingly simple! And works fine indeed, many thanks! :+1:

1 Like
#8

Sure, myText.width does not exist, but as mentioned earlier in this same post by @noobfield, text object have width, and it can be accessed (read only) through:

myText.bounds.width

1 Like
#9

My Project7-12-2025_17-53-59.wick (2.2 KB) I just put “this.myText.x = 0, this.myText.y = 0” in the update script of the clip

#10

Thanks. That’s what @Hamzah_Alani already replied :wink:

1 Like