fix(): absolutePositioned

fabricjs · May 12, 2022 · 3f0f328 · 3f0f328
1 parent 3954fca
commit 3f0f328
Showing 1 changed file with 12 additions and 14 deletions.
diff --git a/src/brushes/base_brush.class.js b/src/brushes/base_brush.class.js
@@ -66,6 +66,7 @@ fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype
   /**
    * Same as fabric.Object `clipPath` property.
    * The clip path is positioned relative to the top left corner of the viewport.
+   * The `absolutePositioned` property renders the clip path w/o viewport transform.
    */
   clipPath: undefined,
 
@@ -88,7 +89,7 @@ fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype
    * @param {RenderingContext2d} ctx context to render on
    * @private
    */
-  _saveAndTransform: function(ctx) {
+  _saveAndTransform: function (ctx) {
     var v = this.canvas.viewportTransform;
     ctx.save();
     ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]);
@@ -98,15 +99,15 @@ fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype
    * Sets brush shadow styles
    * @private
    */
-  _setShadow: function() {
+  _setShadow: function () {
     if (!this.shadow) {
       return;
     }
 
     var canvas = this.canvas,
-        shadow = this.shadow,
-        ctx = canvas.contextTop,
-        zoom = canvas.getZoom();
+      shadow = this.shadow,
+      ctx = canvas.contextTop,
+      zoom = canvas.getZoom();
     if (canvas && canvas._isRetinaScaling()) {
       zoom *= fabric.devicePixelRatio;
     }
@@ -117,7 +118,7 @@ fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype
     ctx.shadowOffsetY = shadow.offsetY * zoom;
   },
 
-  needsFullRender: function() {
+  needsFullRender: function () {
     var color = new fabric.Color(this.color);
     return color.getAlpha() < 1 || !!this.shadow || (this.clipPath && this.clipPath.isCacheDirty());
   },
@@ -127,7 +128,7 @@ fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype
    * @private
    */
   calcTransformMatrix: function () {
-    return fabric.util.invertTransform(this.canvas.viewportTransform);
+    return this.canvas.viewportTransform;
   },
 
   /**
@@ -148,10 +149,7 @@ fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype
     if (!clipPath) {
       return;
     }
-    clipPath.canvas = this.canvas;
-    var v = fabric.util.invertTransform(this.canvas.viewportTransform);
     ctx.save();
-    ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]);
     fabric.Object.prototype._drawClipPath.call(this, ctx, clipPath);
     ctx.restore();
   },
@@ -166,8 +164,8 @@ fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype
       return Promise.resolve();
     }
     var t = result.calcTransformMatrix();
-    if (!this.clipPath.absolutePositioned) {
-      t = fabric.util.multiplyTransformMatrices(this.canvas.viewportTransform, t);
+    if (this.clipPath.absolutePositioned) {
+      t = fabric.util.multiplyTransformMatrices(this.calcTransformMatrix(), t);
     }
     return this.clipPath.clone(['inverted'])
       .then(function (clipPath) {
@@ -206,7 +204,7 @@ fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype
    * @private
    * @param {CanvasRenderingContext2D} ctx
    */
-  _resetShadow: function(ctx) {
+  _resetShadow: function (ctx) {
     ctx.shadowColor = '';
     ctx.shadowBlur = ctx.shadowOffsetX = ctx.shadowOffsetY = 0;
   },
@@ -216,7 +214,7 @@ fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype
    * @param {Object} pointer
    * @private
   */
-  _isOutSideCanvas: function(pointer) {
+  _isOutSideCanvas: function (pointer) {
     return pointer.x < 0 || pointer.x > this.canvas.getWidth() || pointer.y < 0 || pointer.y > this.canvas.getHeight();
   }
 });