ZIM js JavaScript Framework

Canvas Components, Controls and more!

ZIM 6.3 Launches with Transform Tools for #Canvas #JavaScript #CreateJS and #ZIMjs


ZIM 6.3.0 has launched at http://zimjs.com with a new transform() method available for every ZIM display object such as images, shapes and components.  An example can be found here: http://zimjs.com/transform/ where you can double click the items to show their transform controls.

var rect = new Rectangle(200,200,frame.red)

This will place a rectangle on the stage and provide transform controls to scale (from the corners), stretch (from the sides), rotate (from outside the corners) and move by dragging.  The registration point can also be adjusted.  The registration point is where the object will rotate about.  The scaling happens about the opposite corner except when holding down the CTRL key where it scales around the registration point.

There are all sorts of ways to configure the transform controls – you can turn the types off and on and you can hide or show the controls (but still use them if hidden).  Please see the ZIM Docs for details.

rect.transform({rotate:false, showStretch:true}); // etc.

transformControls Property

When you add a transform() to an object, the object receives a transformControls property that lets you access the controls, hide and show, remove and add, record and set, resize, etc.

rect.transformControls.stretchYControls.getChildAt(1).visible = false;
// removes the bottom stretch control

TransformManager() Class

You can control multiple object transforms with the TransformManager class.  This, by default, will let you control one object at a time.  The manager can also be used to rescale all your controls at once and also save all your transforms so when the user refreshes the Browser or App, the transforms are kept.

var tm = new TransformManager();
tm.add([rect, circle, etc.]);

See also the ZIM BUBBLING video showing lots of adjustments to transform!

We hope the feature is useful for you – we might consider using it to make a Graphical User Interface (GUI) for ZIM.  Would you like that?  Or does that sound too Flashy?

Ciao, Doctor Abstract



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s


This entry was posted on October 6, 2017 by in components, design, interactive media, javascript, launch and tagged , , , , , , , , , .


%d bloggers like this: