mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-21 20:56:09 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #2478 from pearcetm/webgl-clipping

Browse Source 
fix clip behavior with webgl drawer
This commit is contained in:
Ian Gilman 2024-02-22 09:30:01 -08:00 committed by GitHub
commit da5abc1b39
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 35 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/webgldrawer.js
View File

@ -907,10 +907,9 @@
} }
// private // private
_setClip(rect){ _setClip(){
this._clippingContext.beginPath(); // no-op: called by _renderToClippingCanvas when tiledImage._clip is truthy
this._clippingContext.rect(rect.x, rect.y, rect.width, rect.height); // so that tests will pass.
this._clippingContext.clip();
} }
// private // private
@ -918,11 +917,32 @@
this._clippingContext.clearRect(0, 0, this._clippingCanvas.width, this._clippingCanvas.height); this._clippingContext.clearRect(0, 0, this._clippingCanvas.width, this._clippingCanvas.height);
this._clippingContext.save(); this._clippingContext.save();
if(this.viewer.viewport.getFlip()){
const point = new $.Point(this.canvas.width / 2, this.canvas.height / 2);
this._clippingContext.translate(point.x, 0);
this._clippingContext.scale(-1, 1);
this._clippingContext.translate(-point.x, 0);
}
if(item._clip){ if(item._clip){
var box = item.imageToViewportRectangle(item._clip, true); const polygon = [
var rect = this.viewportToDrawerRectangle(box); {x: item._clip.x, y: item._clip.y},
this._setClip(rect); {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();
this._setClip();
} }
if(item._croppingPolygons){ if(item._croppingPolygons){
let polygons = item._croppingPolygons.map(polygon => { let polygons = item._croppingPolygons.map(polygon => {
@ -934,7 +954,7 @@
}); });
}); });
this._clippingContext.beginPath(); this._clippingContext.beginPath();
polygons.forEach(polygon => { polygons.forEach((polygon) => {
polygon.forEach( (coord, i) => { polygon.forEach( (coord, i) => {
this._clippingContext[i === 0 ? 'moveTo' : 'lineTo'](coord.x, coord.y); this._clippingContext[i === 0 ? 'moveTo' : 'lineTo'](coord.x, coord.y);
}); });
@ -942,6 +962,13 @@
this._clippingContext.clip(); this._clippingContext.clip();
} }
if(this.viewer.viewport.getFlip()){
const point = new $.Point(this.canvas.width / 2, this.canvas.height / 2);
this._clippingContext.translate(point.x, 0);
this._clippingContext.scale(-1, 1);
this._clippingContext.translate(-point.x, 0);
}
this._clippingContext.drawImage(this._renderingCanvas, 0, 0); this._clippingContext.drawImage(this._renderingCanvas, 0, 0);
this._clippingContext.restore(); this._clippingContext.restore();