Rotating an image view - strange behavior

Hi all: I've been struggling with this for a while and have not been able to get it to work - the documented behavior seems incorrect for what I'm trying to do. Is there something wrong with the rotate matrix?

This is a puzzler...

Part of my app allows me to drop and resize/rotate images, all by using a corner handle. I am trying to duplicate a similar feature found in this app https://itunes.apple.com/us/app/line-camera/id516561342?mt=8 - Line Camera

In that app,when you drop a object into the editor, there is a handle on the upper right. Dragging the handle in and out will resize the image, while rotating the handle will rotate the image. So this is how I set it up

• Imageview for the image, with an anchorpoint of 0.5, 0.5
• imageview for the handle, located in top:0, right:0
• image.add(handle)

How can I tell if the user is resizing or rotating? Well, I capture the handles location on touchstart of the handle, and on touchmove of the handle, if the variance between the current location of the handle and the original location of the handle is up and to the right, or down and to the left, it resizes image. If the variance is up and to the left, it rotates image counterclockwise. If down and to the right, it rotates clockwise.

The resize works fine, but when I drag the handle to rotate, the image rotates around the HANDLE, not the image. For some reason, I can't tell the image to rotate around its center if the handle is attached to the image.

Here is the relevant code:

image = Ti.UI.createImageView({image:source.image,anchorPoint:{x:0.5,y:0.5}});
handle = Ti.UI.createImageView({image:"images/handle.png", top:0, right:0,zIndex:1000});
image.add(handle);
var gripStartPoint;
var olt = Titanium.UI.create2DMatrix();
 
handle.addEventListener('touchstart', function(e) {
      startHeight = image.size.height;
      startY = image.y;
      startWidth = image.size.width;
      gripStartPoint = e.source.convertPointToView({
            x: e.x,
            y: e.y
        }, editorPanel);
});
 
handle.addEventListener('touchmove', function(e) {
    var newPoint = e.source.convertPointToView({
            x: e.x,
            y: e.y
        }, editorPanel);
 
        var dist = calcDistance(gripStartPoint.x,gripStartPoint.y,newPoint.x,newPoint.y);
 
        var diffY = newPoint.y - gripStartPoint.y;
        var diffX = newPoint.x - gripStartPoint.x;
 
        // resize
 
        if ( (diffY < 0 & diffX >= 0) | (diffY > 0 & diffX <= 0 ) ) {   
            image.height = startHeight - diffY;
            image.y -= diffY;
            image.width = startWidth + diffX;
        }
 
        // rotate clockwise - based on distance from original handle location
 
        if (diffY > 0 & diffX > 0 ) {
                olt = olt.rotate(dist/10);
                image.transform = olt;          
            }
 
        // rotate counterclockwise - based on distance from original handle location 
 
        if (diffY < 0 & diffX < 0 ) {
                olt = olt.rotate(-dist/10);
                image.transform = olt;          
            }
 
     });
 
// calculate the distance between 2 points
 
function calcDistance(x1,y1,x2,y2) {
    var d = Math.sqrt(Math.pow((x1-x2),2)+Math.pow((y1-y2),2));
    Ti.API.info("distance: "+d);
    return d;
}

I get this feeling I'm missing something obvious. I have this feeling that the fact that the handle is attached to the image is causing this problem. If that is the case, does anyone know how I can synchronize the rotation and movement of two imageviews by dragging on of them without adding the handle to the image?

Please let me know what you think.

Thanks...Chris