212 lines
4.6 KiB
HTML
212 lines
4.6 KiB
HTML
---
|
|
layout: example.html
|
|
title: Icon and Label Scale
|
|
shortdesc: Example of scaling icons and labels.
|
|
docs: >
|
|
Icons and labels can be scaled in both dimensions if required. A negative value will flip the image
|
|
or text around its anchor point (reversed text is <b>not</b> suitable for line placement).
|
|
tags: "vector, style, icon, label, scale"
|
|
---
|
|
<div id="map" class="map"></div>
|
|
<table class="controls">
|
|
<tr>
|
|
<th>
|
|
Image
|
|
</th>
|
|
<th></th>
|
|
<th style="visibility: hidden;">-0.00 π</th>
|
|
<th> </th>
|
|
<th>
|
|
Text
|
|
</th>
|
|
<th></th>
|
|
<th></th>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="rotateWithView">Rotate with view</label> </td>
|
|
<td>
|
|
<input id="rotateWithView" type="checkbox" />
|
|
</td>
|
|
<td><span id="rotateWithViewOut"></span></td>
|
|
<td></td>
|
|
<td><label for="textRotateWithView">Rotate with view</label> </td>
|
|
<td>
|
|
<input id="textRotateWithView" type="checkbox" />
|
|
</td>
|
|
<td><span id="textRotateWithViewOut"></span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="rotation">Rotation</label></td>
|
|
<td>
|
|
<input
|
|
id="rotation"
|
|
type="range"
|
|
min="-1"
|
|
max="1"
|
|
step="0.05"
|
|
value="0.25"
|
|
/>
|
|
</td>
|
|
<td><span id="rotationOut"></span> π</td>
|
|
<td></td>
|
|
<td><label for="textRotation">Rotation</label></td>
|
|
<td>
|
|
<input
|
|
id="textRotation"
|
|
type="range"
|
|
min="-1"
|
|
max="1"
|
|
step="0.05"
|
|
value="0.25"
|
|
/>
|
|
</td>
|
|
<td><span id="textRotationOut"></span> π</td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="scaleX">Scale X</label></td>
|
|
<td>
|
|
<input
|
|
id="scaleX"
|
|
type="range"
|
|
min="-2"
|
|
max="2"
|
|
step="0.1"
|
|
value="1"
|
|
/>
|
|
</td>
|
|
<td><span id="scaleXOut"></span></td>
|
|
<td></td>
|
|
<td><label for="textScaleX">Scale X</label></td>
|
|
<td>
|
|
<input
|
|
id="textScaleX"
|
|
type="range"
|
|
min="-2"
|
|
max="2"
|
|
step="0.1"
|
|
value="1"
|
|
/>
|
|
</td>
|
|
<td><span id="textScaleXOut"></span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="scaleY">Scale Y</label></td>
|
|
<td>
|
|
<input
|
|
id="scaleY"
|
|
type="range"
|
|
min="-2"
|
|
max="2"
|
|
step="0.1"
|
|
value="1"
|
|
/>
|
|
</td>
|
|
<td><span id="scaleYOut"></span></td>
|
|
<td></td>
|
|
<td><label for="textScaleY">Scale Y</label></td>
|
|
<td>
|
|
<input
|
|
id="textScaleY"
|
|
type="range"
|
|
min="-2"
|
|
max="2"
|
|
step="0.1"
|
|
value="1"
|
|
/>
|
|
</td>
|
|
<td><span id="textScaleYOut"></span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="anchorX">Anchor X</label></td>
|
|
<td>
|
|
<input
|
|
id="anchorX"
|
|
type="range"
|
|
min="0"
|
|
max="1"
|
|
step="0.01"
|
|
value="0.5"
|
|
/>
|
|
</td>
|
|
<td><span id="anchorXOut"></span></td>
|
|
<td></td>
|
|
<td><label for="textAlign">Align</label></td>
|
|
<td>
|
|
<input
|
|
id="textAlign"
|
|
type="range"
|
|
min="0"
|
|
max="2"
|
|
step="1"
|
|
value="1"
|
|
/>
|
|
</td>
|
|
<td><span id="textAlignOut"></span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="anchorY">Anchor Y</label></td>
|
|
<td>
|
|
<input
|
|
id="anchorY"
|
|
type="range"
|
|
min="0"
|
|
max="1"
|
|
step="0.01"
|
|
value="1"
|
|
/>
|
|
</td>
|
|
<td><span id="anchorYOut"></span></td>
|
|
<td></td>
|
|
<td><label for="textBaseline">Baseline</label></td>
|
|
<td>
|
|
<input
|
|
id="textBaseline"
|
|
type="range"
|
|
min="0"
|
|
max="2"
|
|
step="1"
|
|
value="0"
|
|
/>
|
|
</td>
|
|
<td><span id="textBaselineOut"></span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="displacementX">Displacement X</label></td>
|
|
<td>
|
|
<input
|
|
id="displacementX"
|
|
type="range"
|
|
min="-100"
|
|
max="100"
|
|
value="0"
|
|
/>
|
|
</td>
|
|
<td><span id="displacementXOut"></span></td>
|
|
<td></td>
|
|
<td><label for="textOffsetX">Offset X</label></td>
|
|
<td>
|
|
<input id="textOffsetX" type="range" min="-100" max="100" value="0" />
|
|
</td>
|
|
<td><span id="textOffsetXOut"></span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="displacementY">Displacement Y</label></td>
|
|
<td>
|
|
<input
|
|
id="displacementY"
|
|
type="range"
|
|
min="-100"
|
|
max="100"
|
|
value="0"
|
|
/>
|
|
</td>
|
|
<td><span id="displacementYOut"></span></td>
|
|
<td></td>
|
|
<td><label for="textOffsetY">Offset Y</label></td>
|
|
<td>
|
|
<input id="textOffsetY" type="range" min="-100" max="100" value="0" />
|
|
</td>
|
|
<td><span id="textOffsetYOut"></span></td>
|
|
</tr>
|
|
</table>
|