From a0bcbc4d21e32eb4d728057d3acf0baa6a5a1cc2 Mon Sep 17 00:00:00 2001 From: Tom Date: Wed, 21 Feb 2024 17:49:46 -0500 Subject: [PATCH] fix clip behavior with webgl drawer --- src/webgldrawer.js | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/src/webgldrawer.js b/src/webgldrawer.js index ac450b3c..1468b729 100644 --- a/src/webgldrawer.js +++ b/src/webgldrawer.js @@ -920,9 +920,23 @@ this._clippingContext.save(); if(item._clip){ - var box = item.imageToViewportRectangle(item._clip, true); - var rect = this.viewportToDrawerRectangle(box); - this._setClip(rect); + const polygon = [ + {x: item._clip.x, y: item._clip.y}, + {x: item._clip.x + item._clip.width, y: item._clip.y}, + {x: item._clip.x + item._clip.width, y: item._clip.y + item._clip.height}, + {x: item._clip.x, y: item._clip.y + item._clip.height}, + ]; + let clipPoints = polygon.map(coord => { + let point = item.imageToViewportCoordinates(coord.x, coord.y, true) + .rotate(this.viewer.viewport.getRotation(true), this.viewer.viewport.getCenter(true)); + let clipPoint = this.viewportCoordToDrawerCoord(point); + return clipPoint; + }); + this._clippingContext.beginPath(); + clipPoints.forEach( (coord, i) => { + this._clippingContext[i === 0 ? 'moveTo' : 'lineTo'](coord.x, coord.y); + }); + this._clippingContext.clip(); } if(item._croppingPolygons){ let polygons = item._croppingPolygons.map(polygon => { @@ -934,7 +948,7 @@ }); }); this._clippingContext.beginPath(); - polygons.forEach(polygon => { + polygons.forEach((polygon) => { polygon.forEach( (coord, i) => { this._clippingContext[i === 0 ? 'moveTo' : 'lineTo'](coord.x, coord.y); });