Highlighted

TextInput Component will not scale when scaling Canvas (through code)

New Here ,
Apr 28, 2020

Copy link to clipboard

Copied

Hi All,

 

I am very new to HTML5/CreateJS and am having trouble on my animation. My original stage size is 3x as large and originally I had tried to scale it by decreasing the document size, but then all of my coordinates and positions were off. Since that didn't work the way I wanted it to, I opted to change the HTML directly and scaled by .7 in the makeResponsive() function. 

 

	function makeResponsive(isResp, respDim, isScale, scaleType) {		
		var lastW, lastH, lastS=1;		
		window.addEventListener('resize', resizeCanvas);		
		resizeCanvas();		
		function resizeCanvas() {			
			var w = lib.properties.width, h = lib.properties.height;			
			var iw = window.innerWidth, ih=window.innerHeight;			
			var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;			
			if(isResp) {                
				if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {                    
					sRatio = lastS;                
				}				
				else if(!isScale) {					
					if(iw<w || ih<h)						
						sRatio = Math.min(xRatio, yRatio);				
				}				
				else if(scaleType==1) {					
					sRatio = Math.min(xRatio, yRatio);				
				}				
				else if(scaleType==2) {					
					sRatio = Math.max(xRatio, yRatio);				
				}			
			}			
			canvas.width = w*pRatio*sRatio;			
			canvas.height = h*pRatio*sRatio;
			canvas.style.width = anim_container.style.width = dom_overlay_container.style.width = preloaderDiv.style.width = .7*w*sRatio+'px'; <--- HERE				
			canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = preloaderDiv.style.height = .7*h*sRatio+'px'; <--- HERE
			stage.scaleX = pRatio*sRatio;			
			stage.scaleY = pRatio*sRatio;			
			lastW = iw; lastH = ih; lastS = sRatio;		
		}
	}
	makeResponsive(true,'both',false,1);	
	fnStartAnimation();
}

 Everything else works fine with the animation scaled EXCEPT for the TextInput component that I have in a certain movie clip. It works fine when I do not have the canvas scaled but, of course, it is too large this way.

 

To test it out for yourself please follow the link below and click "Customize Art". Click any of the characters and on the right the windowpane should change to one where the TextInput Component should be. This component is only visible to me when I Inspect the page and then Ctrl+F (Cmd+F) "textinput".

 

https://mistergoose.com/products/canvas-gallery-wraps?variant=31295511134250

 

What it should look like:

 

WHAT IT SHOULD LOOK LIKEWHAT IT SHOULD LOOK LIKE

 

Any help is appreciated! Thank you.

TOPICS
Code, Error, How to, Other, Performance, Publish package

Views

337

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

TextInput Component will not scale when scaling Canvas (through code)

New Here ,
Apr 28, 2020

Copy link to clipboard

Copied

Hi All,

 

I am very new to HTML5/CreateJS and am having trouble on my animation. My original stage size is 3x as large and originally I had tried to scale it by decreasing the document size, but then all of my coordinates and positions were off. Since that didn't work the way I wanted it to, I opted to change the HTML directly and scaled by .7 in the makeResponsive() function. 

 

	function makeResponsive(isResp, respDim, isScale, scaleType) {		
		var lastW, lastH, lastS=1;		
		window.addEventListener('resize', resizeCanvas);		
		resizeCanvas();		
		function resizeCanvas() {			
			var w = lib.properties.width, h = lib.properties.height;			
			var iw = window.innerWidth, ih=window.innerHeight;			
			var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;			
			if(isResp) {                
				if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {                    
					sRatio = lastS;                
				}				
				else if(!isScale) {					
					if(iw<w || ih<h)						
						sRatio = Math.min(xRatio, yRatio);				
				}				
				else if(scaleType==1) {					
					sRatio = Math.min(xRatio, yRatio);				
				}				
				else if(scaleType==2) {					
					sRatio = Math.max(xRatio, yRatio);				
				}			
			}			
			canvas.width = w*pRatio*sRatio;			
			canvas.height = h*pRatio*sRatio;
			canvas.style.width = anim_container.style.width = dom_overlay_container.style.width = preloaderDiv.style.width = .7*w*sRatio+'px'; <--- HERE				
			canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = preloaderDiv.style.height = .7*h*sRatio+'px'; <--- HERE
			stage.scaleX = pRatio*sRatio;			
			stage.scaleY = pRatio*sRatio;			
			lastW = iw; lastH = ih; lastS = sRatio;		
		}
	}
	makeResponsive(true,'both',false,1);	
	fnStartAnimation();
}

 Everything else works fine with the animation scaled EXCEPT for the TextInput component that I have in a certain movie clip. It works fine when I do not have the canvas scaled but, of course, it is too large this way.

 

To test it out for yourself please follow the link below and click "Customize Art". Click any of the characters and on the right the windowpane should change to one where the TextInput Component should be. This component is only visible to me when I Inspect the page and then Ctrl+F (Cmd+F) "textinput".

 

https://mistergoose.com/products/canvas-gallery-wraps?variant=31295511134250

 

What it should look like:

 

WHAT IT SHOULD LOOK LIKEWHAT IT SHOULD LOOK LIKE

 

Any help is appreciated! Thank you.

TOPICS
Code, Error, How to, Other, Performance, Publish package

Views

338

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
Apr 28, 2020 0
New Here ,
Apr 28, 2020

Copy link to clipboard

Copied

I solved this particular problem by scaling the "innerwindow" width and height instead. 

 

function handleComplete(evt) {
	//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
	var queue = evt.target;
	var ssMetadata = lib.ssMetadata;
	for(i=0; i<ssMetadata.length; i++) {
		ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} )
	}
	var preloaderDiv = document.getElementById("_preload_div_");
	preloaderDiv.style.display = 'none';
	dom_overlay_container.style.display = canvas.style.display = 'block';
	exportRoot = new lib.RECOVER_DressUpGame_2();
	stage = new createjs.Stage(canvas);
	stage.addChild(exportRoot);
	stage.enableMouseOver();	
	//Registers the "tick" event listener.
	fnStartAnimation = function() {
		createjs.Ticker.setFPS(lib.properties.fps);
		createjs.Ticker.addEventListener("tick", stage);
	}	    
	//Code to support hidpi screens and responsive scaling.
	function makeResponsive(isResp, respDim, isScale, scaleType) {		
		var lastW, lastH, lastS=1;		
		window.addEventListener('resize', resizeCanvas);		
		resizeCanvas();		
		function resizeCanvas() {			
			var w = lib.properties.width, h = lib.properties.height;			
			var iw = window.innerWidth*.75, ih=window.innerHeight*.75; <--- HERE!!			
			var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;			
			if(isResp) {                
				if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {                    
					sRatio = lastS;                
				}				
				else if(!isScale) {					
					if(iw<w || ih<h)						
						sRatio = Math.min(xRatio, yRatio);				
				}				
				else if(scaleType==1) {					
					sRatio = Math.min(xRatio, yRatio);				
				}				
				else if(scaleType==2) {					
					sRatio = Math.max(xRatio, yRatio);				
				}			
			}			
			canvas.width = w*pRatio*sRatio;			
			canvas.height = h*pRatio*sRatio;
			canvas.style.width = anim_container.style.width = dom_overlay_container.style.width = preloaderDiv.style.width = w*sRatio+'px';			
			canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = preloaderDiv.style.height = h*sRatio+'px';
			stage.scaleX = pRatio*sRatio;			
			stage.scaleY = pRatio*sRatio;			
			lastW = iw; lastH = ih; lastS = sRatio;		
		}
	}
	makeResponsive(true,'both',false,1);	
	fnStartAnimation();
}
</script>

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
Reply
Loading...
Apr 28, 2020 0