A shape in CarnacJS is a JavaScript object that represents the basic entity that can be drawn on the screen. Examples are a text, line, or polygon. Shapes have attributes that control the visual properties used during drawing; some examples are line width, line color, fill color, and text font. These shape attributes can be controlled as seen in the Line Styles and Fill Styles tutorials. As a side note, please note that using JS ON supplied to the shape constructors is optional. All shape parameters can be set or changed after the shape is created by using setter methods.
# Annulus Arc
import { AnnulusArc } from "@int/geotoolkit/scene/shapes/AnnulusArc.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
function createScene(canvas) {
const annulus = new AnnulusArc({
"x": 150,
"y": 125,
"innerradius": 30,
"outerradius": 100,
"startarc": 2 * Math.PI * 0,
"endarc": 2 * Math.PI * 0.75,
"linestyle": {
"color": KnownColors.Orange,
"width": 3
},
"fillstyle": KnownColors.Blue
});
return new Plot({
"canvaselement": canvas,
"root": new Group().addChild(annulus)
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Arc
import { Arc } from "@int/geotoolkit/scene/shapes/Arc.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
function createScene(canvas) {
const arc = new Arc({
"x": 150,
"y": 125,
"radius": 100,
"startarc": 2 * Math.PI * 0,
"endarc": 2 * Math.PI * 0.75,
"linestyle": {
"color": KnownColors.Orange,
"width": 3
},
"fillstyle": KnownColors.Blue
});
return new Plot({
"canvaselement": canvas,
"root": new Group().addChild(arc)
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Arrow
import { SymbolShape } from "@int/geotoolkit/scene/shapes/SymbolShape.ts";
import { TrianglePainter } from "@int/geotoolkit/scene/shapes/painters/TrianglePainter.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { Arrow } from "@int/geotoolkit/scene/shapes/Arrow.ts";
import { Point } from "@int/geotoolkit/util/Point.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
function createScene(canvas) {
const headSymbol = new SymbolShape({
"width": 15,
"height": 15,
"painter": TrianglePainter,
"alignment": AnchorType.Center,
"linestyle": {
"color": KnownColors.Blue,
"width": 2
},
"fillstyle": KnownColors.Orange
});
const arrow = new Arrow({
"from": new Point(50, 50),
"to": new Point(300, 200),
"visible": true,
"symbolstart": null,
"symbolend": headSymbol,
"linestyle": {
"color": KnownColors.Orange,
"width": 5
}
});
return new Plot({
"canvaselement": canvas,
"root": new Group().addChild(arrow)
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Border
Border shape can be customised, like css-border.
import { Border } from "@int/geotoolkit/scene/shapes/Border.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
function createScene(canvas) {
const border = new Border().setLineStyles({
"left": "2px solid red",
"right": "12px solid red",
"top": "4px solid green",
"bottom": "6px solid blue"
});
return new Plot({
"canvaselement": canvas,
"root": new Group().addChild(border)
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Clipping Shape by Path
A shape can be clipped in the model coordinates by graphics path using clips style.
import { GraphicsPath } from "@int/geotoolkit/renderer/GraphicsPath.ts";
import { Rectangle } from "@int/geotoolkit/scene/shapes/Rectangle.ts";
import { ClipStyle } from "@int/geotoolkit/attributes/ClipStyle.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
function createScene(canvas) {
const geometry = new GraphicsPath().moveTo(50, 50).lineTo(300, 50).lineTo(300, 200).lineTo(50, 200).close().moveTo(150, 85).lineTo(100, 155).lineTo(200, 155).close();
const rectangleWithClipping = new Rectangle({
"left": 75,
"top": 75,
"right": 225,
"height": 100,
"visible": true,
"linestyle": {
"color": "orange",
"width": 3
},
"fillstyle": KnownColors.Blue
}).rotate(Math.PI / 4, 150, 150).setClipStyle(new ClipStyle(geometry));
return new Plot({
"canvaselement": canvas,
"root": new Group().addChild(rectangleWithClipping)
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Ellipse
import { Ellipse } from "@int/geotoolkit/scene/shapes/Ellipse.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
function createScene(canvas) {
const ellipse = new Ellipse({
"centerx": 150,
"centery": 125,
"radiusx": 75,
"radiusy": 100,
"linestyle": {
"color": KnownColors.Orange,
"width": 3
},
"fillstyle": KnownColors.Blue
});
return new Plot({
"canvaselement": canvas,
"root": new Group().addChild(ellipse)
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Line
import { Point } from "@int/geotoolkit/util/Point.ts";
import { Line } from "@int/geotoolkit/scene/shapes/Line.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
function createScene(canvas) {
const line = new Line({
"from": new Point(50, 50),
"to": new Point(300, 200),
"linestyle": {
"color": KnownColors.DarkBlue,
"width": 3
}
});
return new Plot({
"canvaselement": canvas,
"root": new Group().addChild(line)
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Path
import { Path } from "@int/geotoolkit/scene/shapes/Path.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
function createScene(canvas) {
const path = new Path({
"linestyle": {
"color": KnownColors.DarkBlue,
"width": 3
}
}).moveTo(50, 50).arcTo(200, 50, 200, 200, 100).lineTo(250, 200).bezierCurveTo(200, 200, 250, 100, 325, 200);
return new Plot({
"canvaselement": canvas,
"root": new Group().addChild(path)
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Polygon
import { Polygon } from "@int/geotoolkit/scene/shapes/Polygon.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
function createScene(canvas) {
const polygon = new Polygon({
"x": [50, 100, 250, 300, 175],
"y": [100, 200, 200, 100, 33],
"linestyle": {
"color": KnownColors.Orange,
"width": 3
},
"fillstyle": KnownColors.Blue
});
return new Plot({
"canvaselement": canvas,
"root": new Group().addChild(polygon)
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Polyline
import { Polyline } from "@int/geotoolkit/scene/shapes/Polyline.ts";
import { Spline } from "@int/geotoolkit/scene/shapes/Spline.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
function createScene(canvas) {
const polyLine = new Polyline({
"x": [100, 150, 250, 200, 150, 180],
"y": [50, 200, 120, 50, 100, 120],
"linestyle": KnownColors.Orange
});
const spline = new Spline({
"x": [100, 150, 250, 200, 150, 180],
"y": [50, 200, 120, 50, 100, 120],
"linestyle": {
"color": KnownColors.DarkBlue,
"width": 3
}
});
return new Plot({
"canvaselement": canvas,
"root": new Group().addChild([polyLine, spline])
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Colored Polyline
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
import { KnownScales } from "@int/geotoolkit/util/ColorProvider.ts";
import { ColoredPolyline } from "@int/geotoolkit/scene/shapes/ColoredPolyline.ts";
import { ColoredSpline } from "@int/geotoolkit/scene/shapes/ColoredSpline.ts";
import { DiscreteGradientColorProvider } from "@int/geotoolkit/util/DiscreteGradientColorProvider.ts";
function createScene(canvas) {
const polyLine = new ColoredPolyline({
"x": [100, 150, 250, 200, 150, 180],
"y": [50, 200, 120, 50, 100, 120],
"z": [50, 70, 90, 110, 130, 150],
"linestyle": { "color": KnownColors.Black, "width": 3 },
"colorprovider": new DiscreteGradientColorProvider({ "bins": 255 }).setScale(KnownScales.Rainbow, 50, 150)
});
const spline = new ColoredSpline({
"x": [100, 150, 250, 200, 150, 180],
"y": [50, 200, 120, 50, 100, 120],
"z": [50, 70, 90, 110, 130, 150],
"linestyle": { "color": KnownColors.Black, "width": 3 },
"colorprovider": new DiscreteGradientColorProvider({ "bins": 255 }).setScale(KnownScales.Rainbow, 50, 150)
});
return new Plot({
"canvaselement": canvas,
"root": new Group().addChild([polyLine, spline])
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Rectangle
import { Rectangle } from "@int/geotoolkit/scene/shapes/Rectangle.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
function createScene(canvas) {
const rectangle = new Rectangle({
"left": 50,
"top": 50,
"right": 250,
"height": 100,
"radius": 20,
"linestyle": {
color: KnownColors.Orange,
width: 3
},
"fillstyle": KnownColors.Blue
});
return new Plot({
"canvaselement": canvas,
"root": new Group().addChild(rectangle)
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));