DOMElement scale not aligning element properly

Community Beginner ,
Jun 22, 2021 Jun 22, 2021

Copy link to clipboard

Copied

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);

 

Views

349

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 22, 2021 Jun 22, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 22, 2021 Jun 22, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 22, 2021 Jun 22, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 22, 2021 Jun 22, 2021

Copy link to clipboard

Copied

Thats defenetly true it jitters a bit. But thats fine, for the purpose i would need this is perfect!

in my project the miss aligment is literaly MILES achead of elements or before elements, depends on zoom.
It only looks perfect when zoom is 1:1, anything that that is a total colapse of layout. 
However, in that chaos i noticed that the offset to where elements needs to be, is exacly double the value it should be. As is the transform: matrix is aplayed two times. 
I tryed to override that by using:

domContent.transformMatrix = new createjs.Matrix2D(1, 0, 0, 1, 0, 0);

and

content.setTransform(0,0,1/stage.scaleX,1/stage.scaleY);

and css versions 

document.getElementById("domContent").style.transform = "matrix("+1+", 0, 0, "+1+", 0, 0) !important";

but non of thouse work.

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 22, 2021 Jun 22, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 22, 2021 Jun 22, 2021

Copy link to clipboard

Copied

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 ?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 22, 2021 Jun 22, 2021

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 23, 2021 Jun 23, 2021

Copy link to clipboard

Copied

The idea to use components as containers sound solid.

What i need to show is dynamicly inserted divs with css loaded from json file. Unfortunatly the number of thouse divs is not fixed, and may vary therefore i would not know how many components i would need to put on sceene.

I tried to copy css from components to my divs and wraper, but as soon as domElement from createjs class is added to display list, it adds the wrong transform matrix to div objects. Im not sure how to overwright that.

 

The code loks something like this:

 // create container
var textElementContainer = document.createElement("div");
attrbuteName = "testID";
textElementContainer.setAttribute("id", attrbuteName);
textElementContainer.insertAdjacentHTML("afterbegin", configData.configObj[1].value);

// render element
document.getElementById("crjsDOMElements_overlay").appendChild(textElementContainer);
	
// cteate DOMelement
var dom_testID = new createjs.DOMElement(textElementContainer);
stage.addChild(testID);
		 
// copy element propierties
	// to do

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 23, 2021 Jun 23, 2021

Copy link to clipboard

Copied

You can add components at runtime.

 

One way of doing this is to add at least one component using the IDE and leave it hidden so Animate will automatically setup all libs and imports.

 

Then, if you inspect the generated JS file, you'll see that this is how we can create and add a component to the display list (a label in this case):

this.testLabel = new lib.an_Label({'id': '', 'label':'Test', 'disabled':false, 'visible':true, 'class':'ui-label'});
this.testLabel.setTransform(300,221,1,1,0,0,0,50,11);
this.timeline.addTween(cjs.Tween.get(this.testLabel).wait(1));

 

Please let me know what you think.

 

Regards,

JC

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 25, 2021 Jun 25, 2021

Copy link to clipboard

Copied

LATEST

Hi JoãoCésar

Sorry for late response. I had to test that component trick you posted. Its very cool we can add them dynamicly.

This could be best way, but i found 2 problems with it. 
Firstly, the label text itselfs dont scale even tho label boundries scalle very well (even in responcive true, true mode)

Secodnly, it apears labels do not parse CSS. I must aply an css selector for them, so this would requarie an extra step to parse whatever html tags and css was loaded into that dynamic field. Also when i did aply a label10 {font-size:20px}; selector, that font size remains fixed when stage scaled in true, true mode.

(See screenshots)

Mayby label component is not suited for this kind operation. But the sizing of label box is perfect i every mode. Mayby we need an HTML/CSS box component.

 

I wend back to dealing with matrixes in domElement. What i managed to do is overite the oryginal class with promote method.

createjs.DOMElement = createjs.promote(DOMElement, "DOMElement");

 

The modification is taking the oryginal class and taking into consideration curent scale of stage:

 

str += "matrix(" + (mtx.a*n|0)/n / this.globalScale +","+ (mtx.b*n|0)/n +","+ (mtx.c*n|0)/n +","+ (mtx.d * n|0)/n / this.globalScale+","+ (mtx.tx + 0.5|0) / this.globalScale;

style.transform = style.WebkitTransform = style.OTransform = style.msTransform = str +","+ (mtx.ty+0.5|0) / this.globalScale +")";

style.MozTransform = str +"px,"+ (mtx.ty+0.5|0) / this.globalScale +"px)";
console.log("dupa globalScale: "+stage.scaleX)
if (!oldProps) { oldProps = this._oldProps = new createjs.DisplayProps(true, NaN); }
oldProps.matrix.copy(mtx);

Where globalScale is actualy just stage.scaleX.

 

This now works almost perfecly, giving back correct transform matrix for domElements in adobe div setup. Even in responcive true,true mode. Also its  alowing me to use X and Y coordinated direcly in stage, as it would be an layer of display list.

Just last modification would be to prevent scaling calculation in full width/height auto mode. (probably some listener should watch if zoom is 1:1 or no)

Perhabs this mod should be included in export setting in Animate itself ?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines