lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-24 19:03:56 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

added enabler and disabler functions to toggle shape attrs that are either on or off, such as fill, stroke, shadow, and dashArray. Also fixed problem with shadows not being applied to non color filled shapes

Browse Source
This commit is contained in:
Eric Rowell 2013-01-23 23:08:01 -08:00
parent 1502819e9b
commit 624ec25c29
4 changed files with 296 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/Canvas.js
View File

@ -124,7 +124,9 @@
* @param {Kinetic.Shape} shape
*/
fill: function(shape) {
this._fill(shape);
if(shape.getFillEnabled()) {
this._fill(shape);
}
},
/**
* stroke shape
@ -133,7 +135,9 @@
* @param {Kinetic.Shape} shape
*/
stroke: function(shape) {
this._stroke(shape);
if(shape.getStrokeEnabled()) {
this._stroke(shape);
}
},
/**
* fill, stroke, and apply shadows
@ -144,8 +148,14 @@
* @param {Kinetic.Shape} shape
*/
fillStroke: function(shape) {
this._fill(shape);
this._stroke(shape, shape.hasShadow() && shape.getFill());
var fillEnabled = shape.getFillEnabled();
if(fillEnabled) {
this._fill(shape);
}
if(shape.getStrokeEnabled()) {
this._stroke(shape, shape.hasShadow() && shape.hasFill() && fillEnabled);
}
},
/**
* apply shadow
@ -283,7 +293,7 @@
if(stroke || strokeWidth) {
context.save();
this._applyLineCap(shape);
if(dashArray) {
if(dashArray && shape.getDashArrayEnabled()) {
if(context.setLineDash) {
context.setLineDash(dashArray);
}
@ -303,7 +313,7 @@
},
_applyShadow: function(shape) {
var context = this.context;
if(shape.hasShadow()) {
if(shape.hasShadow() && shape.getShadowEnabled()) {
var aa = shape.getAbsoluteOpacity();
// defaults
var color = shape.getShadowColor() || 'black';

47
src/Shape.js
View File

@ -40,9 +40,9 @@
* @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number
* between 0 and 1
* @param {Array} [config.dashArray]
*
*
*
*
*
*
* @param {Number} [config.x]
* @param {Number} [config.y]
* @param {Number} [config.width]
@ -69,6 +69,13 @@
Kinetic.Shape.prototype = {
_initShape: function(config) {
this.setDefaultAttrs({
fillEnabled: true,
strokeEnabled: true,
shadowEnabled: true,
dashArrayEnabled: true
});
this.nodeType = 'Shape';
// set colorKey
@ -112,6 +119,14 @@
hasShadow: function() {
return !!(this.getShadowColor() || this.getShadowBlur() || this.getShadowOffset());
},
/**
* returns whether or not a fill will be rendered
* @name hasFill
* @methodOf Kinetic.Shape.prototype
*/
hasFill: function() {
return !!(this.getFill() || this.getFillPatternImage() || this.getFillLinearGradientStartPoint() || this.getFillRadialGradientStartPoint());
},
_get: function(selector) {
return this.nodeType === selector || this.shapeType === selector ? [this] : [];
},
@ -133,6 +148,30 @@
var p = hitCanvas.context.getImageData(Math.round(pos.x), Math.round(pos.y), 1, 1).data;
return p[3] > 0;
},
enableFill: function() {
this.setAttr('fillEnabled', true);
},
disableFill: function() {
this.setAttr('fillEnabled', false);
},
enableStroke: function() {
this.setAttr('strokeEnabled', true);
},
disableStroke: function() {
this.setAttr('strokeEnabled', false);
},
enableShadow: function() {
this.setAttr('shadowEnabled', true);
},
disableShadow: function() {
this.setAttr('shadowEnabled', false);
},
enableDashArray: function() {
this.setAttr('dashArrayEnabled', true);
},
disableDashArray: function() {
this.setAttr('dashArrayEnabled', false);
},
remove: function() {
Kinetic.Node.prototype.remove.call(this);
delete Kinetic.Global.shapes[this.colorKey];
@ -175,7 +214,7 @@
Kinetic.Global.extend(Kinetic.Shape, Kinetic.Node);
// add getters and setters
Kinetic.Node.addGettersSetters(Kinetic.Shape, ['stroke', 'lineJoin', 'lineCap', 'strokeWidth', 'drawFunc', 'drawHitFunc', 'dashArray', 'shadowColor', 'shadowBlur', 'shadowOpacity', 'fillPatternImage', 'fill', 'fillPatternX', 'fillPatternY', 'fillLinearGradientColorStops', 'fillRadialGradientStartRadius', 'fillRadialGradientEndRadius', 'fillRadialGradientColorStops', 'fillPatternRepeat']);
Kinetic.Node.addGettersSetters(Kinetic.Shape, ['stroke', 'lineJoin', 'lineCap', 'strokeWidth', 'drawFunc', 'drawHitFunc', 'dashArray', 'shadowColor', 'shadowBlur', 'shadowOpacity', 'fillPatternImage', 'fill', 'fillPatternX', 'fillPatternY', 'fillLinearGradientColorStops', 'fillRadialGradientStartRadius', 'fillRadialGradientEndRadius', 'fillRadialGradientColorStops', 'fillPatternRepeat', 'fillEnabled', 'strokeEnabled', 'shadowEnabled', 'dashArrayEnabled']);
/**
* set stroke color

5
tests/assets/unitDataUrls.js
View File

File diff suppressed because one or more lines are too long

233
tests/js/unit/shapeTests.js
View File

@ -350,7 +350,7 @@ Test.Modules.SHAPE = {
circle.setFillLinearGradientStartPoint(-35);
circle.setFillLinearGradientEndPoint(35);
circle.setFillLinearGradientColorStops([0, 'red', 1, 'blue']);
circle.setFillLinearGradientStartPoint(null);
circle.setFillPatternImage(imageObj);
circle.setFillPatternRepeat('repeat');
@ -359,5 +359,236 @@ Test.Modules.SHAPE = {
layer.draw();
};
imageObj.src = '../assets/darth-vader.jpg';
},
'everything enabled': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: 10,
dashArray: [10, 10],
fillEnabled: true,
strokeEnabled: true,
shadowEnabled: true,
dashArrayEnabled: true
});
layer.add(circle);
stage.add(layer);
//console.log(layer.toDataURL());
test(layer.toDataURL() === dataUrls['everything enabled'], 'should be circle with green fill, dashed stroke, and shadow');
},
'fill disabled': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: 10,
dashArray: [10, 10],
fillEnabled: false,
strokeEnabled: true,
shadowEnabled: true,
dashArrayEnabled: true
});
layer.add(circle);
stage.add(layer);
//console.log(layer.toDataURL());
test(layer.toDataURL() === dataUrls['fill disabled'], 'should be circle with no fill, dashed stroke, and shadow');
},
'stroke disabled': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: 10,
dashArray: [10, 10],
fillEnabled: true,
strokeEnabled: false,
shadowEnabled: true,
dashArrayEnabled: true
});
layer.add(circle);
stage.add(layer);
//console.log(layer.toDataURL());
test(layer.toDataURL() === dataUrls['stroke disabled'], 'should be circle with green fill, no stroke, and shadow');
},
'dash array disabled': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: 10,
dashArray: [10, 10],
fillEnabled: true,
strokeEnabled: true,
shadowEnabled: true,
dashArrayEnabled: false
});
layer.add(circle);
stage.add(layer);
//console.log(layer.toDataURL());
test(layer.toDataURL() === dataUrls['dash array disabled'], 'should be circle with green fill, solid stroke, and shadow');
},
'shadow disabled': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: 10,
dashArray: [10, 10],
fillEnabled: true,
strokeEnabled: true,
shadowEnabled: false,
dashArrayEnabled: true
});
layer.add(circle);
stage.add(layer);
//console.log(layer.toDataURL());
test(layer.toDataURL() === dataUrls['shadow disabled'], 'should be circle with green fill, dashed stroke, and no shadow');
},
'test enablers and disablers': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: 10,
dashArray: [10, 10]
});
layer.add(circle);
stage.add(layer);
test(circle.getFillEnabled() === true, 'fillEnabled should be true');
test(circle.getStrokeEnabled() === true, 'strokeEnabled should be true');
test(circle.getShadowEnabled() === true, 'shadowEnabled should be true');
test(circle.getDashArrayEnabled() === true, 'dashArrayEnabled should be true');
circle.disableFill();
test(circle.getFillEnabled() === false, 'fillEnabled should be false');
test(circle.getStrokeEnabled() === true, 'strokeEnabled should be true');
test(circle.getShadowEnabled() === true, 'shadowEnabled should be true');
test(circle.getDashArrayEnabled() === true, 'dashArrayEnabled should be true');
circle.disableStroke();
test(circle.getFillEnabled() === false, 'fillEnabled should be false');
test(circle.getStrokeEnabled() === false, 'strokeEnabled should be false');
test(circle.getShadowEnabled() === true, 'shadowEnabled should be true');
test(circle.getDashArrayEnabled() === true, 'dashArrayEnabled should be true');
circle.disableShadow();
test(circle.getFillEnabled() === false, 'fillEnabled should be false');
test(circle.getStrokeEnabled() === false, 'strokeEnabled should be false');
test(circle.getShadowEnabled() === false, 'shadowEnabled should be false');
test(circle.getDashArrayEnabled() === true, 'dashArrayEnabled should be true');
circle.disableDashArray();
test(circle.getFillEnabled() === false, 'fillEnabled should be false');
test(circle.getStrokeEnabled() === false, 'strokeEnabled should be false');
test(circle.getShadowEnabled() === false, 'shadowEnabled should be false');
test(circle.getDashArrayEnabled() === false, 'dashArrayEnabled should be false');
// re-enable
circle.enableDashArray();
test(circle.getFillEnabled() === false, 'fillEnabled should be false');
test(circle.getStrokeEnabled() === false, 'strokeEnabled should be false');
test(circle.getShadowEnabled() === false, 'shadowEnabled should be false');
test(circle.getDashArrayEnabled() === true, 'dashArrayEnabled should be true');
circle.enableShadow();
test(circle.getFillEnabled() === false, 'fillEnabled should be false');
test(circle.getStrokeEnabled() === false, 'strokeEnabled should be false');
test(circle.getShadowEnabled() === true, 'shadowEnabled should be true');
test(circle.getDashArrayEnabled() === true, 'dashArrayEnabled should be true');
circle.enableStroke();
test(circle.getFillEnabled() === false, 'fillEnabled should be false');
test(circle.getStrokeEnabled() === true, 'strokeEnabled should be true');
test(circle.getShadowEnabled() === true, 'shadowEnabled should be true');
test(circle.getDashArrayEnabled() === true, 'dashArrayEnabled should be true');
circle.enableFill();
test(circle.getFillEnabled() === true, 'fillEnabled should be true');
test(circle.getStrokeEnabled() === true, 'strokeEnabled should be true');
test(circle.getShadowEnabled() === true, 'shadowEnabled should be true');
test(circle.getDashArrayEnabled() === true, 'dashArrayEnabled should be true');
}
};