Skip to main content
A
arash6657
Known Participant
September 11, 2018
Answered

How to position a text field (according to stage size) in adobe animate html5 canvas

  • September 11, 2018
  • 1 reply
  • 2250 views

Hello,

i have this code to create an input text field in adobe animate html5 canvas.but i can not to position it according to "height" and "width" of my stage.

can anybody help me and write how to set it in stage (my problem is with screen size! if i give it a position, in another sclae screen,it looks awful)?

Here are the code:

var d = document.createElement("input");

d.setAttribute("type","text");

// Attach element to CreateJS stage baraye Name

canvas.parentNode.appendChild(d);

var dcjs = new createjs.DOMElement(d);

dcjs.x =(stage.x)/2   ;                                          // position element here doesnt work according to my stage

dcjs.y = (stage.y)/2; ;

stage.addChild(dcjs);

This topic has been closed for replies.
Correct answer ClayUUID

You're mixing up HTML DOM and Canvas CreateJS syntax. DOM elements are positioned with left and top, not x and y. You're also attempting to get the stage width from the wrong object.

var d = document.createElement("input");

d.id = "myInputBox";

d.style.position = "absolute";

d.style.left = (canvas.width / 2) + "px";

d.style.top = (canvas.height / 2) + "px";

canvas.parentNode.appendChild(d);

d.focus();

There's no reason to mess with CreateJS DOMElements unless they provide some functionality that you specifically need.

1 reply

C
ClayUUIDCorrect answer
Legend
September 11, 2018

You're mixing up HTML DOM and Canvas CreateJS syntax. DOM elements are positioned with left and top, not x and y. You're also attempting to get the stage width from the wrong object.

var d = document.createElement("input");

d.id = "myInputBox";

d.style.position = "absolute";

d.style.left = (canvas.width / 2) + "px";

d.style.top = (canvas.height / 2) + "px";

canvas.parentNode.appendChild(d);

d.focus();

There's no reason to mess with CreateJS DOMElements unless they provide some functionality that you specifically need.

    A
    arash6657Author
    Known Participant
    September 11, 2018

    Thanks for your nice reply.

    i also need to set this text field in middle of stage (for all screen size).could you please write how is it possible?

    C
    ClayUUID
    Legend
    September 11, 2018

    You know, it doesn't hurt to try to solve these problems yourself first.

    Determining the dimensions of elements - Web APIs | MDN

    var d = document.createElement("input");

    canvas.parentNode.appendChild(d);

    d.id = "myInputBox";

    d.style.position = "absolute";

    d.style.left = (canvas.width / 2 - d.offsetWidth / 2) + "px";

    d.style.top = (canvas.height / 2 - d.offsetHeight / 2) + "px";

    d.focus();

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices