嘿,我是 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';