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

added support for shadow alpha property

Browse Source
This commit is contained in:
Eric Rowell 2012-05-19 22:11:33 -07:00
parent e60eb8be6e
commit 7fcf5f156a
4 changed files with 91 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
dist/kinetic-core.js vendored
View File

@ -2534,7 +2534,11 @@ Kinetic.Shape = function(config) {
stroke: undefined,
strokeWidth: undefined,
lineJoin: undefined,
detectionType: 'path'
detectionType: 'path',
shadow: {
blur: 5,
alpha: 1
}
});
this.data = [];
@ -2584,28 +2588,54 @@ Kinetic.Shape.prototype = {
}
},
/**
* applies shadows, fills, and styles
* applies shadow, fill, and stroke
*/
applyStyles: function() {
var context = this.getContext();
var aa = this.getAbsoluteAlpha();
/*
* if fill is defined, apply shadow to
* fill only and not the stroke
*/
if(!!this.attrs.fill) {
var sa = this.attrs.shadow.alpha;
context.save();
this.applyShadow();
this.fill();
if(sa === 1) {
this.applyShadow();
this.fill();
}
else {
context.save();
context.globalAlpha = sa * aa;
this.applyShadow();
this.fill();
context.restore();
this.fill();
}
context.restore();
this.stroke();
}
/*
* if fill is not defined, try applying the shadow
* if fill is not defined, apply the shadow
* to the stroke
*/
else {
this.applyShadow();
this.stroke();
if(sa === 1) {
this.applyShadow();
this.stroke();
}
else {
context.save();
context.globalAlpha = sa * aa;
this.applyShadow();
this.stroke();
context.restore();
this.stroke();
}
}
},
/**
@ -2662,9 +2692,6 @@ Kinetic.Shape.prototype = {
context.fillStyle = f;
context.fill();
}
// TODO: if using fill offset, save context, translate offset, fill(), then restore
}
},
/**
@ -2685,7 +2712,7 @@ Kinetic.Shape.prototype = {
var context = this.getContext();
var s = this.attrs.shadow;
if(s !== undefined) {
if(s.color !== undefined) {
context.shadowColor = s.color;
context.shadowBlur = s.blur;
context.shadowOffsetX = s.offset.x;

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

File diff suppressed because one or more lines are too long

49
src/Shape.js
View File

@ -23,7 +23,11 @@ Kinetic.Shape = function(config) {
stroke: undefined,
strokeWidth: undefined,
lineJoin: undefined,
detectionType: 'path'
detectionType: 'path',
shadow: {
blur: 5,
alpha: 1
}
});
this.data = [];
@ -73,28 +77,54 @@ Kinetic.Shape.prototype = {
}
},
/**
* applies shadows, fills, and styles
* applies shadow, fill, and stroke
*/
applyStyles: function() {
var context = this.getContext();
var aa = this.getAbsoluteAlpha();
/*
* if fill is defined, apply shadow to
* fill only and not the stroke
*/
if(!!this.attrs.fill) {
var sa = this.attrs.shadow.alpha;
context.save();
this.applyShadow();
this.fill();
if(sa === 1) {
this.applyShadow();
this.fill();
}
else {
context.save();
context.globalAlpha = sa * aa;
this.applyShadow();
this.fill();
context.restore();
this.fill();
}
context.restore();
this.stroke();
}
/*
* if fill is not defined, try applying the shadow
* if fill is not defined, apply the shadow
* to the stroke
*/
else {
this.applyShadow();
this.stroke();
if(sa === 1) {
this.applyShadow();
this.stroke();
}
else {
context.save();
context.globalAlpha = sa * aa;
this.applyShadow();
this.stroke();
context.restore();
this.stroke();
}
}
},
/**
@ -151,9 +181,6 @@ Kinetic.Shape.prototype = {
context.fillStyle = f;
context.fill();
}
// TODO: if using fill offset, save context, translate offset, fill(), then restore
}
},
/**
@ -174,7 +201,7 @@ Kinetic.Shape.prototype = {
var context = this.getContext();
var s = this.attrs.shadow;
if(s !== undefined) {
if(s.color !== undefined) {
context.shadowColor = s.color;
context.shadowBlur = s.blur;
context.shadowOffsetX = s.offset.x;

15
tests/js/unitTests.js
View File

@ -1490,6 +1490,14 @@ Test.prototype.tests = {
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 250,
y: 75,
width: 100,
height: 100,
fill: 'red'
});
var star = new Kinetic.Star({
x: 200,
y: 100,
@ -1501,14 +1509,17 @@ Test.prototype.tests = {
strokeWidth: 5,
lineJoin: "round",
shadow: {
color: '#aaa',
color: 'black',
blur: 10,
offset: [20, 20]
offset: [20, 20],
alpha: 0.5
},
draggable: true
});
layer.add(rect);
layer.add(star);
stage.add(layer);
test(star.getLineJoin() === 'round', 'lineJoin property should be round');