Skip to content

ReCreateJS/createjs-free-transform-tool

Repository files navigation

CreateJS: EaselJS - Free Transform Tool

Build Status

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 your stage in top of everything

    var top = new createjs.Container(); top.name = "top"; stage.addChild(top);
  2. add the transform tool inside the top layer

    var selectTool = new createjs.util.FreeTransformTool(); selectTool.name = "transform"; top.addChild(selectTool);
  3. to select any object for example when the user click on that object

    object.on("click", function(evt) { selectTool.select(evt.currentTarget, stage); });
  4. to unselect object for example when the user click on the stage

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

About

free transform tool for createjs canvas library

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 96.3%
  • HTML 3.7%