Destroyed 2.3.4.1 (Style Tab) General (markdown)

Azgaar 2024-10-13 20:55:36 +02:00
parent 4010c28f80
commit db8c8c9da3

@ -1,224 +0,0 @@
The style tab allows applying design settings, both in general to the entire map, and privately to certain elements, such as the color of elements, their degree of opacity, etc.
This is the final stage in the preparation of the map, after all its logic is ready.
## Common style controls
After choosing an element for design (eg Anchor Icons or biomes), you can customize its design with a variety of controls.
For many of the elements there are the same design controls with the same functionality, below is their breakdown:
### Group
![image](https://github.com/user-attachments/assets/f4277f5d-e45a-440c-83f6-52f2e02cab71)
Sometimes, elements are divided into groups.
For example, by default, lakes are divided into 6 groups: fresh water, salt water, dry, etc.
You can customize the display of each of the groups separately, for example, a freshwater lake can be drawn in blue, and a saltwater lake can be drawn in red.
Note that next to the group, there is a number that records how many elements there are from the group.
<details>
<summary>Show Image</summary>
![image](https://github.com/user-attachments/assets/5504c8dd-ee24-4159-9faa-6e1f72367a89)
This image shows a map, where there are 5 lakes with fresh water, 1 lake with salt water, and no lakes from the other groups.
</details>
### Opacity
![image](https://github.com/user-attachments/assets/df451f6d-70f1-4ee7-9599-31f5f4839d23)
A slider that determines the degree of opacity of the element (value between 0 and 1).
If equal to 0, the color of the element will (mostly) be the color of what is below it, for example the color of the river will be the color of the land on which it flows (and if there is a layer that colors the land, it will be the army). Note that there are exceptions, for example for a lake, the color of the element will be the color of the sea.
For example, a lake at opacity 0:
<details>
<summary>Show Image</summary>
![image](https://github.com/user-attachments/assets/d1890338-2383-4254-a61b-371b01eeb7c2)
</details>
In contrast, Lake opacity 1:
<details>
<summary>Show Image</summary>
![image](https://github.com/user-attachments/assets/bdf9da82-312a-4cde-b92a-d659f451f818)
</details>
### Shift by axes
![image](https://github.com/user-attachments/assets/e15a2e67-e9b0-4778-a2ef-11911d69b982)
Allows you to shift the layer on the x-axis and the y-axis.
For example, for texture styling, if we choose this:
70, 10
The map will look like this:
<details>
<summary>Show Image</summary>
![image](https://github.com/user-attachments/assets/52c8cf26-4677-4505-b578-7f58e7b035d6)
You see that the texture layer moves to the right by 50 units, and moves down by 70 units.
</details>
### Filter
![image](https://github.com/user-attachments/assets/9ae43d89-f729-4ef2-b554-653d295afd5a)
Contains additional display settings on the element, according to a filter. Each filter has certain display settings.
For example, Blur 1 creates a light blur around the element, while Blur 3 creates a heavier blur, while Blur 10 completely blurs the element, effectively hiding it.
This is known as a filter, because you put a "lens" over the object that makes a visual effect on it, for example a blur, or a wrinkled look. It could be called "effect" (on the element).
TODO - add explain for each filter
#### None
#### Blur 0.2
#### Blur 1
#### Blur 3
#### Blur 5
#### Blur 7
#### Blur 10
#### Splotch
#### Blurred Splotch
#### Shadow 2
#### Shadow 0.1
#### Shadow 0.5
#### Outline
#### Pencil
#### Turbulence
#### Paper
#### Crumpled
#### Grayscale
#### Sepia
#### Dingy
### Clipping
![image](https://github.com/user-attachments/assets/333f4c01-e7b6-4282-9518-b7f2da6433a2)
Dropdown that allows you to choose whether the layer will apply to the land, the sea, or both.
#### No clipping
The layer will apply to the entire map, including the sea and including the land.
#### Clip water
The layer will only apply to the land.
#### Clip land
The layer will only apply to the sea.
### Common style controls (Fill related)
#### Fill color
![image](https://github.com/user-attachments/assets/d4a949b7-2336-4ac7-a50f-fbc402be9bb7)
Sets the element's fill color.
<details>
<summary>Show Image</summary>
![image](https://github.com/user-attachments/assets/6c19a8be-0599-4be9-82e4-55a9e51fad28)
![image](https://github.com/user-attachments/assets/e27f3782-e14b-4c9c-b566-d01499098f74)
</details>
### Common style controls (Stroke related)
Stroke is the line that surrounds the element.
#### Stroke color
![image](https://github.com/user-attachments/assets/7890332c-1d38-402a-b1c5-6967ee451142)
Sets the fill color of the stroke.
<details>
<summary>Show Image</summary>
![image](https://github.com/user-attachments/assets/51f8c43d-7907-4054-a266-fca6c749154b)
![image](https://github.com/user-attachments/assets/10e44216-7e7e-4e8d-9a2e-5a17a8573ba8)
</details>
#### Stroke width
![image](https://github.com/user-attachments/assets/9b3cf590-42ec-4f4b-adce-952aae223698)
Slider that determines the width of the stroke.
The lower the value, the thinner the line will be, to the point of non-existence, and conversely, the higher the value, the thicker the line will be.
<details>
<summary>Show Image</summary>
![image](https://github.com/user-attachments/assets/a5758cc8-f355-409e-8ca4-d54d5c782abd)
![image](https://github.com/user-attachments/assets/a8b8dae3-63ee-4846-bddf-e6c79b712474)
</details>
### Common style controls (Font related)
#### Font size
![image](https://github.com/user-attachments/assets/347bad04-5b45-451f-8f29-d6c58c0844db)
Determines the font of the text relevant to the element.
### Common style controls (dotted lines related)
#### Stroke dash
![image](https://github.com/user-attachments/assets/6d467a97-a379-4e5a-9d69-d775ab850b23)
This style control contains 2 parts of data.
The number determines the spacing between the dash marks that make up the dashed line.
Value 0 determines that there will be no spaces. The higher the value, the greater the distance between dashes.
<details>
<summary>Show Image</summary>
![image](https://github.com/user-attachments/assets/eef4762b-c692-403d-a867-9bb656868530)
![image](https://github.com/user-attachments/assets/8684655b-a1ce-4307-90f4-ba4609c45ff3)
</details>
The dropdown allows you to determine the appearance of the ends of the dash endcaps that make up the dashed line.
Butt The dashes have no effect. The line ends exactly at the ends of its starting and ending points, without extending the line beyond these ends.
Square - There is a small addition along the line. More precisely, adds a rectangle at the end of the line, where the width of the rectangle is half the width of the line and the height is equal to the width of the line.
Round - Expand the line at its end using a semicircle, whose diameter is equal to the width of the line.
Inherit - Todo
<details>
<summary>Show Image</summary>
![image](https://github.com/user-attachments/assets/36310d6c-82bf-43eb-9711-9c435478e58b)
![image](https://github.com/user-attachments/assets/87643b16-5dc1-4129-b8e7-eb36029e2034)
![image](https://github.com/user-attachments/assets/2a4efdf2-b7be-4283-bd6c-7f6b789883e4)
</details>