ZIM BEAM (tag) - Code Sharing for JavaScript Canvas Framework

BEAM

Share ZIM CODE use ZIM BEAM

COPY

SHOW

tag 2024-05-29 15:51:18

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM Frame - Tag (Dimensionless) Template</title>

/* the width and height must be controlled somehow if not provided to Frame
	   here we set the height and the width is determined by the article tag
	   the div inside the article tag is called holder and that is what we add the Frame to
	   the frame then makes a canvas tag with an id of holderCanvas (always adds the word Canvas)
	   NOTE: the stage will have its dimensions changed accordingly in a resize event
	   but the canvas itself is not scaled as Frame uses CSS overflow:hidden */
	#holder {position:relative; margin:20px 0px; height:200px;}
</style>

import zim from "https://zimjs.org/cdn/016/zim";

// SCALING OPTIONS
// scaling can have values as follows with full being the default
// FIT		sets canvas and stage to dimensions and scales to fit inside window size
// FILL		sets canvas and stage to dimensions and scales to fill window size
// FULL		sets stage to window size with no scaling
// "tagID"	add canvas to HTML tag of ID - set to dimensions if provided - no scaling

const scaling = "holder"; // use the ID of a tag to place the canvas in the tag
new Frame({scaling, color:pink, ready, allowDefault:true}); // see docs for more options and info
function ready() {

// put your code here (you can delete this code)
	// given F (Frame), S (Stage), W (width), H (height)

const button = new Button(140, 60, "ZIM", grey, dark);
	// will position and scale the code in the resize function at bottom
	button.on("click", () => { // on() is like addEventListener()
		zgo("http://zimjs.com/frame.html"); // or relative URL, target is available too
	});

// put resizing code in here
	F.on("resize", () => {
		// also see zim.Layout() for more complex scaling
		button.scaleTo(S, 30).center();
	});
	
} // end of ready

</script>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>

<body>
<article>
	<h3>ZIM Frame Tag mode (without dimensions)</h3>
	<p>This template shows how to place a DIMENSIONLESS Canvas in an HTML element with a specified tag ID (holder in this case).  ZIM Frame will make the Canvas with an id the same as the holder tag but with the word Canvas added to the end.  The stage size will be set to the holder tag dimensions - the content is not scaled so you need to size / scale items with code (like in Full mode).</p>
	<div id="holder"></div>
	<p>Frame uses appendChild() to add the canvas tag to the specified element. offsetWidth and offsetHeight are used to measure the element and values are updated in the resize event.  CSS overflow:hidden is used to show the canvas only in the element.
	<p>
	<a href="http://zimjs.com/frame.html" style="outline:none;"><img src="http://zimjs.com/templates/content/icon.jpg" style="width:100px; margin-bottom:-10px;"/></a>
	</p>
</article>
</body>
</html>