mirror of
https://github.com/Hopiu/fabric.js.git
synced 2026-05-23 12:45:48 +00:00
fabric.Object.fillRule support using globalCompositeOperation
Full support for the fabric.Object.fillRule option for any visual objects. _setupFillRule(ctx) is used to set CanvasRenderingContext2D.globalCompositeOperation (from fillRule property). _restorFillRule(ctx) restores previously saved globalCompositeOperation. Both methods are called form the render() method, so individual blending settings for each object can be specified.
This commit is contained in:
parent
3564967010
commit
e89c9c84bd
1 changed files with 26 additions and 0 deletions
|
|
@ -930,6 +930,8 @@
|
|||
if (this.width === 0 || this.height === 0 || !this.visible) return;
|
||||
|
||||
ctx.save();
|
||||
//setup fill rule for current object
|
||||
this._setupFillRule(ctx);
|
||||
|
||||
this._transform(ctx, noTransform);
|
||||
this._setStrokeStyles(ctx);
|
||||
|
|
@ -946,11 +948,14 @@
|
|||
this._render(ctx, noTransform);
|
||||
this.clipTo && ctx.restore();
|
||||
this._removeShadow(ctx);
|
||||
|
||||
this._restorFillRule(ctx);
|
||||
|
||||
if (this.active && !noTransform) {
|
||||
this.drawBorders(ctx);
|
||||
this.drawControls(ctx);
|
||||
}
|
||||
|
||||
ctx.restore();
|
||||
},
|
||||
|
||||
|
|
@ -1359,6 +1364,27 @@
|
|||
x: pointer.x - objectLeftTop.x,
|
||||
y: pointer.y - objectLeftTop.y
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets canvas globalCompositeOperation for specific object
|
||||
* custom composition operation for the particular object can be specifed using fillRule property
|
||||
* @param {CanvasRenderingContext2D} ctx Rendering canvas context
|
||||
*/
|
||||
_setupFillRule: function (ctx) {
|
||||
if (this.fillRule) {
|
||||
this._prevFillRule = ctx.globalCompositeOperation;
|
||||
ctx.globalCompositeOperation = this.fillRule;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Restores previously saved canvas globalCompositeOperation after obeject rendering
|
||||
* @param {CanvasRenderingContext2D} ctx Rendering canvas context
|
||||
*/
|
||||
_restorFillRule: function (ctx) {
|
||||
if (this.fillRule && this._prevFillRule) {
|
||||
ctx.globalCompositeOperation = this._prevFillRule;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue