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

new shadowForStrokeEnabled property for shape

Browse Source
This commit is contained in:
lavrton 2015-02-10 07:19:44 +07:00
parent 56f76005d7
commit b9c6bc2d10
9 changed files with 146 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -7,6 +7,7 @@
* more expected drawing when shape has opacity, stroke and shadow
* `scale` now affect to `shadowOffset`
* new `perfectDrawEnabled` property for shape. See [http://konvajs.github.io/docs/performance/Disable_Perfect_Draw.html](http://konvajs.github.io/docs/performance/Disable_Perfect_Draw.html)
* new `shadowForStrokeEnabled` property for shape. See [http://konvajs.github.io/docs/performance/All_Performance_Tips.html](http://konvajs.github.io/docs/performance/All_Performance_Tips.html)
## 0.8.0 2015-02-04

2
bower.json
View File

@ -1,6 +1,6 @@
{
"name": "konva",
"version": "0.8.0",
"version": "0.9.0",
"authors": [
"Eric Rowell", "Anton Lavrenov"
],

62
konva.js
View File

@ -1,9 +1,9 @@
/*
* Konva JavaScript Framework v0.8.0
* Konva JavaScript Framework v0.9.0
* http://konvajs.github.io/
* Licensed under the MIT or GPL Version 2 licenses.
* Date: 2015-02-09
* Date: 2015-02-10
*
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - 2015 by Anton Lavrenov (Konva)
@ -36,7 +36,7 @@ var Konva = {};
Konva = {
// public
version: '0.8.0',
version: '0.9.0',
// private
stages: [],
@ -180,6 +180,8 @@ var Konva = {};
* @param {Integer} [config.strokeAlpha] set stroke alpha component
* @param {Number} [config.strokeWidth] stroke width
* @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true
* @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true
* @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shasow for stroke. The default is true
* @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true
* @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true
* @param {String} [config.lineJoin] can be miter, round, or bevel. The default
@ -2269,7 +2271,9 @@ var Konva = {};
blue: shape.strokeBlue(),
alpha: shape.strokeAlpha()
}));
if (!shape.getShadowForStrokeEnabled()) {
this.setAttr('shadowColor', 'rgba(0,0,0,0)');
}
shape._strokeFunc(this);
if (!strokeScaleEnabled) {
@ -8274,7 +8278,7 @@ var Konva = {};
// if shape has stroke we need to redraw shape
// otherwise we will see shadow under stroke (and over fill)
// but I think is is unexpected behavior
if (this.hasFill()) {
if (this.hasFill() && this.getShadowForStrokeEnabled()) {
drawFunc.call(this, context);
}
} else if (hasShadow && !canvas.hitCanvas) {
@ -8535,6 +8539,26 @@ var Konva = {};
* shape.perfectDrawEnabled();
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'shadowForStrokeEnabled', true);
/**
* get/set shadowForStrokeEnabled. Useful for performance optimization.
* You may set `shape.shadowForStrokeEnabled(false)`. In this case stroke will be no draw shadow for stroke.
* Remember if you set `shadowForStrokeEnabled = false` for non closed line - that line with have no shadow!.
* Default value is true
* @name shadowForStrokeEnabled
* @method
* @memberof Konva.Shape.prototype
* @param {Boolean} shadowForStrokeEnabled
* @returns {Boolean}
* @example
* // get shadowForStrokeEnabled
* var shadowForStrokeEnabled = shape.shadowForStrokeEnabled();
*
* // set shadowForStrokeEnabled
* shape.shadowForStrokeEnabled();
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'lineJoin');
/**
@ -10888,6 +10912,8 @@ var Konva = {};
* @param {Integer} [config.strokeAlpha] set stroke alpha component
* @param {Number} [config.strokeWidth] stroke width
* @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true
* @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true
* @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shasow for stroke. The default is true
* @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true
* @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true
* @param {String} [config.lineJoin] can be miter, round, or bevel. The default
@ -11049,6 +11075,8 @@ var Konva = {};
* @param {Integer} [config.strokeAlpha] set stroke alpha component
* @param {Number} [config.strokeWidth] stroke width
* @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true
* @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true
* @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shasow for stroke. The default is true
* @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true
* @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true
* @param {String} [config.lineJoin] can be miter, round, or bevel. The default
@ -11348,6 +11376,8 @@ var Konva = {};
* @param {Integer} [config.strokeAlpha] set stroke alpha component
* @param {Number} [config.strokeWidth] stroke width
* @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true
* @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true
* @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shasow for stroke. The default is true
* @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true
* @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true
* @param {String} [config.lineJoin] can be miter, round, or bevel. The default
@ -11534,6 +11564,8 @@ var Konva = {};
* @param {Integer} [config.strokeAlpha] set stroke alpha component
* @param {Number} [config.strokeWidth] stroke width
* @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true
* @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true
* @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shasow for stroke. The default is true
* @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true
* @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true
* @param {String} [config.lineJoin] can be miter, round, or bevel. The default
@ -11720,6 +11752,8 @@ var Konva = {};
* @param {Integer} [config.strokeAlpha] set stroke alpha component
* @param {Number} [config.strokeWidth] stroke width
* @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true
* @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true
* @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shasow for stroke. The default is true
* @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true
* @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true
* @param {String} [config.lineJoin] can be miter, round, or bevel. The default
@ -11924,6 +11958,8 @@ var Konva = {};
* @param {Integer} [config.strokeAlpha] set stroke alpha component
* @param {Number} [config.strokeWidth] stroke width
* @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true
* @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true
* @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shasow for stroke. The default is true
* @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true
* @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true
* @param {String} [config.lineJoin] can be miter, round, or bevel. The default
@ -12233,6 +12269,8 @@ var Konva = {};
* @param {Integer} [config.strokeAlpha] set stroke alpha component
* @param {Number} [config.strokeWidth] stroke width
* @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true
* @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true
* @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shasow for stroke. The default is true
* @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true
* @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true
* @param {String} [config.lineJoin] can be miter, round, or bevel. The default
@ -12764,6 +12802,8 @@ var Konva = {};
* @param {Integer} [config.strokeAlpha] set stroke alpha component
* @param {Number} [config.strokeWidth] stroke width
* @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true
* @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true
* @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shasow for stroke. The default is true
* @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true
* @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true
* @param {String} [config.lineJoin] can be miter, round, or bevel. The default
@ -13047,6 +13087,8 @@ var Konva = {};
* @param {Integer} [config.strokeAlpha] set stroke alpha component
* @param {Number} [config.strokeWidth] stroke width
* @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true
* @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true
* @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shasow for stroke. The default is true
* @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true
* @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true
* @param {String} [config.lineJoin] can be miter, round, or bevel. The default
@ -13463,6 +13505,8 @@ var Konva = {};
* @param {Integer} [config.strokeAlpha] set stroke alpha component
* @param {Number} [config.strokeWidth] stroke width
* @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true
* @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true
* @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shasow for stroke. The default is true
* @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true
* @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true
* @param {String} [config.lineJoin] can be miter, round, or bevel. The default
@ -14175,6 +14219,8 @@ var Konva = {};
* @param {Integer} [config.strokeAlpha] set stroke alpha component
* @param {Number} [config.strokeWidth] stroke width
* @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true
* @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true
* @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shasow for stroke. The default is true
* @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true
* @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true
* @param {String} [config.lineJoin] can be miter, round, or bevel. The default
@ -14656,6 +14702,8 @@ var Konva = {};
* @param {Integer} [config.strokeAlpha] set stroke alpha component
* @param {Number} [config.strokeWidth] stroke width
* @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true
* @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true
* @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shasow for stroke. The default is true
* @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true
* @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true
* @param {String} [config.lineJoin] can be miter, round, or bevel. The default
@ -14825,6 +14873,8 @@ var Konva = {};
* @param {Integer} [config.strokeAlpha] set stroke alpha component
* @param {Number} [config.strokeWidth] stroke width
* @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true
* @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true
* @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shasow for stroke. The default is true
* @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true
* @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true
* @param {String} [config.lineJoin] can be miter, round, or bevel. The default
@ -15353,6 +15403,8 @@ var Konva = {};
* @param {Integer} [config.strokeAlpha] set stroke alpha component
* @param {Number} [config.strokeWidth] stroke width
* @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true
* @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true
* @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shasow for stroke. The default is true
* @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true
* @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true
* @param {String} [config.lineJoin] can be miter, round, or bevel. The default

10
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "konva",
"version": "0.8.0",
"version": "0.9.0",
"author": "Anton Lavrenov",
"devDependencies": {
"chai": "1.9.2",

2
resources/doc-includes/ShapeParams.txt
View File

@ -39,6 +39,8 @@
* @param {Integer} [config.strokeAlpha] set stroke alpha component
* @param {Number} [config.strokeWidth] stroke width
* @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true
* @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true
* @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shasow for stroke. The default is true
* @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true
* @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true
* @param {String} [config.lineJoin] can be miter, round, or bevel. The default

4
src/Context.js
View File

@ -536,7 +536,9 @@
blue: shape.strokeBlue(),
alpha: shape.strokeAlpha()
}));
if (!shape.getShadowForStrokeEnabled()) {
this.setAttr('shadowColor', 'rgba(0,0,0,0)');
}
shape._strokeFunc(this);
if (!strokeScaleEnabled) {

22
src/Shape.js
View File

@ -227,7 +227,7 @@
// if shape has stroke we need to redraw shape
// otherwise we will see shadow under stroke (and over fill)
// but I think is is unexpected behavior
if (this.hasFill()) {
if (this.hasFill() && this.getShadowForStrokeEnabled()) {
drawFunc.call(this, context);
}
} else if (hasShadow && !canvas.hitCanvas) {
@ -488,6 +488,26 @@
* shape.perfectDrawEnabled();
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'shadowForStrokeEnabled', true);
/**
* get/set shadowForStrokeEnabled. Useful for performance optimization.
* You may set `shape.shadowForStrokeEnabled(false)`. In this case stroke will be no draw shadow for stroke.
* Remember if you set `shadowForStrokeEnabled = false` for non closed line - that line with have no shadow!.
* Default value is true
* @name shadowForStrokeEnabled
* @method
* @memberof Konva.Shape.prototype
* @param {Boolean} shadowForStrokeEnabled
* @returns {Boolean}
* @example
* // get shadowForStrokeEnabled
* var shadowForStrokeEnabled = shape.shadowForStrokeEnabled();
*
* // set shadowForStrokeEnabled
* shape.shadowForStrokeEnabled();
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'lineJoin');
/**

55
test/unit/Shape-test.js
View File

@ -566,6 +566,11 @@ suite('Shape', function() {
context.stroke();
compareLayerAndCanvas(layer, canvas, 10);
var trace = layer.getContext().getTrace();
//console.log(trace);
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);save();shadowColor=rgba(128,128,128,1);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();lineWidth=10;strokeStyle=black;stroke();restore();beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();lineWidth=10;strokeStyle=black;stroke();restore();');
});
// ======================================================
@ -1122,5 +1127,55 @@ suite('Shape', function() {
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);globalAlpha=0.5;beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();lineWidth=10;strokeStyle=black;stroke();restore();');
});
// ======================================================
test('optional disable shadow for stroke', function(){
var stage = addStage();
var layer = new Konva.Layer();
var rect = new Konva.Rect({
x: 100,
y: 50,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 10,
shadowColor: 'grey',
shadowBlur: 10,
shadowOffset: {
x: 20,
y: 20
},
shadowForStrokeEnabled : false
});
layer.add(rect);
stage.add(layer);
var canvas = createCanvas();
var context = canvas.getContext('2d');
context.beginPath();
context.rect(100, 50, 100, 50);
context.closePath();
context.fillStyle = 'green';
context.shadowColor = 'grey';
context.shadowBlur = 10;
context.shadowOffsetX = 20;
context.shadowOffsetY = 20;
context.lineWidth = 10;
context.fill();
context.shadowColor = 'rgba(0,0,0, 0)';
context.stroke();
compareLayerAndCanvas(layer, canvas, 10);
var trace = layer.getContext().getTrace();
//console.log(trace);
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);save();shadowColor=rgba(128,128,128,1);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();lineWidth=10;strokeStyle=black;shadowColor=rgba(0,0,0,0);stroke();restore();restore();');
});
});