काइनेटिक 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 और KineticJs पर नया हूं, कृपया इस पर मेरी सहायता करें।

अद्यतन:

ऊपर बेला नहीं रह गया है 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();