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:
kreig 2014-02-16 19:00:53 +02:00
parent 3564967010
commit e89c9c84bd

View file

@ -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;
}
}
});