backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2026-02-06 10:31:23 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

feat: vignette style control

Browse source
This commit is contained in:
Azgaar 2023-11-23 04:22:37 +04:00
parent 8aa38d9ace
commit 4e7b07e3e3
4 changed files with 112 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

62
index.html
View file

@ -362,7 +362,18 @@
<mask id="vignette-mask">
<rect x="0" y="0" width="100%" height="100%" fill="white"></rect>
<rect x="0" y="0" width="100%" height="100%" fill="black" filter="blur(50px)" rx="5%" ry="5%"></rect>
<rect
id="vignette-rect"
transform="translate(25%, 25%)"
x="0%"
y="0%"
width="100%"
height="100%"
fill="black"
filter="blur(50px)"
rx="5%"
ry="5%"
></rect>
</mask>
</defs>
<g id="viewbox"></g>
@ -793,6 +804,7 @@
<option value="regions" selected>States</option>
<option value="temperature">Temperature</option>
<option value="texture">Texture</option>
<option value="vignette">Vignette</option>
<option value="compass">Wind Rose</option>
<option value="zones">Zones</option>
</select>
@ -917,6 +929,44 @@
</tr>
</tbody>
<tbody id="styleVignette">
<tr data-tip="Vignette rectangle position (in percents)">
<td>Position</td>
<td style="display: flex; flex-direction: column; gap: 2px">
<div>
<span>x </span>
<input id="styleVignetteX" type="number" min="0" max="100" style="width: 5em" />
<span>width&nbsp; </span>
<input id="styleVignetteWidth" type="number" min="0" max="100" style="width: 5em" />
</div>
<div>
<span>y </span>
<input id="styleVignetteY" type="number" min="0" max="100" style="width: 5em" />
<span>height </span>
<input id="styleVignetteHeight" type="number" min="0" max="100" style="width: 5em" />
</div>
</td>
</tr>
<tr data-tip="Set vignette X and Y radius (in percents)">
<td>Radius</td>
<td>
<span>x </span>
<input id="styleVignetteRx" type="number" min="0" max="50" style="width: 5em" />
<span>y </span>
<input id="styleVignetteRy" type="number" min="0" max="50" style="width: 5em" />
</td>
</tr>
<tr data-tip="Set vignette blue propagation (in pixels)">
<td>Blur</td>
<td>
<input id="styleVignetteBlur" type="range" min="0" max="400" step="1" value="50" />
<output id="styleVignetteBlurOutput">50</output>px
</td>
</tr>
</tbody>
<tbody id="styleOcean">
<tr data-tip="Select ocean pattern">
<td>Pattern</td>
@ -998,16 +1048,6 @@
</tr>
</tbody>
<tbody id="styleShift">
<tr data-tip="Shift the element by axes">
<td>Shift by axes</td>
<td>
<input id="styleShiftX" type="number" data-tip="Shift by x axis in pixels" />
<input id="styleShiftY" type="number" data-tip="Shift by y axis in pixels" />
</td>
</tr>
</tbody>
<tbody id="styleCompass">
<tr data-tip="Set wind (compass) rose size">
<td>Size</td>