Hide Table of Contents
esri/dijit/util
esri/layer/pixelFilters
esri/process
esri/workers
Class: PictureFillSymbol

require(["esri/symbols/PictureFillSymbol"], function(PictureFillSymbol) { /* code goes here */ });

Description

(Added at v1.0)
Fill symbols are used to draw polygon features on the graphics layer. PictureFillSymbol uses an image in a repeating pattern. In addition, the symbol can have an optional outline, which is defined by a line symbol.

Explore the PictureFillSymbol in the ArcGIS Symbol Playground. This is a place to explore and learn how to work with various properties and methods before implementing it into custom code. Try out new features, customize them, and copy the generated code into your own application. This sample provides a starting point so as to allow use of these features as quickly as possible.

Samples

Search for samples that use this class.

Class hierarchy

esri/symbols/Symbol
|_esri/symbols/FillSymbol
  |_esri/symbols/PictureFillSymbol

Constructors

NameSummary
new PictureFillSymbol(url, outline, width, height)Creates a new PictureFillSymbol object.
new PictureFillSymbol(json)Creates a new PictureFillSymbol object using a JSON object.

Properties

NameTypeSummary
colorColorSymbol color.
heightNumberHeight of the image in pixels.
outlineSimpleLineSymbolOutline of the polygon.
typeStringThe type of symbol.
urlStringURL of the image.
widthNumberWidth of the image in pixels.
xoffsetNumberThe offset on the x-axis in pixels.
xscaleNumberScale factor in x direction.
yoffsetNumberThe offset on the y-axis in pixels.
yscaleNumberScale factor in y direction.

Methods

NameReturn typeSummary
setColor(color)SymbolSets the symbol color.
setHeight(height)PictureFillSymbolSets the height of the symbol.
setOffset(x, y)PictureFillSymbolSets the symbol offset.
setOutline(outline)FillSymbolSets the outline of the fill symbol.
setUrl(url)PictureFillSymbolSets the URL to the location of the symbol.
setWidth(width)PictureFillSymbolSets the width of the symbol.
setXScale(scale)PictureFillSymbolSets the scale factor in x direction. of the symbol.
setYScale(scale)PictureFillSymbolSets the scale factor in y direction.
toJson()ObjectConverts object to its ArcGIS Server JSON representation.
Constructor Details

new PictureFillSymbol(url, outline, width, height)

Creates a new PictureFillSymbol object.
Parameters:
<String> url Required URL of the image.
<SimpleLineSymbol> outline Required Outline of the symbol.
<Number> width Required Width of the image in pixels.
<Number> height Required Height of the image in pixels.
Sample:
require([
  "esri/symbols/PictureFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/Color", ... 
], function(PictureFillSymbol, SimpleLineSymbol, Color, ... ) {
  var pfs = new PictureFillSymbol('images/sand.png',
    new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
    new Color('#000'), 1),
    42, 42);
  ...
});

new PictureFillSymbol(json)

Creates a new PictureFillSymbol object using a JSON object.
Parameters:
<Object> json Required

JSON object representing the PictureFillSymbol. View the REST API Reference for Symbol Objects for details on creating a JSON symbol. Note that when specifying symbol width and height using JSON the values should be entered in points, the JavaScript API then converts the point values to pixels.

Sample:
require([
  "esri/symbols/PictureMarkerSymbol", ... 
], function(PictureMarkerSymbol, ... ) {
  var symbol =  new PictureMarkerSymbol({
    "url":"graphics/redArrow2.png",
    "height":20,
    "width":20,
    "type":"esriPMS"
  });
  ...
});
Property Details

<Color> color

Symbol color.

<Number> height

Height of the image in pixels.
Outline of the polygon.

<String> type

The type of symbol.
Known values: simplemarkersymbol | picturemarkersymbol | simplelinesymbol | cartographiclinesymbol | simplefillsymbol | picturefillsymbol | textsymbol

<String> url

URL of the image.

<Number> width

Width of the image in pixels.

<Number> xoffset

The offset on the x-axis in pixels.
Default value: 0

<Number> xscale

Scale factor in x direction.
Default value: 1

<Number> yoffset

The offset on the y-axis in pixels.
Default value: 0

<Number> yscale

Scale factor in y direction.
Default value: 1
Method Details

setColor(color)

Sets the symbol color.
Return type: Symbol
Parameters:
<Color> color Required Symbol color.
Sample:
require([
  "esri/Color", ... 
], function(Color, ... ) {
  symbol.setColor(new Color([255,255,0,0.5]));
  ...
});

setHeight(height)

Sets the height of the symbol.
Return type: PictureFillSymbol
Parameters:
<Number> height Required Height in pixels.

setOffset(x, y)

Sets the symbol offset.
Return type: PictureFillSymbol
Parameters:
<Number> x Required Offset in x direction in pixels.
<Number> y Required Offset in y direction in pixels.

setOutline(outline)

Sets the outline of the fill symbol.
Return type: FillSymbol
Parameters:
<SimpleLineSymbol> outline Required Symbol used for outline.
Sample:
require([
  "esri/symbols/SimpleLineSymbol", "esri/Color", ... 
], function(SimpleLineSymbol, Color, ... ) {
  selSymbol.setOutline(new SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new Color([255,0,0]), 2));   
  ...
});

setUrl(url)

Sets the URL to the location of the symbol.
Return type: PictureFillSymbol
Parameters:
<String> url Required URL string.

setWidth(width)

Sets the width of the symbol.
Return type: PictureFillSymbol
Parameters:
<Number> width Required Width in pixels.

setXScale(scale)

Sets the scale factor in x direction. of the symbol.
Return type: PictureFillSymbol
Parameters:
<Number> scale Required Scale factor in x direction.

setYScale(scale)

Sets the scale factor in y direction.
Return type: PictureFillSymbol
Parameters:
<Number> scale Required Scale factor in y direction.

toJson()

Converts object to its ArcGIS Server JSON representation.
Return type: Object