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

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

39
tests/js/unitTests.js
View File

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