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.

As of version 4.5, the Draw class provides the logic for creating temporary geometries such as point, polyline and polygon. In future releases, it will provide logic for creating additional geometry types such as multipoint, and for modifying existing geometries.

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

Drawing points

GestureAction
ClickAdds a point at the pointer location.
CAdds a point at the pointer location.

Drawing polylines and polygons

GestureAction
ClickAdds a vertex at the pointer location.
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
var action = draw.create("polyline");

// 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
PointDrawAction | MultipointDrawAction | PolygonDrawAction | PolylineDrawAction

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

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

declaredClassStringreadonly inherited

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
PointDrawAction|MultipointDrawAction|PolylineDrawAction|PolygonDrawAction

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

Creates an instance of the requested draw action.

Parameter:
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

Returns:
TypeDescription
PointDrawAction | MultipointDrawAction | PolylineDrawAction | PolygonDrawActionReturns 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.

API Reference search results

NameTypeModule

There were no match results from your search criteria.