Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
thoughtless

Adding a fixed rotation handle (TransformManager)

Recommended Posts

I'm working on a project that has purchased TransformManager. TransformManager works pretty well as-is, but I have gotten to the point that I need to add some customizations to the core class. Specifically, a single rotation handle. For a working example, you can look at senocular's tool -- http://www.senocular.com/demo/Transform ... mTool.html and click on an image and then "transform tool type". Any advice on how to do this with TransformManager?

 

I have it working, but if you scale the image at all, the rotate handle drifts.

 

The changes I made:

 

Added the following to plotHandles():

_handles[9].point = new Point(r.x + r.width / 2, r.y + r.height + 15);

 

And then added code that looks for that handle and draws the rotation handle. It seems that this .point gets updated on scale someplace, but I can't seem to find where. It works great and as expected when the element is first rendered, but after scaling, it drifts.

 

And a second question:

 

I notice for some elements (with transparency), you must click on a non-transparent area to get the element selected. I have a few ideas to fix this but I figured I'd just ask you here since I'm posting, any ideas on how to make the entire box clickable to select, instead of just the non-transparent parts?

 

Edit: It looks like the transparency problem I mentioned is the opposite problem of viewtopic.php?f=3&t=459 I was thinking I could apply some background color and set the alpha to 0 for the element as a fix for my problem. Any thoughts?

 

Thanks.

Link to comment
Share on other sites

TransformManager works pretty well as-is, but I have gotten to the point that I need to add some customizations to the core class. Specifically, a single rotation handle.... Any advice on how to do this with TransformManager?

 

I have it working, but if you scale the image at all, the rotate handle drifts.

 

Sorry, that's not a supported feature. I'm sure it's possible to implement, but it's not something I have time to build or troubleshoot for you (frankly, I have always found that style of interface ugly/clunky, but that's totally subjective and it's probably just because I'm a designer who's accustomed to the standard way most graphical programs do transformations like Illustrator/Photoshop). There's certainly nothing wrong with you putting that extra handle in there - I just don't typically provide free consulting services for custom modifications like that.

 

I notice for some elements (with transparency), you must click on a non-transparent area to get the element selected. I have a few ideas to fix this but I figured I'd just ask you here since I'm posting, any ideas on how to make the entire box clickable to select, instead of just the non-transparent parts?

 

The problem with doing what you're talking about is that it could cause functionality problems with overlapping objects where the user clicks on an object visually but accidentally selects an object on top of it instead because its bounding box overlapped where they clicked on the object below. See what I mean? But if you want to make transparent parts of your object clickable, all you'd need to do is put a rectangle Shape that has its alpha set to 0 inside your DisplayObject.

Link to comment
Share on other sites

Sorry, that's not a supported feature. I'm sure it's possible to implement, but it's not something I have time to build or troubleshoot for you

 

I agree it's ugly. But it is a requirement... I'm not looking for you to rewrite the class to work with my plans or even saying that senocular is better or anything like that. It was just a live example. There is a reason I chose your class and not that one. I was just hoping that since you have a more complete understanding of your code, you would instantly know why it would drift on scale and be able to give me a few pointers. And we did purchase your code, so I wouldn't exactly call it free...

 

The problem with doing what you're talking about is that it could cause functionality problems with overlapping objects

 

I agree with you here for most usage cases. Except, what if you had an image with a 1x1 px dot in the center -- but the image was 50x50? My problem is that I have text (in swf form -- inherited problem...) being imported and you have to try to grab a letter to move it. I could see this as being a good t/f option for future versions.

 

At any rate, thanks for your hard work on this and double thanks for the extended documentation. It has made it a breeze to get setup.

Link to comment
Share on other sites

To anyone interested, it was very easy to add the rotation handle.

 

As posted above, the following code is wrong:

_handles[9].point = new Point(r.x + r.width / 2, r.y + r.height + 15);

 

It should be:

_handles[9].point = new Point(r.x + r.width / 2, r.y + r.height);

 

I wanted the handle to be 15 px below the box, but it turns out, this was the core of the problem and was what was causing the handle to drift.

 

To just to recap, to add a single rotation handle that is fixed to the bottom of the bounding box, do the following (I may have forgotten something, but this will at least get you on the right track):

 

To function plotHandles, add the following at the end:

_handles[9].point = new Point(r.x + r.width / 2, r.y + r.height);	  //far bottom (rotate)

 

In function initSelection, add the following, just after the other similar declarations:

createHandle("fb", "other", -90, 0, "fb"); // far bottom, rotate

 

And finally, add the following to function redrawHandles. It should appear in the if function (in the for) that starts with "if (_handles.type == "corner" )"

			} else if (_handles[i].type == "other") { 
				r = _handles[i].rotationHandle;
				rx = ry = -halfH - 2;

				r.graphics.clear();
				r.graphics.lineStyle(1, _lineColor, 1);
				r.graphics.lineTo( 0, 15 );
				r.graphics.lineStyle(0, _lineColor, 0);
				r.graphics.beginFill(_lineColor, 1);
				r.graphics.drawEllipse(rx, ry+15, _handleSize + 4, _handleSize + 4);
				r.graphics.endFill();
			}

 

That draws a fixed handle at the bottom of the box, and includes my own custom hardcoded values which you will probably want to change.

 

I also changed the if to be "if (_handles.type == "corner" && 1 == 0 )" to disable the normal rotation handles.

 

Next, to figure out how I can change the cusor to a full rotation icon when hovering over the icon... or at the very least, the opposite direction.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×