SegmentDrawAction
require(["esri/views/2d/draw/SegmentDrawAction"], function(SegmentDrawAction) { /* code goes here */ });
esri/views/2d/draw/SegmentDrawAction
This class uses different events to generate a set of vertices to create a geometry with drag mode or with two clicks.
Constructors
- new SegmentDrawAction(properties)
- Parameter:properties Objectoptional
See the properties for a list of all the properties that may be passed into the constructor.
Property Overview
Name | Type | Summary | Class | |
---|---|---|---|---|
String | The name of the class. more details | more details | Accessor | |
String | The drawing mode. more details | more details | SegmentDrawAction | |
Number[][] | Two-dimensional array of numbers representing the coordinates of each vertex comprising the geometry being drawn. more details | more details | SegmentDrawAction | |
MapView | A reference to the MapView. more details | more details | DrawAction |
Property Details
- Since: ArcGIS API for JavaScript 4.7
The name of the class. The declared class name is formatted as
esri.folder.className
.
- modeString
The drawing mode. It is only relevant when the action is first created. Its value cannot be changed during the action lifecycle.
Possible Values:
Value Description freehand Vertices are added while the pointer is dragged. click Vertices are added when the pointer is clicked. SegmentDrawActions are created from 2 vertices. - Default Value:freehand
Example:draw.create("rectangle", {mode: "click"});
- verticesNumber[][]readonly
Two-dimensional array of numbers representing the coordinates of each vertex comprising the geometry being drawn.
A reference to the MapView.
Method Overview
Name | Return Type | Summary | Class | |
---|---|---|---|---|
Completes drawing the polygon geometry and fires the draw-complete event. more details | more details | SegmentDrawAction | ||
Emits an event on the instance. more details | more details | DrawAction | ||
Boolean | Indicates whether there is an event listener on the instance that matches the provided event name. more details | more details | DrawAction | |
Object | Registers an event handler on the instance. more details | more details | DrawAction |
Method Details
- complete()
Completes drawing the polygon geometry and fires the draw-complete event.
- emit(type, event)inherited
Emits an event on the instance. This method should only be used when creating subclasses of this class.
Parameters:type StringThe name of the event.
event ObjectThe event payload.
Indicates whether there is an event listener on the instance that matches the provided event name.
Parameter:type StringThe name of the event.
Returns:Type Description Boolean Returns true if the class supports the input event.
Registers an event handler on the instance. Call this method to hook an event with a listener.
Parameters:type StringThe name of event to listen for.
listener FunctionThe function to call when the event is fired.
Returns:Type Description Object Returns an event handler with a remove()
method that can be called to stop listening for the event.Property Type Description remove Function When called, removes the listener from the event. - See also:
Example:view.on("click", function(event){ // event is the event handle returned after the event fires. console.log(event.mapPoint); });
Event Overview
Name | Type | Summary | Class | |
---|---|---|---|---|
{vertices: Number[][],vertexIndex: Number,preventDefault: Function,defaultPrevented: Boolean,type: String} | Fires after the pointer moves on the view. more details | more details | SegmentDrawAction | |
{vertices: Number[][],preventDefault: Function,defaultPrevented: Boolean,type: String} | Fires after the user has completed drawing a geometry. more details | more details | SegmentDrawAction | |
{vertices: Number[][],vertexIndex: Number,preventDefault: Function,defaultPrevented: Boolean,type: String} | Fires when a vertex is added. more details | more details | SegmentDrawAction |
Event Details
- cursor-update
Fires after the pointer moves on the view.
- Properties:
- vertices Number[][]
A two-dimensional array of numbers representing the coordinates of each vertex that comprise the geometry.
vertexIndex NumberIndex of the last vertex added to the vertices array.
preventDefault FunctionPrevents event propagation bubbling up the event chain.
defaultPrevented BooleanSet to true when
preventDefault()
is called.type StringThe type of the event. For this event, the type is always
cursor-update
.
Example:// listen to SegmentDrawAction.cursor-update // give a visual feedback to the user on the view // as user moving the pointer. action.on("cursor-update", function (evt) { view.graphics.removeAll(); var polygon = new Polygon({ rings: evt.vertices, spatialReference: view.spatialReference }); graphic = createGraphic(polygon); view.graphics.add(graphic); });
- draw-complete
Fires after the user has completed drawing a geometry.
- Properties:
- vertices Number[][]
A two-dimensional array of numbers representing the coordinates of each vertex that comprise the geometry.
preventDefault FunctionPrevents event propagation bubbling up the event chain.
defaultPrevented BooleanSet to true when
preventDefault()
is called.type StringThe type of the event. For this event, the type is always
draw-complete
.
Example:// listen to SegmentDrawAction.draw-complete // add the graphic representing the completed // polygon to the view action.on("draw-complete", function (evt) { view.graphics.removeAll(); var polygon = new Polygon({ rings: evt.vertices, spatialReference: view.spatialReference }); graphic = createGraphic(polygon); view.graphics.add(graphic); });
- vertex-add
Fires when a vertex is added.
- Properties:
- vertices Number[][]
A two-dimensional array of numbers representing the coordinates of each vertex that make the geometry.
vertexIndex NumberIndex of the last vertex added to the vertices array.
preventDefault FunctionPrevents event propagation bubbling up the event chain.
defaultPrevented BooleanSet to true when
preventDefault()
is called.type StringThe type of the event. For this event, the type is always
vertex-add
.
Example:// listen to SegmentDrawAction.vertex-add // give a visual feedback to the user on the view // as user moving the pointer. action.on("vertex-add", function (evt) { view.graphics.removeAll(); var polygon = new Polygon({ rings: evt.vertices, spatialReference: view.spatialReference }); graphic = createGraphic(polygon); view.graphics.add(graphic); });