improved shadow logic such that it first attempts to apply shadows to a shape's fill if it's defined, otherwise it will attempt to apply the shadow to the stroke

This commit is contained in:
Eric Rowell 2012-05-09 19:15:49 -07:00
parent 16c251bb97
commit 2993191fe6
5 changed files with 53 additions and 27 deletions

33
dist/kinetic-core.js vendored
View File

@ -356,12 +356,15 @@ Kinetic.Node.prototype = {
case 'centerOffset':
this._setPointAttr(key, val);
break;
case 'shadowOffset':
this._setPointAttr(key, val);
break;
case 'scale':
this._setPointAttr(key, val);
break;
case 'points':
/*
* if points contains an array of object, just set
* if points contains an array of objects, just set
* the attr normally
*/
if(Kinetic.GlobalObject._isObject(val[0])) {
@ -2493,11 +2496,25 @@ Kinetic.Shape.prototype = {
*/
shadowFillStroke: function() {
var context = this.getContext();
context.save();
this.applyShadow();
this.fill();
context.restore();
this.stroke();
/*
* if fill is defined, apply shadow to
* fill only and not the stroke
*/
if(!!this.attrs.fill) {
context.save();
this.applyShadow();
this.fill();
context.restore();
this.stroke();
}
/*
* if fill is not defined, try applying the shadow
* to the stroke
*/
else {
this.applyShadow();
this.stroke();
}
},
/**
* helper method to fill and stroke a shape
@ -2506,10 +2523,6 @@ Kinetic.Shape.prototype = {
fill: function() {
var context = this.getContext();
var fill = this.attrs.fill;
/*
* expect that fill, stroke, and strokeWidth could be
* undfined, '', null, or 0. Use !!
*/
if(!!fill) {
// color fill
if( typeof fill == 'string') {

File diff suppressed because one or more lines are too long

View File

@ -172,12 +172,15 @@ Kinetic.Node.prototype = {
case 'centerOffset':
this._setPointAttr(key, val);
break;
case 'shadowOffset':
this._setPointAttr(key, val);
break;
case 'scale':
this._setPointAttr(key, val);
break;
case 'points':
/*
* if points contains an array of object, just set
* if points contains an array of objects, just set
* the attr normally
*/
if(Kinetic.GlobalObject._isObject(val[0])) {

View File

@ -77,11 +77,25 @@ Kinetic.Shape.prototype = {
*/
shadowFillStroke: function() {
var context = this.getContext();
context.save();
this.applyShadow();
this.fill();
context.restore();
this.stroke();
/*
* if fill is defined, apply shadow to
* fill only and not the stroke
*/
if(!!this.attrs.fill) {
context.save();
this.applyShadow();
this.fill();
context.restore();
this.stroke();
}
/*
* if fill is not defined, try applying the shadow
* to the stroke
*/
else {
this.applyShadow();
this.stroke();
}
},
/**
* helper method to fill and stroke a shape
@ -90,10 +104,6 @@ Kinetic.Shape.prototype = {
fill: function() {
var context = this.getContext();
var fill = this.attrs.fill;
/*
* expect that fill, stroke, and strokeWidth could be
* undfined, '', null, or 0. Use !!
*/
if(!!fill) {
// color fill
if( typeof fill == 'string') {

View File

@ -1268,7 +1268,10 @@ Test.prototype.tests = {
lineCap: 'round',
lineJoin: 'round',
draggable: true,
dashArray: [30, 10, 0, 10, 10, 20]
dashArray: [30, 10, 0, 10, 10, 20],
shadowColor: '#aaa',
shadowBlur: 10,
shadowOffset: [20, 20],
});
layer.add(line);
@ -1423,10 +1426,7 @@ Test.prototype.tests = {
lineJoin: "round",
shadowColor: '#aaa',
shadowBlur: 10,
shadowOffset: {
x: 20,
y: 20
},
shadowOffset: [20, 20],
draggable: true
});