require(["esri/views/2d/draw/Draw"], function(Draw) { /* code goes here */ });
Class: esri/views/2d/draw/Draw
Inheritance: Draw Accessor
Since: ArcGIS API for JavaScript 4.5

The Draw class provides advanced drawing capabilities for developers who need complete control over creating temporary geometries. For example, if you want to prevent users from drawing self-intersecting lines or overlapping polygons, then you can use this class to implement these rules. The draw experience is built upon draw actions, which use the view events to generate a set of coordinates for creating new geometries. Each geometry type has a corresponding draw action class.

This class provides a simple interface for interacting with draw actions. After initializing a Draw instance, you can call create() to return a reference to the relevant draw action. This draw action may then be used to create new geometries of the specified type.

Pointer and keyboard gestures for drawing points, polylines, and polygons are described in the tables below.

Drawing points

GestureAction
Left-clickAdds a point at the pointer location.
CAdds a point at the pointer location.

Drawing polylines and polygons

GestureAction
Left-clickAdds a vertex at the pointer location.
Left-dragAdds a vertex for each pointer move.
CCompletes the polyline or polygon.
FAdds a vertex to the polyline or polygon.
ZIncrementally undos actions recorded in the stack.
RIncrementally redos actions recorded in the stack.

To provide users with a simpler drawing experience, then use SketchViewModel class.

See also:
Example:
// create a new instance of draw
var draw = new Draw({
  view: view
});

// create an instance of draw polyline action
// the polyline vertices will be only added when
// the pointer is clicked on the view
var action = draw.create("polyline", {mode: "click"});

// fires when a vertex is added
action.on("vertex-add", function (evt) {
  measureLine(evt.vertices);
});

// fires when the pointer moves
action.on("cursor-update", function (evt) {
  measureLine(evt.vertices);
});

// fires when the drawing is completed
action.on("draw-complete", function (evt) {
  measureLine(evt.vertices);
});

// fires when a vertex is removed
action.on("vertex-remove", function (evt) {
  measureLine(evt.vertices);
});

function measureLine(vertices) {
  view.graphics.removeAll();

  var line = createLine(vertices);
  var lineLength = geometryEngine.geodesicLength(line, "miles");
  var graphic = createGraphic(line);
  view.graphics.add(graphic);
}

Constructors

new Draw(properties)
Parameter:
properties Object
optional

See the properties for a list of all the properties that may be passed into the constructor.

Example:
// Typical usage
var draw = new Draw({
  view: view
});

Property Overview

Any properties can be set, retrieved or listened to. See the Working with Properties topic.
NameTypeSummaryClass
DrawAction

A reference to the active draw action.

more details
more detailsDraw
String

The name of the class.

more details
more detailsAccessor
MapView

A reference to the MapView.

more details
more detailsDraw

Property Details

activeActionDrawAction

A reference to the active draw action. An instance of the draw action is created when create() method is called.

declaredClassStringreadonly inherited
Since: ArcGIS API for JavaScript 4.7

The name of the class. The declared class name is formatted as esri.folder.className.

A reference to the MapView. Set this to link the draw to a specific view.

Method Overview

NameReturn TypeSummaryClass

Complete the current active drawing.

more details
more detailsDraw
DrawAction

Creates an instance of the requested draw action.

more details
more detailsDraw

Resets the drawing by clearing the active action.

more details
more detailsDraw

Method Details

complete()
Since: ArcGIS API for JavaScript 4.7

Complete the current active drawing.

create(drawAction, drawOptions){DrawAction}

Creates an instance of the requested draw action.

Parameters:
drawAction String

Name of the draw action to create. See the table below for a list of known values and type of draw action it creates.

Known Values: point | multipoint | polyline | polygon | rectangle | circle | ellipse

Geometry typeDraw action instance
pointPointDrawAction
multipointMultipointDrawAction
polylinePolylineDrawAction
polygonPolygonDrawAction
rectangle, circle, ellipseSegmentDrawAction
drawOptions Object

Object of the drawing options for the geometry to be created.

Specification:
mode String
optional
Default Value: hybrid

The drawing mode. The drawing mode only applies when creating polygon and polyline geometries.

Known Values:

ValueDescription
hybridVertices are added while the pointer is clicked or dragged.
freehandVertices are added while the pointer is dragged.
clickVertices are added when the pointer is clicked.
Returns:
TypeDescription
DrawActionReturns an instance of the requested draw action.
Example:
var pointAction = draw.create("point");
reset()
Since: ArcGIS API for JavaScript 4.6

Resets the drawing by clearing the active action.

Searching...

API Reference search results

NameTypeModule

There were no match results from your search criteria.