mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-25 14:46:10 +03:00
Add clipping to demo. Update documentation and remove commented code. Change from get type to getType().
This commit is contained in:
parent
0a3aa6172d
commit
6feed0a68e
@ -65,7 +65,7 @@ class HTMLDrawer extends $.DrawerBase{
|
||||
return true;
|
||||
}
|
||||
|
||||
get type(){
|
||||
getType(){
|
||||
return 'html';
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
},
|
||||
|
||||
/**
|
||||
|
@ -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';
|
||||
}
|
||||
|
||||
|
@ -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]{
|
||||
|
@ -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));
|
||||
|
Loading…
Reference in New Issue
Block a user