html5 - librerias - Cinética js arrastrar, soltar, redimensionar y rotar imagen

librerias drag and drop

Question

Estoy tratando de combinar arrastrar y soltar, cambiar el tamaño de la imagen y rotar la imagen al tacto , y la mía se está comportando de forma extraña http://jsfiddle.net/littlechad/Kuaxn/

Mi código es el siguiente:

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();

Parece que la actualización de la compensación es el problema, he intentado varias cosas para establecer la compensación de modo que se mantenga en el medio, pero todavía no puedo entender cómo, soy realmente nuevo en HTML5 y KineticJs , por favor, ayúdame en esta.

ACTUALIZACIÓN :

El violín anterior ya no funciona debido al color de relleno roto en los nuevos navegadores , he actualizado el violín , aunque no he podido encontrar la solución para esto.

Gracias

Answer 1

Estabas muy cerca, solo usando algunos nombres de métodos incorrectos, y como se dijo antes, el cdn necesita cambiar.

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();

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.getPointerPosition();
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: ''#fff'',
    fill: ''#fff'',
    strokeWidth: 2,
    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();