A fill style specifies the visual characteristics like the color or pattern of a region. Fill Styles can be applied to most Carnac shapes. See the Simple Shapes or Text tutorials for shapes that can have styles applied.
# Color Fill
The following example illustrates the fill style using only a single color
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 shape = new Rectangle({
"left": 50,
"top": 50,
"right": 300,
"bottom": 200,
"fillstyle": KnownColors.Orange
});
return new Plot({
"canvaselement": canvas,
"root": new Group().addChild(shape)
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Gradient Fill
The gradient fill is an uninterrupted change over of specified colors. The following example illustrates the linear gradient fill. The direction for the transition of a linear gradient fill can be down, up, left, right or diagonally depending on the value of the startPoint and endPoint.
import { Rectangle } from "@int/geotoolkit/scene/shapes/Rectangle.ts";
import { LinearGradientStyle } from "@int/geotoolkit/attributes/LinearGradientStyle.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 shape = new Rectangle({
"left": 50,
"top": 50,
"right": 300,
"bottom": 200,
"fillstyle": new LinearGradientStyle({
"startcolor": KnownColors.Orange,
"endcolor": KnownColors.Blue,
"startpoint": new Point(0.2, 0.3),
"endpoint": new Point(0.9, 1)
})
});
return new Plot({
"canvaselement": canvas,
"root": new Group().addChild(shape)
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Multiple Color Stops in Gradient
The following example illustrates the linear gradient fill using the multiple colors.
import { Rectangle } from "@int/geotoolkit/scene/shapes/Rectangle.ts";
import { LinearGradientStyle } from "@int/geotoolkit/attributes/LinearGradientStyle.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 gradRect = new Rectangle({
"left": 50,
"top": 50,
"right": 300,
"bottom": 200,
"fillstyle": new LinearGradientStyle({
"startcolor": KnownColors.Orange,
"endcolor": KnownColors.Blue,
"startpoint": new Point(0.4, 0),
"endpoint": new Point(0.9, 0)
}).addStopPoint(0.5, "white")
});
return new Plot({
"canvaselement": canvas,
"root": new Group().addChild(gradRect)
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Radial Gradient
The following example illustrates the radial gradient fill. The radial gradient fill can be defined by its center and radius.
import { Rectangle } from "@int/geotoolkit/scene/shapes/Rectangle.ts";
import { RadialGradientStyle } from "@int/geotoolkit/attributes/RadialGradientStyle.ts";
import { GradientUnits } from "@int/geotoolkit/attributes/GradientStyle.ts";
import { Ellipse } from "@int/geotoolkit/scene/shapes/Ellipse.ts";
import { Polyline } from "@int/geotoolkit/scene/shapes/Polyline.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 centerX = 175;
const centerY = 150;
const height = 75;
const width = 125;
const center = new Point(centerX, centerY);
const radius = Math.sqrt(width * width + height * height);
const radialRect = new Rectangle({
"left": centerX - width,
"top": centerY - height,
"right": centerX + width,
"bottom": centerY + height,
"fillstyle": new RadialGradientStyle({
"startcolor": KnownColors.Orange,
"endcolor": KnownColors.Blue,
"innercenter": center,
"innerradius": 0,
"outercenter": center,
"outerradius": radius,
"unittype": GradientUnits.UserSpaceOnUse
}).addStopPoint(0.5, "white")
});
const ellipse = new Ellipse({
"centerx": centerX,
"centery": centerY,
"radiusx": radius,
"radiusy": radius,
"linestyle": KnownColors.DarkGray
});
const polyline = new Polyline({
"x": [centerX + width, centerX, centerX + radius],
"y": [centerY - height, centerY, centerY],
"linestyle": KnownColors.DarkGray
});
return new Plot({
"canvaselement": canvas,
"root": new Group().addChild([ellipse, radialRect, polyline])
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Image Pattern Fill
The image can be used as a pattern to fill the shape. The pattern can have default color and foreground color. If the foreground color is specified, it will overwrite the image's foreground color.
import { PatternFactory } from "@int/geotoolkit/attributes/PatternFactory.ts";
import { Rectangle } from "@int/geotoolkit/scene/shapes/Rectangle.ts";
import { Rect } from "@int/geotoolkit/util/Rect.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";
import intPattern from "/src/assets/images/slb-67x40.png?import";
function createScene(canvas) {
const imgPattern = PatternFactory.getInstance().createPattern(intPattern);
const shape1 = new Rectangle({
"left": 50,
"top": 50,
"right": 300,
"bottom": 200
}).setFillStyle({
"color": KnownColors.LightGray,
"pattern": imgPattern
});
const shape2 = new Rectangle({
"left": 50,
"top": 50,
"right": 300,
"bottom": 200
}).setFillStyle({
"color": KnownColors.LightGray,
"pattern": imgPattern,
"foreground": KnownColors.Orange
});
return new Plot({
"canvaselement": canvas,
"root": new Group().setBounds(new Rect(0, 0, 350, 250)).addChild([
shape1,
new Group().setBounds(new Rect(170, 0, 350, 250)).enableClipping(true).addChild(shape2)
])
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Geological Patterns
The FGDC Digital Cartographic Standard for Geologic Map Symbolization, released in 2006, provides guidance and assets for the preparation of geologic maps. It includes a large array of reference styles for geologic linework and map symbology. GeoToolkit distribution comes with an awesome library geologic-patterns that contains these patterns. List of available patterns can be found here.
The following example illustrates how to use these embedded patterns.
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";
import { PatternFactory } from "@int/geotoolkit/attributes/PatternFactory.ts";
import { HttpClient } from "@int/geotoolkit/http/HttpClient.ts";
const patternFactory = PatternFactory.getInstance().setLoadTimeout(500);
function getPatternsMap() {
const path = ASSETS + "/patterns/";
return HttpClient.getInstance().getHttp().get(path + "names.json").then((response) => {
const data = JSON.parse(response["data"]);
const patternsMap = {};
if (data["patterns"]) {
data["patterns"].forEach((pattern) => {
const name = pattern.description || pattern.name;
const src = path + pattern.name + ".png";
patternsMap[name] = src;
});
}
return patternsMap;
});
}
function createScene(canvas) {
const shape1 = new Rectangle({
"left": 0,
"top": 0,
"right": 200,
"bottom": 400
});
const shape2 = new Rectangle({
"left": 200,
"top": 0,
"right": 400,
"bottom": 400
});
const patternName1 = "Volcanic breccia or agglomerate";
const patternName2 = "521-C";
shape1.setFillStyle({
"color": KnownColors.Gray,
"pattern": patternFactory.getPattern(patternName1)
});
shape2.setFillStyle({
"color": KnownColors.Gray,
"pattern": patternFactory.getPattern(patternName2)
});
getPatternsMap().then((patternsMap) => {
if (patternsMap) {
patternFactory.addPattern(patternsMap[patternName1], patternName1);
patternFactory.addPattern(patternsMap[patternName2], patternName2);
}
});
return new Plot({
"canvaselement": canvas,
"root": new Group().addChild([shape1, shape2])
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));