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

小心复制/粘贴。您缺少图片的startScale和{{1}}属性。更新结果：http://jsfiddle.net/hpv16utu/4/

Konva图像拖放拾取/放下动画

1 个答案: