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

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

View File

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

View File

@ -206,7 +206,8 @@ $.Spring.prototype = {
/**
* @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() {
this.current.time = $.now();
@ -230,7 +231,6 @@ $.Spring.prototype = {
( this.target.time - this.start.time )
);
// var oldValue = this.current.value;
if (this._exponential) {
this.current.value = Math.exp(currentValue);
} else {
@ -238,7 +238,6 @@ $.Spring.prototype = {
}
return currentValue !== targetValue;
// return oldValue !== this.current.value;
},
/**

View File

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

View File

@ -47,7 +47,7 @@
}
.option-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); */
}
.image-options input[type=number]{

View File

@ -171,14 +171,16 @@ function updateTiledImage(tiledImage, data, value, item){
tiledImage.setFlip($(item).prop('checked'));
} else if (field == 'cropped'){
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);
} else {
tiledImage.resetCroppingPolygons();
}
} else if (field == 'clipped'){
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);
} else {
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>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>
<span></span>
<label>Flipped: <input type="checkbox" data-image="" data-field="flipped"></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>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>`.replaceAll('data-image=""', `data-image="${key}"`).replace('__title__', label));