ZIM BITS TUTORIAL
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM BITS - Registration Points and Centering Objects</title>
<!-- Welcome to ZIM at https://zimjs.com - Code Creativity! -->
<!-- ZIM runs on the HTML Canvas powered by JavaScript and CreateJS https://createjs.com -->
<!-- Founded by Inventor Dan Zen - http://danzen.com - Canadian New Media Award Winner -->
<!-- ZIM is free to use. You can donate to help improve ZIM at http://zimjs.com/donate -->
<script src="https://zimjs.org/cdn/1.3.4/createjs.js"></script>
<script src="https://zimjs.org/cdn/01/zim_min.js"></script>
<!-- use zimjs.com/distill for minified individual functions! -->
<script src="https://zimjs.com/bits/footer10.js"></script><!-- you will not need this -->
<script>
// 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 fit outside 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 = FIT; // this will resize to fit inside the screen dimensions
const width = 1000;
const height = 800;
const color = dark; // or any HTML color such as "violet" or "#333333"
const outerColor = light;
new Frame(scaling, width, height, color, outerColor, ready);
function ready() {
// given F (Frame), S (Stage), W (width), H (height)
// ZIM BITS - Registration Points and Centering Objects (2016 - updated 2022)
// see also https://codepen.io/zimjs/pen/qBEjYZV
// the registration point is the point of an object about which it rotates and scales
// also the object's x and y properties locate this point relative to the object's container
// rectangles usually have a registration point at their top left corner
// circles usually have a registration point in their center
// in this example, the pink circle and the green rectangle show default registration points
// represented by the red circle provided by the outline()
// the red cross provided by the outline() is the origin (0,0) within the object
// so if you place objects inside our object, then this is the x=0 and y=0 for the inner objects
// the red rectangle provided by the outline() is the bounds
// NOTE: the bounds do no have to start at the origin or the registration point
// this would depend on how the shape itself is drawn
// center() and centerReg()
// center(obj, container) will center the object in and add the object to the container
// centerReg(obj, container) will center the registration point
// it also centers the object in and adds the object to the container
// if you pass a third parameter of false, it will not add the obj to the container
// the pink and green objects are centered using the center()
// the pink circle it is centered on the stage and the green rectangle is centered in the dashed rectangle
// the blue and orange rectangles have their registration points set in the middle
// using the centerReg() function
// note that the orange rectangle is centered in a rotated and scaled container
// and the orange rectangle itself is rotated and scaled
// this works just as well if you use center() rather than centerReg()
// there is a short chainable reg() method which can be used in place of regX and regY properties
// new Rectangle().reg(CENTER) will also center the registration in the center
// new Rectangle(100,100).reg(100,100); // would place registration at right bottom
// new Rectangle(100,100).reg(RIGHT,BOTTOM); // and so would this
// EXTRA
// why center a registration?
// well, that is where the scaling expands and contracts from
// so a rectangle with top left registration will scale from its top left
// and usually look a little awkward in doing so
// same with rotation - the rectangle would rotate around its corner
// this too, usually looks awkward
// it is easier to center something that has its registration point in the center
// for instance: circle.x = stageW / 2;
// versus: rectangle.x = (stageW - rectangle.width) / 2
// of course, with center() you do not need to worry about the calculation
// but the rotation and scaling could still be a factor
// STEPS
// 1. draw a display object like a Shape, Container, Bitmap, Button, etc.
// 2. center() or centerReg() the object in a container
// 1. draw a display object like a Shape, Container, Bitmap, Button, etc.
// Circle objects default to have a registration point and origin in the middle
new Circle(80, pink)
// 2. center() or centerReg() the object in a container
// note, both center and centerReg also add the object to the container
// unless you pass in a second parameter with a value of false
// in this case, we are adding the circle to and centering the circle on the stage
// the object and container must have their bounds set
// both Circle objects and the stage made by Frame have bounds set
// we are using chaining
.center()
// here we use outline() to show the registration point (red circle)
// the origin inside the object (red cross) and the bounds (red rectangle)
// this is a function to run during testing to visually confirm these properties
// Note, that outline works when you call it but is not dynamic
// as such it does not move with the object, etc.
// you should call it once the object has been positioned and added to the stage
// again, we are using chaining
.outline();
// making the borders to center the other shapes in
let border, border2, border3;
makeBorders();
// 1. draw a display object like a Shape, Container, Bitmap, Button, etc.
// Rectangle objects default to have a registration point and origin at top left corner
new Rectangle(50, 100, green)
// 2. center() or centerReg() the object in a container
.center(border)
.outline();
// 1. draw a display object like a Shape, Container, Bitmap, Button, etc.
new Rectangle(50, 100, blue)
// 2. center() or centerReg() the object in a container
// here we centerReg so the rectangle's registration point is in the center
// you can see that with the red circle indication its location
// this means the rectangle would scale and rotate around the center
.centerReg(border2)
.outline();
// 1. draw a display object like a Shape, Container, Bitmap, Button, etc.
new Rectangle(50, 100, orange)
// 2. center() or centerReg() the object in a container
// here, we rotate and scale the rectangle
// and we are centering it in a rotated and scaled container
// this is NOT a trivial calculation but the zim functions take care of it!
.rot(30)
.sca(.8)
.centerReg(border3)
.outline();
function makeBorders() {
border = new Container(200, 150)
.pos(100, 200);
let s = new Rectangle(200, 150, clear, silver, null, null, null, true)
.addTo(border);
border2 = new Container(200, 150)
.pos(100, 430);
s = s.clone()
.addTo(border2);
border3 = new Container(200, 150)
.pos(710, 280)
.rot(20)
.sca(1.2);
s = s.clone()
.addTo(border3);
}
const title = "Registration Points and Centering Objects";
new Label(title, 30, null, "#666")
.pos(40, 40);
const docItems = "Frame,Container,Circle,Rectangle,Label,pos,rot,sca,outline,addTo,centerReg,center,zog";
makeFooter(S, W, H, null, docItems); // ZIM BITS footer - you will not need this
} // end of ready
</script>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<body>
<!-- canvas with id="myCanvas" is made by zim Frame -->
</body>
</html>