mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-22 13:16:10 +03:00
Code Issues Projects Releases Wiki Activity

Add clipping to demo. Update documentation and remove commented code. Change from get type to getType().

Browse Source
This commit is contained in:
Tom 2023-07-09 12:05:17 -04:00
parent 0a3aa6172d
commit 6feed0a68e
5 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/htmldrawer.js
View File

@ -65,7 +65,7 @@ class HTMLDrawer extends $.DrawerBase{
return true; return true;
} }
get type(){ getType(){
return 'html'; return 'html';
} }

5
src/spring.js
View File

@ -206,7 +206,8 @@ $.Spring.prototype = {
/** /**
* @function * @function
* @returns true if the value got updated, false otherwise * @returns true if the spring is still updating its value, false if it is
* already at the target value.
*/ */
update: function() { update: function() {
this.current.time = $.now(); this.current.time = $.now();
@ -230,7 +231,6 @@ $.Spring.prototype = {
( this.target.time - this.start.time ) ( this.target.time - this.start.time )
); );
// var oldValue = this.current.value;
if (this._exponential) { if (this._exponential) {
this.current.value = Math.exp(currentValue); this.current.value = Math.exp(currentValue);
} else { } else {
@ -238,7 +238,6 @@ $.Spring.prototype = {
} }
return currentValue !== targetValue; return currentValue !== targetValue;
// return oldValue !== this.current.value;
}, },
/** /**

5
src/webgldrawer.js
View File

@ -234,8 +234,7 @@
// Public API required by all Drawer implementations // Public API required by all Drawer implementations
/** /**
* @returns {Boolean} returns true if canvas and webgl are supported and * @returns {Boolean} returns true if canvas and webgl are supported
* three.js has been exposed as a global variable named THREE
*/ */
static isSupported(){ static isSupported(){
let canvasElement = document.createElement( 'canvas' ); let canvasElement = document.createElement( 'canvas' );
@ -248,7 +247,7 @@
return !!( webglContext ); return !!( webglContext );
} }
get type(){ getType(){
return 'webgl'; return 'webgl';
} }

2
test/demo/drawercomparison.html
View File

@ -47,7 +47,7 @@
} }
.option-grid{ .option-grid{
display: grid; display: grid;
grid-template-columns: 7em 7em 10em 10em 10em; grid-template-columns: 7em 7em 9em 9em 10em 9em;
/* grid-template-columns: repeat(5, auto); */ /* grid-template-columns: repeat(5, auto); */
} }
.image-options input[type=number]{ .image-options input[type=number]{

10
test/demo/drawercomparison.js
View File

@ -171,14 +171,16 @@ function updateTiledImage(tiledImage, data, value, item){
tiledImage.setFlip($(item).prop('checked')); tiledImage.setFlip($(item).prop('checked'));
} else if (field == 'cropped'){ } else if (field == 'cropped'){
if( $(item).prop('checked') ){ if( $(item).prop('checked') ){
let croppingPolygons = [ [{x:200, y:200}, {x:800, y:200}, {x:500, y:800}] ]; let scale = tiledImage.source.width;
let croppingPolygons = [ [{x:0.2*scale, y:0.2*scale}, {x:0.8*scale, y:0.2*scale}, {x:0.5*scale, y:0.8*scale}] ];
tiledImage.setCroppingPolygons(croppingPolygons); tiledImage.setCroppingPolygons(croppingPolygons);
} else { } else {
tiledImage.resetCroppingPolygons(); tiledImage.resetCroppingPolygons();
} }
} else if (field == 'clipped'){ } else if (field == 'clipped'){
if( $(item).prop('checked') ){ if( $(item).prop('checked') ){
let clipRect = new OpenSeadragon.Rect(2000, 0, 3000, 4000); let scale = tiledImage.source.width;
let clipRect = new OpenSeadragon.Rect(0.1*scale, 0.2*scale, 0.6*scale, 0.4*scale);
tiledImage.setClip(clipRect); tiledImage.setClip(clipRect);
} else { } else {
tiledImage.setClip(null); tiledImage.setClip(null);
@ -296,11 +298,13 @@ function makeImagePickerElement(key, label){
<label>Width: <input type="number" value="1" data-image="" data-field="width" min="0"> </label> <label>Width: <input type="number" value="1" data-image="" data-field="width" min="0"> </label>
<label>Degrees: <input type="number" value="0" data-image="" data-field="degrees"> </label> <label>Degrees: <input type="number" value="0" data-image="" data-field="degrees"> </label>
<label>Opacity: <input type="number" value="1" data-image="" data-field="opacity" min="0" max="1" step="0.2"> </label> <label>Opacity: <input type="number" value="1" data-image="" data-field="opacity" min="0" max="1" step="0.2"> </label>
<span></span>
<label>Flipped: <input type="checkbox" data-image="" data-field="flipped"></label> <label>Flipped: <input type="checkbox" data-image="" data-field="flipped"></label>
<label>Cropped: <input type="checkbox" data-image="" data-field="cropped"></label> <label>Cropped: <input type="checkbox" data-image="" data-field="cropped"></label>
<label>Clipped: <input type="checkbox" data-image="" data-field="clipped"></label>
<label>Debug: <input type="checkbox" data-image="" data-field="debug"></label> <label>Debug: <input type="checkbox" data-image="" data-field="debug"></label>
<label>Composite: <select data-image="" data-field="composite"></select></label> <label>Composite: <select data-image="" data-field="composite"></select></label>
<label>Wrapping: <select data-image="" data-field="wrapping"></select></label> <label>Wrap: <select data-image="" data-field="wrapping"></select></label>
</div> </div>
</div>`.replaceAll('data-image=""', `data-image="${key}"`).replace('__title__', label)); </div>`.replaceAll('data-image=""', `data-image="${key}"`).replace('__title__', label));