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

support of globalCompositeOperation for Konva.Shape. close #228

Browse Source
This commit is contained in:
Anton Lavrenov 2017-04-21 11:10:23 -05:00
parent 865577b7e6
commit 82e12b41d4
5 changed files with 77 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -4,6 +4,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
## [Not released][Not released]
### Added
- support of globalCompositeOperation for `Konva.Shape`
### Fixed
- getAllIntersections now works ok for Text shapes (https://github.com/konvajs/konva/issues/224)

34
konva.js
View File

@ -2111,6 +2111,12 @@
this.setAttr('shadowBlur', blur * ratio * Math.min(scaleX, scaleY));
this.setAttr('shadowOffsetX', offset.x * scaleX);
this.setAttr('shadowOffsetY', offset.y * scaleY);
},
_applyGlobalCompositeOperation: function(shape) {
var globalCompositeOperation = shape.getGlobalCompositeOperation();
if (globalCompositeOperation !== 'source-over') {
this.setAttr('globalCompositeOperation', globalCompositeOperation);
}
}
};
Konva.Util.extend(Konva.SceneContext, Konva.Context);
@ -8421,8 +8427,10 @@
var ratio = bufferCanvas.pixelRatio;
if (hasShadow && !canvas.hitCanvas) {
context.save();
context._applyShadow(this);
context._applyOpacity(this);
context._applyGlobalCompositeOperation(this);
context.drawImage(
bufferCanvas._canvas,
0,
@ -8433,6 +8441,7 @@
context.restore();
} else {
context._applyOpacity(this);
context._applyGlobalCompositeOperation(this);
context.drawImage(
bufferCanvas._canvas,
0,
@ -8459,8 +8468,10 @@
// apply shadow
if (!caching) {
context._applyOpacity(this);
context._applyGlobalCompositeOperation(this);
}
context._applyShadow(this);
drawFunc.call(this, context);
context.restore();
// if shape has stroke we need to redraw shape
@ -8473,6 +8484,7 @@
context.save();
if (!caching) {
context._applyOpacity(this);
context._applyGlobalCompositeOperation(this);
}
context._applyShadow(this);
drawFunc.call(this, context);
@ -8480,6 +8492,7 @@
} else {
if (!caching) {
context._applyOpacity(this);
context._applyGlobalCompositeOperation(this);
}
drawFunc.call(this, context);
}
@ -8877,6 +8890,27 @@
Konva.Validators.alphaComponent
);
Konva.Factory.addGetterSetter(
Konva.Shape,
'globalCompositeOperation',
'source-over'
);
/**
* get/set globalCompositeOperation of a shape
* @name globalCompositeOperation
* @method
* @memberof Konva.Shape.prototype
* @param {Number} blur
* @returns {Number}
* @example
* // get shadow blur
* var globalCompositeOperation = shape.globalCompositeOperation();
*
* // set shadow blur
* shape.globalCompositeOperation('source-in');
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'shadowBlur');
/**

10
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

6
src/Context.js
View File

@ -634,6 +634,12 @@
this.setAttr('shadowBlur', blur * ratio * Math.min(scaleX, scaleY));
this.setAttr('shadowOffsetX', offset.x * scaleX);
this.setAttr('shadowOffsetY', offset.y * scaleY);
},
_applyGlobalCompositeOperation: function(shape) {
var globalCompositeOperation = shape.getGlobalCompositeOperation();
if (globalCompositeOperation !== 'source-over') {
this.setAttr('globalCompositeOperation', globalCompositeOperation);
}
}
};
Konva.Util.extend(Konva.SceneContext, Konva.Context);

28
src/Shape.js
View File

@ -323,8 +323,10 @@
var ratio = bufferCanvas.pixelRatio;
if (hasShadow && !canvas.hitCanvas) {
context.save();
context._applyShadow(this);
context._applyOpacity(this);
context._applyGlobalCompositeOperation(this);
context.drawImage(
bufferCanvas._canvas,
0,
@ -335,6 +337,7 @@
context.restore();
} else {
context._applyOpacity(this);
context._applyGlobalCompositeOperation(this);
context.drawImage(
bufferCanvas._canvas,
0,
@ -361,8 +364,10 @@
// apply shadow
if (!caching) {
context._applyOpacity(this);
context._applyGlobalCompositeOperation(this);
}
context._applyShadow(this);
drawFunc.call(this, context);
context.restore();
// if shape has stroke we need to redraw shape
@ -375,6 +380,7 @@
context.save();
if (!caching) {
context._applyOpacity(this);
context._applyGlobalCompositeOperation(this);
}
context._applyShadow(this);
drawFunc.call(this, context);
@ -382,6 +388,7 @@
} else {
if (!caching) {
context._applyOpacity(this);
context._applyGlobalCompositeOperation(this);
}
drawFunc.call(this, context);
}
@ -779,6 +786,27 @@
Konva.Validators.alphaComponent
);
Konva.Factory.addGetterSetter(
Konva.Shape,
'globalCompositeOperation',
'source-over'
);
/**
* get/set globalCompositeOperation of a shape
* @name globalCompositeOperation
* @method
* @memberof Konva.Shape.prototype
* @param {Number} blur
* @returns {Number}
* @example
* // get shadow blur
* var globalCompositeOperation = shape.globalCompositeOperation();
*
* // set shadow blur
* shape.globalCompositeOperation('source-in');
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'shadowBlur');
/**