Draw
require(["esri/views/2d/draw/Draw"], function(Draw) { /* code goes here */ });esri/views/2d/draw/DrawThe Draw class provides advanced drawing capabilities for developers who need complete control over creating temporary graphics with different geometries. For example, if you want to prevent users from drawing graphics with 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
| Gesture | Action |
|---|---|
| Left-click | Adds a point at the pointer location. |
| C | Adds a point at the pointer location. |
Drawing polylines and polygons
| Gesture | Action |
|---|---|
| Left-click | Adds a vertex at the pointer location. |
| Left-drag | Adds a vertex for each pointer move. |
| C | Completes the polyline or polygon. |
| F | Adds a vertex to the polyline or polygon. |
| Z | Incrementally undos actions recorded in the stack. |
| R | Incrementally redos actions recorded in the stack. |
To provide users with a simpler drawing experience, then use SketchViewModel class.
// 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 Objectoptional
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
| Name | Type | Summary | Class | |
|---|---|---|---|---|
| DrawAction | A reference to the active draw action. more details | more details | Draw | |
| String | The name of the class. more details | more details | Accessor | |
| MapView | A reference to the MapView. more details | more details | Draw |
Property Details
- activeActionDrawAction
A reference to the active draw action. An instance of the draw action is created when create() method is called.
- Since: ArcGIS API for JavaScript 4.7
The name of the class. The declared class name is formatted as
esri.folder.className.
Method Overview
| Name | Return Type | Summary | Class | |
|---|---|---|---|---|
Complete the current active drawing. more details | more details | Draw | ||
| DrawAction | Creates an instance of the requested draw action. more details | more details | Draw | |
Resets the drawing by clearing the active action. more details | more details | Draw |
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 StringName of the draw action to create. See the table below for a list of possible values and type of draw action it creates.
Possible Values: point | multipoint | polyline | polygon | rectangle | circle | ellipse
Geometry type Draw action instance point PointDrawAction multipoint MultipointDrawAction polyline PolylineDrawAction polygon PolygonDrawAction rectangle, circle, ellipse SegmentDrawAction drawOptions ObjectoptionalObject of the drawing options for the geometry to be created.
Specification:mode StringoptionalThe drawing mode. The drawing mode applies only when creating
polygon,polyline,segmentdraw actions.Possible Values:
Value Description hybrid Vertices are added while the pointer is clicked or dragged. Applies to and is the default for polygonandpolylinedraw actions.freehand Vertices are added while the pointer is dragged. Applies to polygon,polylineandsegmentdraw actions. Default forsegmentdraw actions.click Vertices are added when the pointer is clicked. Returns:Type Description DrawAction Returns 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.