This tutorial shows how to deviate an example node and its contents. See the Carnac Shapes tutorial for shapes basics.
The DeviationJS library is a part of the GeoToolkitJS library that provides a set of classes to render deviated nodes. It provides transformers from linear coordinates to trajectory coordinates. Transformations from linear space (where vertical coordinates represent either measured depths or true vertical depths) are currently supported.
# Scene without Deviation
First we have to create geotoolkit/scene/Group with shapes: geotoolkit/scene/shapes/Rectangle and geotoolkit/scene/shapes/Image.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { createModel } from "/src/code/Carnac/Misc/Deviation/createModel.ts";
function createScene(canvas) {
return new Plot({
"canvaselement": canvas,
"root": new Group().setAutoModelLimitsMode(true).setLineStyle("gray").addChild([
new Group().setBounds(new Rect(20, 20, 300, 450)).addChild([
createModel()
])
])
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Deviated Scene
Second step is wrap our simple group with geotoolkit/deviation/scene/DeviatedCompositeNode.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { DeviatedCompositeNode } from "@int/geotoolkit/deviation/scene/DeviatedCompositeNode.ts";
import { Trajectory2d } from "@int/geotoolkit/deviation/Trajectory2d.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { createModel } from "/src/code/Carnac/Misc/Deviation/createModel.ts";
function createScene(canvas) {
return new Plot({
"canvaselement": canvas,
"root": new Group().setAutoModelLimitsMode(true).setLineStyle("gray").addChild([
new DeviatedCompositeNode().setDeviation({
"trajectory": new Trajectory2d({
"data": {
"x": [0, 15, 50, 120],
"y": [0, 40, 80, 100],
"d": [0, 200, 300, 450]
}
}),
"trackwidth": 250,
"offset": 60
}).setBounds(new Rect(20, 20, 300, 450)).addChild([
createModel()
])
])
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));