Skip to main content
E
ed971
Known Participant
June 22, 2021
Question

DOMElement scale not aligning element properly

  • June 22, 2021
  • 2 replies
  • 2281 views

Hi

 

i have a problem with DOMElement added to animate cc scene. The positions of domeElement seams not aligned properly when you start zooming the stage via browser (ctrl +)

Ive tested DOMElement without adobe animate divs, and there is no such behavior. It seams like the element is getting double the offset needed in animate sceene to be aligned perfecly.
Any clue on that ?

 

 

var dom_obj = new createjs.DOMElement(divContainer);
stage.addChild(dom_obj);

 

    This topic has been closed for replies.

    2 replies

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community Expert
    Community Expert
    June 22, 2021

    Hi.

     

    An easy alternative is to use one of the available HTML5 components. Animate will setup their position and scale automatically for you.

     

    Regards,

    JC

    E
    ed971Author
    Known Participant
    June 22, 2021

    Hi JoãoCésar
    Ty for joining this endevor.

     

    Thats a intresting aproach.

    Chck below screens what was the resoult.

     

    image 1.jpg
    label komponent without zoom
    (the purple bg is canvas shape)

    as expected, everything fine, in css pane we can see transform matrix of value 1

     

    image 2.jpg is zoom 300%

    the div actualy scalled perfecly, and thetransform matrix is folowing the rule i noticed above. 1 / scaleX, witch is 0.33

    (the text itself didnt scale at all, but the div container proves the point on overscaling elements)

     

    Inbefore i change the project to use components div instead of generated ones, is there a way we can override create js adding wrong css transform matrix ?

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community Expert
    Community Expert
    June 22, 2021

    Thanks for the info.

     

    Actually my idea would be to use the components without interfering with any CSS related to position and scale. And then just display the content.

     

    By the way, what exactly do you need to show?

    C
    ClayUUID
    Legend
    June 22, 2021

    DOM elements and canvas bitmaps use different scaling algorithms, so they are never going to align perfectly when scaled.

    E
    ed971Author
    Known Participant
    June 22, 2021

    Thanks for reply

     

    Are we sure about that ? Check this pure canvas and createjs example.
    http://chaselambda.com/gists/easel/examples/HtmlElements.html
    if uses domElement and is perfecly aligned even when you zoom in or zoom out. How is this achived than ?
    My bet was that there is something with adobe divs.

    C
    ClayUUID
    Legend
    June 22, 2021

    The only canvas element in that demo is the thick yellow border. If you zoom in, you can see that the DOM element border in fact jitters quite a bit in relation to the canvas border. That's exactly why they made it so thick, so the imperfect alignment wouldn't be an issue.

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