lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 05:01:41 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

added support for linear gradients and radial gradients using the fill property

Browse Source
This commit is contained in:
Eric Rowell 2012-05-03 14:20:50 -07:00
parent 7d92a2099e
commit f2976e7dd1
4 changed files with 225 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
dist/kinetic-core.js vendored
View File

@ -2447,13 +2447,42 @@ Kinetic.Shape.prototype = {
*/ */
fillStroke: function() { fillStroke: function() {
var context = this.getContext(); var context = this.getContext();
var fill = this.attrs.fill;
/* /*
* expect that fill, stroke, and strokeWidth could be * expect that fill, stroke, and strokeWidth could be
* undfined, '', null, or 0. Use !! * undfined, '', null, or 0. Use !!
*/ */
if(!!this.attrs.fill) { if(!!fill) {
context.fillStyle = this.attrs.fill; // color fill
if( typeof fill == 'string') {
f = this.attrs.fill;
}
else {
var s = fill.start;
var e = fill.end;
// linear gradient
if(s.x !== undefined && s.y !== undefined && e.x !== undefined && e.y !== undefined) {
var context = this.getContext();
var grd = context.createLinearGradient(s.x, s.y, e.x, e.y);
grd.addColorStop(0, s.color);
grd.addColorStop(1, e.color);
f = grd;
}
// radial gradient
else if(s.radius !== undefined && e.radius !== undefined) {
var context = this.getContext();
var grd = context.createRadialGradient(s.x, s.y, s.radius, s.x, s.y, e.radius);
grd.addColorStop(0, s.color);
grd.addColorStop(1, e.color);
f = grd;
}
else {
f = 'black';
}
}
context.fillStyle = f;
context.fill(); context.fill();
} }

29
dist/kinetic-core.min.js vendored
View File

File diff suppressed because one or more lines are too long

35
src/Shape.js
View File

@ -71,13 +71,42 @@ Kinetic.Shape.prototype = {
*/ */
fillStroke: function() { fillStroke: function() {
var context = this.getContext(); var context = this.getContext();
var fill = this.attrs.fill;
/* /*
* expect that fill, stroke, and strokeWidth could be * expect that fill, stroke, and strokeWidth could be
* undfined, '', null, or 0. Use !! * undfined, '', null, or 0. Use !!
*/ */
if(!!this.attrs.fill) { if(!!fill) {
context.fillStyle = this.attrs.fill; // color fill
if( typeof fill == 'string') {
f = this.attrs.fill;
}
else {
var s = fill.start;
var e = fill.end;
// linear gradient
if(s.x !== undefined && s.y !== undefined && e.x !== undefined && e.y !== undefined) {
var context = this.getContext();
var grd = context.createLinearGradient(s.x, s.y, e.x, e.y);
grd.addColorStop(0, s.color);
grd.addColorStop(1, e.color);
f = grd;
}
// radial gradient
else if(s.radius !== undefined && e.radius !== undefined) {
var context = this.getContext();
var grd = context.createRadialGradient(s.x, s.y, s.radius, s.x, s.y, e.radius);
grd.addColorStop(0, s.color);
grd.addColorStop(1, e.color);
f = grd;
}
else {
f = 'black';
}
}
context.fillStyle = f;
context.fill(); context.fill();
} }

242
tests/js/unitTests.js
View File

@ -41,6 +41,78 @@ Test.prototype.tests = {
layer.add(group); layer.add(group);
layer.draw(); layer.draw();
}, },
'STAGE - add shape with linear gradient fill': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: {
start: {
color: 'red',
x: -35,
y: -35
},
end: {
color: 'blue',
x: 35,
y: 35
}
},
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
draggable: true
});
group.add(circle);
layer.add(group);
stage.add(layer);
},
'STAGE - add shape with radial gradient fill': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: {
start: {
color: '#8ED6FF',
radius: 0,
x: -20,
y: -20
},
end: {
color: '#004CB3',
radius: 130
}
},
name: 'myCircle',
draggable: true,
scale: {
x: 0.5,
y: 0.5
}
});
group.add(circle);
layer.add(group);
stage.add(layer);
},
'STAGE - add layer then group then shape': function(containerId) { 'STAGE - add layer then group then shape': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
@ -909,99 +981,108 @@ Test.prototype.tests = {
height: 200 height: 200
}); });
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var anims = {
standing: [{
x: 0,
y: 0,
width: 49,
height: 109
}, {
x: 52,
y: 0,
width: 49,
height: 109
}, {
x: 105,
y: 0,
width: 49,
height: 109
}, {
x: 158,
y: 0,
width: 49,
height: 109
}, {
x: 210,
y: 0,
width: 49,
height: 109
}, {
x: 262,
y: 0,
width: 49,
height: 109
}],
kicking: [{
x: 0,
y: 109,
width: 45,
height: 98
}, {
x: 45,
y: 109,
width: 45,
height: 98
}, {
x: 95,
y: 109,
width: 63,
height: 98
}, {
x: 156,
y: 109,
width: 70,
height: 98
}, {
x: 229,
y: 109,
width: 60,
height: 98
}, {
x: 287,
y: 109,
width: 41,
height: 98
}]
};
//for(var n = 0; n < 50; n++) {
sprite = new Kinetic.Sprite({ sprite = new Kinetic.Sprite({
//x: Math.random() * stage.getWidth() - 30,
x: 200, x: 200,
y: 60, //y: Math.random() * stage.getHeight() - 50,
y: 50,
image: imageObj, image: imageObj,
animation: 'standing', animation: 'standing',
animations: { animations: anims,
standing: [{
x: 0,
y: 0,
width: 49,
height: 109
}, {
x: 52,
y: 0,
width: 49,
height: 109
}, {
x: 105,
y: 0,
width: 49,
height: 109
}, {
x: 158,
y: 0,
width: 49,
height: 109
}, {
x: 210,
y: 0,
width: 49,
height: 109
}, {
x: 262,
y: 0,
width: 49,
height: 109
}],
kicking: [{
x: 0,
y: 109,
width: 45,
height: 98
}, {
x: 45,
y: 109,
width: 45,
height: 98
}, {
x: 95,
y: 109,
width: 63,
height: 98
}, {
x: 156,
y: 109,
width: 70,
height: 98
}, {
x: 229,
y: 109,
width: 60,
height: 98
}, {
x: 287,
y: 109,
width: 41,
height: 98
}]
},
index: 0, index: 0,
//frameRate: Math.random() * 6 + 6,
frameRate: 10, frameRate: 10,
draggable: true draggable: true
}); });
layer.add(sprite); layer.add(sprite);
sprite.start();
//}
stage.add(layer); stage.add(layer);
sprite.start();
// kick once // kick once
/*
setTimeout(function() {
sprite.setIndex(0);
sprite.setAnimation('kicking');
setTimeout(function() { sprite.afterFrame(0, function() {
sprite.setIndex(0); sprite.setAnimation('standing');
sprite.setAnimation('kicking'); });
}, 2000);
sprite.afterFrame(0, function() { setTimeout(function() {
sprite.setAnimation('standing'); //sprite.start();
}); }, 3000);
}, 2000); */
setTimeout(function() {
//sprite.start();
}, 3000);
}; };
imageObj.src = '../scorpion-sprite.png'; imageObj.src = '../scorpion-sprite.png';
}, },
@ -2795,7 +2876,6 @@ Test.prototype.tests = {
test(go.animations.length === 0, 'should be no animations running'); test(go.animations.length === 0, 'should be no animations running');
test(stage.animRunning === false, 'animRunning should be false'); test(stage.animRunning === false, 'animRunning should be false');
rect.transitionTo({ rect.transitionTo({
x: 300, x: 300,
duration: 1, duration: 1,
@ -2810,6 +2890,6 @@ Test.prototype.tests = {
test(go.animations.length === 1, 'should be no animations running'); test(go.animations.length === 1, 'should be no animations running');
test(stage.animRunning === true, 'animRunning should be false'); test(stage.animRunning === true, 'animRunning should be false');
} }
}); });
} }
}; };