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

linear and radial gradients can now have any number of color stops

Browse Source
This commit is contained in:
Eric Rowell 2012-05-20 11:12:07 -07:00
parent 4ba2818f97
commit 2331222459
4 changed files with 54 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
dist/kinetic-core.js vendored
View File

@ -2626,7 +2626,7 @@ Kinetic.Shape.prototype = {
context.fillStyle = f;
context.fill();
}
// pattern fill
// pattern
else if(fill.image !== undefined) {
var repeat = fill.repeat === undefined ? 'repeat' : fill.repeat;
f = context.createPattern(fill.image, repeat);
@ -2637,12 +2637,16 @@ Kinetic.Shape.prototype = {
context.fill();
context.restore();
}
// gradient fill
else if(s.x !== undefined && s.y !== undefined && e.x !== undefined && e.y !== undefined) {
// linear gradient
else if(s.radius === undefined && e.radius === 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);
var colorStops = fill.colorStops;
// build color stops
for(var n = 0; n < colorStops.length; n += 2) {
grd.addColorStop(colorStops[n], colorStops[n + 1]);
}
f = grd;
context.fillStyle = f;
context.fill();
@ -2650,9 +2654,13 @@ Kinetic.Shape.prototype = {
// 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);
var grd = context.createRadialGradient(s.x, s.y, s.radius, e.x, e.y, e.radius);
var colorStops = fill.colorStops;
// build color stops
for(var n = 0; n < colorStops.length; n += 2) {
grd.addColorStop(colorStops[n], colorStops[n + 1]);
}
f = grd;
context.fillStyle = f;
context.fill();

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

File diff suppressed because one or more lines are too long

24
src/Shape.js
View File

@ -116,7 +116,7 @@ Kinetic.Shape.prototype = {
context.fillStyle = f;
context.fill();
}
// pattern fill
// pattern
else if(fill.image !== undefined) {
var repeat = fill.repeat === undefined ? 'repeat' : fill.repeat;
f = context.createPattern(fill.image, repeat);
@ -127,12 +127,16 @@ Kinetic.Shape.prototype = {
context.fill();
context.restore();
}
// gradient fill
else if(s.x !== undefined && s.y !== undefined && e.x !== undefined && e.y !== undefined) {
// linear gradient
else if(s.radius === undefined && e.radius === 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);
var colorStops = fill.colorStops;
// build color stops
for(var n = 0; n < colorStops.length; n += 2) {
grd.addColorStop(colorStops[n], colorStops[n + 1]);
}
f = grd;
context.fillStyle = f;
context.fill();
@ -140,9 +144,13 @@ Kinetic.Shape.prototype = {
// 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);
var grd = context.createRadialGradient(s.x, s.y, s.radius, e.x, e.y, e.radius);
var colorStops = fill.colorStops;
// build color stops
for(var n = 0; n < colorStops.length; n += 2) {
grd.addColorStop(colorStops[n], colorStops[n + 1]);
}
f = grd;
context.fillStyle = f;
context.fill();

39
tests/js/unitTests.js
View File

@ -57,15 +57,14 @@ Test.prototype.tests = {
radius: 70,
fill: {
start: {
color: 'red',
x: -35,
y: -35
},
end: {
color: 'blue',
x: 35,
y: 35
}
},
colorStops: [0, 'red', 1, 'blue']
},
stroke: 'black',
strokeWidth: 4,
@ -112,7 +111,7 @@ Test.prototype.tests = {
imageObj.src = '../darth-vader.jpg';
},
'STAGE - add shape with radial gradient fill': function(containerId) {
'SHAPE - add circle with radial gradient fill': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@ -126,15 +125,16 @@ Test.prototype.tests = {
radius: 70,
fill: {
start: {
color: '#8ED6FF',
radius: 0,
x: -20,
y: -20
y: -20,
radius: 0
},
end: {
color: '#004CB3',
x: -60,
y: -60,
radius: 130
}
},
colorStops: [0, 'red', 0.2, 'yellow', 1, 'blue']
},
name: 'myCircle',
draggable: true,
@ -148,16 +148,17 @@ Test.prototype.tests = {
layer.add(group);
stage.add(layer);
/*
circle.transitionTo({
duration: 1,
fill: {
start: {
x: 20
}
}
});
*/
var fill = circle.getFill();
test(fill.start.x === -20, 'fill start x should be 20');
test(fill.start.y === -20, 'fill start y should be 20');
test(fill.start.radius === 0, 'fill start radius should be 0');
test(fill.end.x === -60, 'fill end x should be 60');
test(fill.end.y === -60, 'fill end y should be 60');
test(fill.end.radius === 130, 'fill end radius should be 130');
test(fill.colorStops.length === 6, 'fill colorStops length should be 6');
},
'STAGE - add shape with alpha': function(containerId) {