The following tutorial will illustrate the behavior of various ScaleScroll Strategies. Strategy restricts local transformation, i.e. scaling and translation. Use the dropdown to choose the strategy.
AnchoredTransformationAdjustmentStrategy: Anchors to given coordinates and keeps aspect ratio at scaling if appropriate options are set.RestrictVisibleModelLimitsStrategy: The input transformation adjustment is restricted based on the options supplied.KeepAspectRestrictVisible: keeps transformation scale when parent bounds are changed, if not possible scales with keeping aspect ratio.KeepAspectFitBothDimensionsStrategy: keeps aspect ratio based on the options supplied, anchors to given coordinates and transforms visible model limits fit both dimensions. By default, anchors to the center horizontally and vertically.KeepScaleAspectRatioStrategy: input transformation adjustment. Keeps transformation scale when parent bounds were changed, if not possible scales with keeping aspect ratio.VerticalandHorizontal: Horizontal/Vertical part of scaling/scrolling can be blocked based on scaling modes. By default horizontal scaling is blocked.
Strategy
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { AnnotatedWidget } from "@int/geotoolkit/widgets/AnnotatedWidget.ts";
import { AnchoredTransformationAdjustmentStrategy } from "@int/geotoolkit/scene/AnchoredTransformationAdjustmentStrategy.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { TiledShape } from "@int/geotoolkit/scene/shapes/tiledshape/TiledShape.ts";
import { Functions as EasingFunctions } from "@int/geotoolkit/animation/Easing.ts";
function createScene(htmlElement) {
const modelArea = new Rect(0, 0, 1185, 889);
const imageLink = "https://openseadragon.github.io/example-images/grand-canyon-landscape-overlooking.jpg";
const data = {
images: [{
id: "_",
width: 1185,
height: 889
}],
capacity: 2e3,
maxNumReq: 10,
modelArea,
formatter: () => imageLink,
errimgsrc: "../assets/images/errimg.png"
};
const annotatedWidget = new AnnotatedWidget({
"tools": {
"crosshair": {
"enabled": false
}
},
"model": new Group().addChild([
new TiledShape(data)
]).setBounds(modelArea).setModelLimits(modelArea),
"annotationssizes": {
"north": 0,
"south": 0,
"west": 0,
"east": 0
}
}).setLineStyle("black").setScaleScrollStrategy(new AnchoredTransformationAdjustmentStrategy());
annotatedWidget.getToolByName("panning").setEnabled(true);
annotatedWidget.getToolByName("zoom").setProperties({
"time": 1e3,
"easing": EasingFunctions.EaseOutQuint
});
return new Plot({
"divelement": htmlElement,
"root": annotatedWidget,
"autosize": true
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));