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
Properties
Methods
Constructor Details
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);
...
});
Creates a new PictureFillSymbol object using a JSON object.
Parameters:
<Object > json |
Required |
JSON object representing the PictureFillSymbol. View the Symbol Objects (Common data types in ArcGIS) 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/PictureFillSymbol", ...
], function(PictureFillSymbol, ... ) {
var symbol = new PictureFillSymbol({
"url":"graphics/redArrow2.png",
"height":20,
"width":20,
"type":"esriPFS"
});
...
});
Property Details
Height of the image in pixels.
The type of symbol.
Known values: simplemarkersymbol | picturemarkersymbol | simplelinesymbol | cartographiclinesymbol | simplefillsymbol | picturefillsymbol | textsymbol
Width of the image in pixels.
The offset on the x-axis in pixels.
Default value: 0
Scale factor in x direction.
Default value: 1
The offset on the y-axis in pixels.
Default value: 0
Scale factor in y direction.
Default value: 1
Method Details
Sets the symbol color.
Parameters:
<Color > color |
Required |
Symbol color. |
Sample:
require([
"esri/Color", ...
], function(Color, ... ) {
symbol.setColor(new Color([255,255,0,0.5]));
...
});
Sets the height of the symbol.
Parameters:
<Number > height |
Required |
Height in pixels. |
Sets the symbol offset.
Parameters:
<Number > x |
Required |
Offset in x direction in pixels. |
<Number > y |
Required |
Offset in y direction in pixels. |
Sets the outline of the fill symbol.
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));
...
});
Sets the URL to the location of the symbol.
Parameters:
<String > url |
Required |
URL string. |
Sets the width of the symbol.
Parameters:
<Number > width |
Required |
Width in pixels. |
Sets the scale factor in x direction.
of the symbol.
Parameters:
<Number > scale |
Required |
Scale factor in x direction. |
Sets the scale factor in y direction.
Parameters:
<Number > scale |
Required |
Scale factor in y direction. |
Converts object to its ArcGIS Server JSON representation.