html - Kinetic js 画像のドラッグ、ドロップ、サイズ変更、回転

Question

私はドラッグアンドドロップのサイズ変更画像と回転画像をタッチで組み合わせようとしていますが、私の動作は奇妙ですhttp://jsfiddle.net/littlechad/Kuaxn/

私のコードは次のとおりです。

function update (activeAnchor) {
    var group       = activeAnchor.getParent();
    var topLeft     = group.get('.topLeft')[0];
    var topRight    = group.get('.topRight')[0];
    var bottomRight = group.get('.bottomRight')[0];
    var bottomLeft  = group.get('.bottomLeft')[0];
    var image       = group.get('.image')[0];
    var stage       = group.getStage();

    var anchorX     = activeAnchor.getX();
    var anchorY     = activeAnchor.getY();

    // update anchor positions
    switch (activeAnchor.getName()) {
        case 'topLeft':
            topRight.setY(anchorY);
            bottomLeft.setX(anchorX);
            break;
        case 'topRight':
            topLeft.setY(anchorY);
            bottomRight.setX(anchorX);
            break;
        case 'bottomRight':
            bottomLeft.setY(anchorY);
            topRight.setX(anchorX); 
            break;
        case 'bottomLeft':
            bottomRight.setY(anchorY);
            topLeft.setX(anchorX); 
            break;
    }

    image.setPosition(topLeft.getPosition());

    var height          = bottomLeft.attrs.y - topLeft.attrs.y;
    var width           = image.getWidth()*height/image.getHeight();

    topRight.attrs.x    = topLeft.attrs.x + width
    topRight.attrs.y    = topLeft.attrs.y;
    bottomRight.attrs.x = topLeft.attrs.x + width;
    bottomRight.attrs.y = topLeft.attrs.y + height;

    if (width && height) {
        image.setSize(width, height);
    }
}

function rotate (activeAnchor) {
    var group       = activeAnchor.getParent();
    var topLeft     = group.get('.topLeft')[0];
    var topRight    = group.get('.topRight')[0];
    var bottomRight = group.get('.bottomRight')[0];
    var bottomLeft  = group.get('.bottomLeft')[0];
    var image       = group.get('.image')[0];
    var stage       = group.getStage();

    var pos         = stage.getMousePosition();
    var xd          = 150 - pos.x ;
    var yd          = 150 - pos.y ;
    var theta       = Math.atan2(yd, xd);
    var degree      = theta / (Math.PI / 180) - 45;

    var height      = bottomLeft.attrs.y - topLeft.attrs.y;
    var width       = image.getWidth() * height / image.getHeight();

    console.log(degree);        
    console.log(width);
    console.log(height);

    image.setRotationDeg(degree);

    return {
        x: image.getAbsolutePosition().x,
        y: image.getAbsolutePosition().y
    }
}

function addAnchor (group, x, y, name) {
    var stage  = group.getStage();
    var layer  = group.getLayer();
    var anchor = new Kinetic.Circle({
        x: x,
        y: y,
        stroke: 'transparent',
        strokeWidth: 0,
        radius: 20,
        name: name,
        draggable: false,
        dragOnTop: false
    });

    if(name === 'topRight'){
        var anchor = new Kinetic.Circle({
            x: x,
            y: y,
            stroke: '#666',
            fill: '#ddd',
            strokeWidth: 2,
            radius: 20,
            name: name,
            draggable: true,
            dragOnTop: false
        }); 
    }

    anchor.on('dragmove', function () {
        update(this);
        rotate(this);
        layer.draw();
    });

    anchor.on('mousedown touchstart', function () {
        group.setDraggable(false);
        this.moveToTop();
    });

    anchor.on('dragend', function () {
        group.setDraggable(true);
        layer.draw();
    });

    group.add(anchor);

}    

function initStage () {

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 500,
        height: 800
    });

    var imageGroup = new Kinetic.Group({
        x: 150,
        y: 150,
        draggable: true,
    });

    var layer  = new Kinetic.Layer({
        width: 128,
        height: 128,
        offset: [64, 64]
    });

    layer.add(imageGroup);

    var imgObj        = new Image();

    var imageInstance = new Kinetic.Image({
        x: 0,
        y: 0,
        image: imgObj,
        width: 200,
        height: 138,
        name: 'image',
    });

    imgObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

    imageGroup.add(imageInstance);
    addAnchor(imageGroup, 0, 0, 'topLeft');
    addAnchor(imageGroup, 200, 0, 'topRight');
    addAnchor(imageGroup, 200, 138, 'bottomRight');
    addAnchor(imageGroup, 0, 138, 'bottomLeft');

    imageGroup.on('dragstart', function() {
        update(this);
        rotate(this);
        this.moveToTop();
    });

    stage.add(layer);
    stage.draw();
}

function writeMessage (messageLayer, message) {
    var context = messageLayer.getContext();
    messageLayer.clear();
    context.font = '18pt Calibri';
    context.fillStyle = 'black';
    context.fillText(message, 10, 25);
}

//loadImages(sources, initStage);
initStage();

HTML5オフセットの更新が問題のようです。オフセットを設定して中間にとどまるようにいくつかのことを試みましたが、まだ方法がわかりKineticJsません。

更新：

上記のフィドルは、新しいブラウザーで fillColor が壊れているため、機能しなくなりました。フィドルを更新しましたが、これに対する解決策を見つけることはできませんでした。

ありがとう