lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-12-04 19:08:24 +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
Download Patch File Download Diff File Expand all files Collapse all files

35
src/Shape.js
View File

@@ -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();
}