mirror of
https://github.com/konvajs/konva.git
synced 2025-04-28 18:03:13 +08:00
added support for linear gradients and radial gradients using the fill property
This commit is contained in:
Eric Rowell
parent
7d92a2099e
commit
f2976e7dd1
35
dist/kinetic-core.js
vendored
35
dist/kinetic-core.js
vendored
@ -2447,13 +2447,42 @@ Kinetic.Shape.prototype = {
|
||||
*/
|
||||
fillStroke: function() {
|
||||
var context = this.getContext();
|
||||
|
||||
var fill = this.attrs.fill;
|
||||
/*
|
||||
* expect that fill, stroke, and strokeWidth could be
|
||||
* undfined, '', null, or 0. Use !!
|
||||
*/
|
||||
if(!!this.attrs.fill) {
|
||||
context.fillStyle = this.attrs.fill;
|
||||
if(!!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();
|
||||
}
|
||||
|
||||
|
||||
29
dist/kinetic-core.min.js
vendored
29
dist/kinetic-core.min.js
vendored
File diff suppressed because one or more lines are too long
35
src/Shape.js
35
src/Shape.js
@ -71,13 +71,42 @@ Kinetic.Shape.prototype = {
|
||||
*/
|
||||
fillStroke: function() {
|
||||
var context = this.getContext();
|
||||
|
||||
var fill = this.attrs.fill;
|
||||
/*
|
||||
* expect that fill, stroke, and strokeWidth could be
|
||||
* undfined, '', null, or 0. Use !!
|
||||
*/
|
||||
if(!!this.attrs.fill) {
|
||||
context.fillStyle = this.attrs.fill;
|
||||
if(!!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();
|
||||
}
|
||||
|
||||
|
||||
@ -41,6 +41,78 @@ Test.prototype.tests = {
|
||||
layer.add(group);
|
||||
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) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
@ -909,99 +981,108 @@ Test.prototype.tests = {
|
||||
height: 200
|
||||
});
|
||||
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({
|
||||
//x: Math.random() * stage.getWidth() - 30,
|
||||
x: 200,
|
||||
y: 60,
|
||||
//y: Math.random() * stage.getHeight() - 50,
|
||||
y: 50,
|
||||
image: imageObj,
|
||||
animation: 'standing',
|
||||
animations: {
|
||||
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
|
||||
}]
|
||||
},
|
||||
animations: anims,
|
||||
index: 0,
|
||||
//frameRate: Math.random() * 6 + 6,
|
||||
frameRate: 10,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(sprite);
|
||||
sprite.start();
|
||||
//}
|
||||
|
||||
stage.add(layer);
|
||||
|
||||
sprite.start();
|
||||
|
||||
// kick once
|
||||
/*
|
||||
setTimeout(function() {
|
||||
sprite.setIndex(0);
|
||||
sprite.setAnimation('kicking');
|
||||
|
||||
setTimeout(function() {
|
||||
sprite.setIndex(0);
|
||||
sprite.setAnimation('kicking');
|
||||
|
||||
sprite.afterFrame(0, function() {
|
||||
sprite.setAnimation('standing');
|
||||
});
|
||||
}, 2000);
|
||||
setTimeout(function() {
|
||||
//sprite.start();
|
||||
}, 3000);
|
||||
sprite.afterFrame(0, function() {
|
||||
sprite.setAnimation('standing');
|
||||
});
|
||||
}, 2000);
|
||||
setTimeout(function() {
|
||||
//sprite.start();
|
||||
}, 3000);
|
||||
*/
|
||||
};
|
||||
imageObj.src = '../scorpion-sprite.png';
|
||||
},
|
||||
@ -2795,7 +2876,6 @@ Test.prototype.tests = {
|
||||
test(go.animations.length === 0, 'should be no animations running');
|
||||
test(stage.animRunning === false, 'animRunning should be false');
|
||||
|
||||
|
||||
rect.transitionTo({
|
||||
x: 300,
|
||||
duration: 1,
|
||||
@ -2810,6 +2890,6 @@ Test.prototype.tests = {
|
||||
test(go.animations.length === 1, 'should be no animations running');
|
||||
test(stage.animRunning === true, 'animRunning should be false');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user