Konva перетащить изображения и падение пикапа/падение анимация

Question

Привет всем Я новичок в KonvaJS каркасных и был интересен, если кто-нибудь с большим количеством знаний о нем может дать мне руку при выполнении следующим:

Моей скрипки здесь показать код звезды и, щелкнув левой кнопкой мыши и удерживая кнопку мыши , забирает звезду как часть перетаскивание.

После того, как его выпустили капель звезда и имеет немного ослабляющую анимацию.

JSFIDDLE звезды.

Теперь это JSFIDDLE - это то, что я хочу, чтобы тот же эффект был как первая ссылка JSFiddle (звезда), но с использованием изображения вместо звезды.

Я попытался использовать тот же код, что и звезда, в моей версии изображения, но кажется, что у меня нет чего-то, связанного с именами и/или чем-то еще, что я забываю положить туда или позвонить.

Так что любая помощь, получая второй JSFiddle (изображение), работающая как звезда, была бы замечательной!

СТАР 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/