Konva圖像拖放皮卡/落動畫

Question

嘿所有我在KonvaJS框架新的，並想知道如果任何人有關於它的更多的知識能夠給我一個手做以下幾點：這裏

我的小提琴顯示一些明星的代碼，並且當左鍵單擊並按住鼠標按鈕時拿起明星作爲拖放功能的一部分。

一旦釋放它下降明星，並有一點點緩動畫。

JSFIDDLE的明星。

現在，這個JSFIDDLE就是我想要的效果與第一個JSFiddle鏈接（星號）相同，但是使用圖片而不是星號。

我試圖使用與我的圖像版本中的明星相同的代碼，但它似乎缺少與名稱和/或其他我忘記放在那裏或打電話相關的內容。

所以任何幫助讓第二個JSFiddle（圖像）像星星一樣工作會很棒！

的STAR JS代碼：

var width = window.innerWidth; 
var height = window.innerHeight; 
var tween = null; 

function addStar(layer, stage) { 
    var scale = Math.random(); 
    var star = new Konva.Star({ 
    x: 110, 
    y: 120, 
    numPoints: 5, 
    innerRadius: 30, 
    outerRadius: 50, 
    fill: '#89b717', 
    opacity: 0.8, 
    draggable: true, 
    scale: { 
     x : scale, 
     y : scale 
    }, 
    shadowColor: 'black', 
    shadowBlur: 10, 
    shadowOffset: { 
     x : 5, 
     y : 5 
    }, 
    shadowOpacity: 0.6, 
    // custom attribute 
    startScale: scale 
    }); 

    layer.add(star); 
} 
var stage = new Konva.Stage({ 
    container: 'container', 
    width: width, 
    height: height 
}); 

var layer = new Konva.Layer(); 
var dragLayer = new Konva.Layer(); 

addStar(layer, stage); 
stage.add(layer, dragLayer); 

stage.on('dragstart', function(evt) { 
    var shape = evt.target; 
    // moving to another layer will improve dragging performance 
    shape.moveTo(dragLayer); 
    stage.draw(); 

    if (tween) { 
    tween.pause(); 
    } 
    shape.setAttrs({ 
    shadowOffset: { 
     x: 15, 
     y: 15 
    }, 
    easing: Konva.Easings.BounceEaseIn, 
    scale: { 
     x: shape.getAttr('startScale') * 1.2, 
     y: shape.getAttr('startScale') * 1.2 
    } 
    }); 
}); 

stage.on('dragend', function(evt) { 
    var shape = evt.target; 
    shape.moveTo(layer); 
    stage.draw(); 
    shape.to({ 
    duration: 0.5, 
    easing: Konva.Easings.ElasticEaseOut, 
    scaleX: shape.getAttr('startScale'), 
    scaleY: shape.getAttr('startScale'), 
    shadowOffsetX: 5, 
    shadowOffsetY: 5 
    }); 
}); 

的IMAGE JS代碼：

var width = window.innerWidth; 
var height = window.innerHeight; 

function drawImage(imageObj) { 
    var stage = new Konva.Stage({ 
     container: 'container', 
     width: width, 
     height: height 
    }); 

    var layer = new Konva.Layer(); 
    // darth vader 
    var darthVaderImg = new Konva.Image({ 
     image: imageObj, 
     x: stage.getWidth()/2 - 200/2, 
     y: stage.getHeight()/2 - 137/2, 
     width: 200, 
     height: 137, 
     opacity: 0.8, 
     shadowColor: 'black', 
     shadowBlur: 5, 
     shadowOffset: { 
      x: 0, 
      y: 0 
     }, 
     shadowOpacity: 0.6, 
     draggable: true 
    }); 

    // add cursor styling 
    darthVaderImg.on('mouseover', function() { 
     document.body.style.cursor = 'pointer'; 
    }); 
    darthVaderImg.on('mouseout', function() { 
     document.body.style.cursor = 'default'; 
    }); 

    stage.on('dragstart', function (evt) { 
     var shape = evt.target; 
     // moving to another layer will improve dragging performance 
     shape.moveTo(dragLayer); 
     stage.draw(); 

     if (tween) { 
      tween.pause(); 
     } 
     shape.setAttrs({ 
      shadowOffset: { 
       x: 15, 
       y: 15 
      }, 
      scale: { 
       x: shape.getAttr('startScale') * 1.2, 
       y: shape.getAttr('startScale') * 1.2 
      } 
     }); 
    }); 

    stage.on('dragend', function (evt) { 
     var shape = evt.target; 
     shape.moveTo(layer); 
     stage.draw(); 
     shape.to({ 
      duration: 0.5, 
      easing: Konva.Easings.ElasticEaseOut, 
      scaleX: shape.getAttr('startScale'), 
      scaleY: shape.getAttr('startScale'), 
      shadowOffsetX: 5, 
      shadowOffsetY: 5 
     }); 
    }); 

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

var imageObj = new Image(); 

imageObj.onload = function() { 
    drawImage(this); 
}; 

imageObj.src = 'http://konvajs.github.io/assets/darth-vader.jpg'; 

Answer 1

只是要小心複製/粘貼。您缺少圖像的dragLayer和startScale屬性。 更新結果：http://jsfiddle.net/hpv16utu/4/