CarnacJS shapes use attributes to control how they render. Some common examples of attributes are line style, line width and line color. These shape attributes can also be set through CSS styles. A style sheet (CSS) consists of a list of rules. Each rule or rule-set consists of one or more selectors, and a declaration block. This tutorial shows how CSS Styles can be applied to different shapes.
# Selectors
Selectors are used to declare which part of the markup a style applies to by matching nodes and styles.
# Selector Attributes
Selectors attributes to be used in E[attr="val"].
# CSS Text Style
CSS properties used for text style geotoolkit/attributes/TextStyle
# CSS Line Style
CSS properties used for line style geotoolkit/attributes/LineStyle
# CSS Fill Style
CSS properties used for fill style geotoolkit/attributes/FillStyle
# CSS Variables
You can declare and use external variables in your CSS script, with using .setVariable('name', value) and reference to it with var(--name)
# CSS Shape
How to build CSS properties used for a shape like Polygon geotoolkit/scene/shapes/Polygon
# Using CSS
import { Text } from "@int/geotoolkit/scene/shapes/Text.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
function createScene(canvas) {
const group = new Group().setCss(`
* {
textstyle-color: darkblue;
textstyle-font: 42px Roboto;
textstyle-alignment: center;
}
`);
group.addChild([
new Text({
"text": "CSS Text Style",
"ax": 175,
"ay": 125
})
]);
group.setCss(null);
group.addChild([
new Text({
"text": "Default Text Style",
"ax": 175,
"ay": 55
})
]);
return new Plot({
"canvaselement": canvas,
"root": group
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# CSS Polygon
How to build CSS properties used for a shape like Polygon geotoolkit/scene/shapes/Polygon.
import { Polygon } from "@int/geotoolkit/scene/shapes/Polygon.ts";
import { Text } from "@int/geotoolkit/scene/shapes/Text.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { CssStyle } from "@int/geotoolkit/css/CssStyle.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 = "./src/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 patternName = "521-C";
getPatternsMap().then((patternsMap) => {
if (patternsMap) {
patternFactory.addPattern(patternsMap[patternName], patternName);
}
});
const cssStyle = new CssStyle({
"variables": {
"521-C": patternFactory.getPattern(patternName)
},
"css": `
*[class="geotoolkit.scene.shapes.Text"] {
textstyle-color : darkblue;
text: Custom Css
}
.geotoolkit.scene.shapes.Polygon {
fillstyle-color: #7cb342;
fillstyle-pattern: var(--521-C);
linestyle-color: #fdd835;
linestyle-width: 0.05;
linestyle-unit: in;
linestyle-pattern: [5, 2];
}
`
});
const group = new Group().addChild([
new Polygon({
"x": [25, 50, 125, 150, 87.5],
"y": [100, 150, 150, 100, 67.5],
"linestyle": {
"color": KnownColors.Orange,
"width": 3
},
"fillstyle": KnownColors.Blue
}),
new Text({
"text": "Default CSS",
"ax": 50,
"ay": 175,
"alignment": AnchorType.LeftCenter
})
]);
return new Plot({
"canvaselement": canvas,
"root": new Group().addChild([
group,
group.clone().setCss(cssStyle).translate(150, 0)
])
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# CSS Node Transform
This section shows Css properties used to change local transform of an AbstractNode. These properties are almost exactly like in DOM Css. Functions rotate(), translate(), skew(), scale() and matrix() are supported. See usage examples below.
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { Polygon } from "@int/geotoolkit/scene/shapes/Polygon.ts";
import { Rectangle } from "@int/geotoolkit/scene/shapes/Rectangle.ts";
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 css = `
*[cssclass="initialShape"] {
transform: none;
fillstyle: lightgrey;
}
*[cssclass="rectangle"] {
transform: rotate(35deg);
}
*[cssclass="circle"] {
transform: scale(0.3, 0.3) translate(3.9cm, 0);
}
*[cssclass="triangle"] {
transform: rotate(20rad) translate(12px, 21px) scale(0.7, 0.7);
}
`;
const group = new Group().setModelLimits(new Rect(0, 0, 400, 400));
const rectangle = new Rectangle({
"left": 250,
"top": 100,
"right": 350,
"bottom": 200,
"fillstyle": KnownColors.Red
}).setCssClass("rectangle");
const initialRect = rectangle.clone().setCssClass("initialShape");
const circle = new Ellipse({
"centerx": 300,
"centery": 300,
"radiusx": 60,
"radiusy": 60,
"fillstyle": KnownColors.Green
}).setCssClass("circle");
const initialCircle = circle.clone().setCssClass("initialShape");
const triangle = new Polygon({
"x": [50, 50, 200],
"y": [50, 300, 300],
"fillstyle": KnownColors.LightBlue
}).setCssClass("triangle");
const initialTriangle = triangle.clone().setCssClass("initialShape");
group.addChild([initialRect, rectangle, initialCircle, circle, initialTriangle, triangle]);
group.setCss(css);
return new Plot({
"canvaselement": canvas,
"root": group
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# CSS Text Transform
This section shows Css properties for text transformations. Text transform properties control capitalization of text. Possible values are 'uppercase', 'lowercase', 'capitalize', 'none'. See usage examples below.
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { Text } from "@int/geotoolkit/scene/shapes/Text.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
function createScene(canvas) {
const css = `
*[cssclass="uppercaseText"] {
texttransform: uppercase;
}
*[cssclass="lowercaseText"] {
texttransform: lowercase;
}
*[cssclass="capitalizedText"] {
texttransform: capitalize;
}
`;
const textShapeUpper = new Text({
"text": "uppeRcase TeXt Example",
"ax": 200,
"ay": 100,
"textstyle": {
"font": "17px Arial"
}
}).setCssClass("uppercaseText");
const textShapeLower = new Text({
"text": "LoWeRcase TeXt examPle",
"ax": 200,
"ay": 200,
"textstyle": {
"font": "17px Arial"
}
}).setCssClass("lowercaseText");
const textShapeCapitalize = new Text({
"text": "capitalize text example",
"ax": 200,
"ay": 300,
"textstyle": {
"font": "17px Arial"
}
}).setCssClass("capitalizedText");
return new Plot({
"canvaselement": canvas,
"root": new Group().addChild([textShapeUpper, textShapeLower, textShapeCapitalize]).setModelLimits(new Rect(0, 0, 400, 400)).setCss(css)
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));