senocular / transformtool

Free Transform Tool (AS, JS) for manipulating objects in 2D space.

TransformTool

A Free Transform Tool for manipulating objects in 2D space.

2 versions of the Transform Tool are available, each with mostly different implementations:

• ActionScript 3.0
• JavaScript

ActionScript Version

This is an incomplete but mostly functional and fully featured version of the Transform Tool. Not everything works 100% but most of the juicy stuff is there.

JavaScript Version

This probably isn't ready for production work, but will get you most of the way there. There are no dependencies, and I don't think the code would be too terribly complex to adapt.

There are two sub-versions, one using canvas, and the other using SVG to transform DOM elements built off of the canvas implementation.

Examples

• http://senocular.github.com/TransformTool/examples/TransformCanvasPictures.html
• http://senocular.github.com/TransformTool/examples/TransformDOMPictures.html

🛂 Tested on Chrome 25, Win 7

transformtool's Issues

how to add image dynamically on canvas

how to add image dynamically on canvas via browse upload or anyway

Documentation for DOM Transformation Tool?

Hi,
This tool looks great. But would it be possible to get some docs or some information about how the selectors works?

It would be really helpful for anyone to quickly get started.

Would really appreciate any help.

Thanks,
Praney

Scaling DOM objects does not work in FireFox

Using the latest commit, a0f1fb9, the "DOM Scaling" examples do not work at all in FireFox (video).

The "Canvas" version works just fine in FireFox, and both examples work flawlessly in Chrome.

Running:

• 32-bit Ubuntu 13.04
• FireFox 22.0 (I can't find a more detailed "version" number like Chrome usually displays. Perhaps that's just how compact FireFox version numbers are.)

Oddly enough, I'm not getting any errors in JavaScript errors or warnings show up in the FireBug Console. I'm too inexperienced in this filthily untyped language to fix the issue on my own, but let me know if there is any way I can assist the debugging process.

Independent Pivot

Hello.

The rotation pivot from the custom tool is not element independent, I mean if you change its position in one element, this is reflected in the other elements under de dom container. That behavior is present here:

http://senocular.github.io/TransformTool/examples/TransformDOMPictures.html

Is this a default feature or just a bug? Thanks.

Dynamically Add image or text

Hello,
I am trying to add image and text dynamically in the #dom. I have a problem that when the add item click the transform controls are doubling. I have added the fiddle bellow.Can you please help me to fix this problem?

MY FIDDLE
http://jsfiddle.net/mpanuraj/nyeRz/

Thanks

How to put Text

How to put text elements in this tool

Help for a technical issue

Hi Senocular,

I know this is not an issue from your side.But if you can help or provide some lights on the issue mentioned
http://stackoverflow.com/questions/40300495/avoid-transformation-for-child-objects-in-easel-js-container

Looking for a help.

Thanks,
Ajai