lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-01-02 20:42:42 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

added shadow support. changed fillStroke method to shadowFillStroke

Browse Source
This commit is contained in:
Eric Rowell
2012-05-08 23:06:13 -07:00
parent 622278a510
commit a27741ce03
14 changed files with 306 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
tests/js/functionalTests.js
View File

@@ -27,41 +27,39 @@ Test.prototype.tests = {
easing: 'bounce-ease-out'
});
},
'TRANSITION - all transition types': function(containerId) {
document.getElementById(containerId).style.height = '300px';
'TRANSITION - all transition types': function(containerId) {
document.getElementById(containerId).style.height = '300px';
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 300
});
var layer = new Kinetic.Layer();
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 300
});
var layer = new Kinetic.Layer();
var easings = ['linear', 'ease-in', 'ease-out', 'ease-in-out', 'back-ease-in', 'back-ease-out', 'back-ease-in-out', 'elastic-ease-in', 'elastic-ease-out', 'elastic-ease-in-out', 'bounce-ease-out', 'bounce-ease-in', 'bounce-ease-in-out', 'strong-ease-in', 'strong-ease-out', 'strong-ease-in-out'];
for(var n = 0; n < easings.length; n++) {
var rect = new Kinetic.Rect({
x: 10,
y: 10 + (n * 200 / easings.length),
width: 100,
height: 10,
fill: 'green',
stroke: 'black',
strokeWidth: 2
});
var easings = ['linear', 'ease-in', 'ease-out', 'ease-in-out', 'back-ease-in', 'back-ease-out', 'back-ease-in-out', 'elastic-ease-in', 'elastic-ease-out', 'elastic-ease-in-out', 'bounce-ease-out', 'bounce-ease-in', 'bounce-ease-in-out', 'strong-ease-in', 'strong-ease-out', 'strong-ease-in-out'];
for(var n = 0; n < easings.length; n++) {
var rect = new Kinetic.Rect({
x: 10,
y: 10 + (n * 200 / easings.length),
width: 100,
height: 10,
fill: 'green',
stroke: 'black',
strokeWidth: 2
});
layer.add(rect);
layer.add(rect);
rect.transitionTo({
duration: 2,
width: 500,
easing: easings[n]
});
}
rect.transitionTo({
duration: 2,
width: 500,
easing: easings[n]
});
}
stage.add(layer);
},
stage.add(layer);
},
'TRANSITION - transition callback': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
@@ -1153,6 +1151,83 @@ Test.prototype.tests = {
layer.add(redCircle);
stage.add(layer);
},
'DRAG AND DROP - drag and drop elastic star with shadow': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var star = new Kinetic.Star({
x: 200,
y: 100,
numPoints: 5,
innerRadius: 40,
outerRadius: 70,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
lineJoin: "round",
shadowColor: '#aaa',
shadowBlur: 10,
shadowOffset: {
x: 5,
y: 5
},
draggable: true
});
layer.add(star);
stage.add(layer);
test(star.getLineJoin() === 'round', 'lineJoin property should be round');
star.setLineJoin('bevel');
test(star.getLineJoin() === 'bevel', 'lineJoin property should be bevel');
layer.draw();
var trans = null;
star.on('dragstart', function() {
if (trans) {
trans.stop();
}
star.setAttrs({
shadowOffset: {
x: 15,
y: 15
},
centerOffset: {
x: 10,
y: 10
}
})
});
star.on('dragend', function() {
trans = star.transitionTo({
duration: 0.5,
easing: 'elastic-ease-out',
shadowOffset: {
x: 5,
y: 5
},
centerOffset: {
x: 0,
y: 0
}
})
});
/*
stage.onFrame(function(frame) {
star.rotate(1 * frame.timeDiff / 1000);
layer.draw();
});
stage.start();
*/
},
'DRAG AND DROP - isDragging': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,