How to update the hitArea of createjs.Text dynamically if user change the alignment from left to center/right?

[iabhishekraj1]

I created an application using create.js where the user can add a text on canvas dynamically.

A user has options to change the alignment of the text which is already added on canvas.

On alignment change, an event fired which executes below code.

textAlignmentOptions.on("change", function (event) {
let selectedAlignment = event.Data;  //"left", "right" or "center"
 textFieldsArray.forEach (textField => {
    // update the alignment
    textField.textAlign = selectedAlignment;

    // update the hitarea
    let bounds = textField.getBounds();
    let hitArea = new createjs.Shape();
    hitArea.graphics.f("red").r(bounds.x, bounds.y, bounds.width, bounds.height);
    textField.hitArea = hitArea;
 })
});

Alignment changed successfully but this code is not able to update the hitArea of the text.

What will be the solution for this?

[danzen]

I might be reading this wrong... but you have an arrow function inside the change event function... but there is nothing running the arrow function. Maybe do a console.log() to make sure the code you are expecting to run... is running.

[iabhishekraj1]

I might be reading this wrong... but you have an arrow function inside the change event function... but there is nothing running the arrow function. Maybe do a console.log() to make sure the code you are expecting to run... is running.

@danzen, I have updated the code. I am running a loop on an array of textFields which are selected and then apply selected textAlign on that.

[owendwyer]

I don't think .getBounds() works well with textFields.

If it were me, I'd work out the bounds manually using the x/y position of the field and getMetrics() to get width and height.

You'd have to work it out a different way according to the alignment.

[danzen]

@iabhishekraj - hope this all got solved... you are always welcome to take a look at the ZIM Label code https://zimjs.com/docs.html?item=Label - in the end, I think we worked everything out with respect to bounds, alignment and hitAreas.