CreateJS: EaselJS - Free Transform Tool

Provides controls for transforming position, size, and rotation of CreateJS Display Objects.

Features

• Transformations are relative to the registration point (ob.regX, obj.regY), which you can choose.
• Un-obtrusive to your createjs project scene. The tool sits in it's own container layer.

Demo

See the tool in action at: https://jedateach.github.io/createjs-free-transform-tool

Source code for demo

Usage

In order to use this tool you have to:

1. add a new layer to put the transform tool into

   vartop=newcreatejs.Container();top.name="top";stage.addChild(top);

2. add the transform tool inside the top layer

   varselectTool=newcreatejs.util.FreeTransformTool();selectTool.name="transform";top.addChild(selectTool);

3. to select an when the user clicks it

   object.on("click",function(evt){selectTool.select(evt.currentTarget,stage);});

4. to unselect when user clicks the stage

   stage.addEventListener("click",function(){selectTool.unselect();});

Text handling

There is a known issue meaning that text rendering is inconsistent across browsers, when using any textBaseline value other than "alphabetic".

To get around this issue, we've supplied a file createjs.text-fix.js, which provides a fix by forcing the alphabetic baseline, and performs vertical offset to position text as if it were positioned "top".