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);
Copy link to clipboard
Copied
DOM elements and canvas bitmaps use different scaling algorithms, so they are never going to align perfectly when scaled.
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.
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.
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.
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
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 ?
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?
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
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
Copy link to clipboard
Copied
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 ?