30 lines
1.8 KiB
HTML
30 lines
1.8 KiB
HTML
---
|
|
layout: example.html
|
|
title: Scale and Rotate using Modify Interaction
|
|
shortdesc: Example of using the Modify interaction to scale and rotate geometries.
|
|
docs: >
|
|
Example of using the `ol/interaction/Modify` interaction to scale and rotate geometries. Custom style functions produce and display
|
|
a scaled and rotated version of the original geometry based on the position of a vertex being modified.
|
|
This is set as the final geometry at the end of the interaction.
|
|
By default the `ol/geom/Geometry` scale and rotate methods use the center of the geometry extent as anchor.
|
|
For irregular shapes the extent changes as the geometry is rotated and using its center as anchor could produce different results
|
|
if rotation was stopped and resumed. To avoid that an anchor point which is fixed relative to the geometry is used
|
|
- for `ol/geom/Polygon` the centroid of the vertices, and the midpoint for `ol/geom/LineString`.
|
|
Only outer vertices (more than 1/3 the maximum distance from the anchor) are used to scale and rotate as precise scaling close to
|
|
the anchor would be difficult. For the convenience of the user the style function highlights the anchor and available vertices.
|
|
The `ol/interaction/Translate` interaction is also available to reposition geometries.
|
|
The Modify and Translate interactions have mutually exclusive `condition` options set so they can be available together.
|
|
Use `Ctrl+Drag` (`Command+Drag` on Mac) to use the Translate interaction.
|
|
tags: "draw, edit, modify, vector, scale, rotate"
|
|
---
|
|
<div id="map" class="map"></div>
|
|
<form>
|
|
<label for="type">Geometry type </label>
|
|
<select id="type">
|
|
<option value="Point">Point</option>
|
|
<option value="LineString">LineString</option>
|
|
<option value="Polygon" selected>Polygon</option>
|
|
<option value="Circle">Circle</option>
|
|
</select>
|
|
</form>
|