Kinetic js拖放，调整大小和旋转图像

Question

我正在尝试结合 drag and drop resize image 和 rotating image on touch，而我的行为很奇怪 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和@真的很陌生987654329@，请帮帮我。

更新：

由于fillColor broken on new browsers，上述小提琴不再起作用，我有updated the fiddle，尽管我还没有找到解决方案。

谢谢

Answer 1

你非常接近，只是使用了一些不正确的方法名称，而且如前所述，cdn 需要更改。

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