A graphic is an individual graphic element on a canvas. Graphic is an abstract superclass (that is, no actual Graphic objects exist, only more specialized sub-types of Graphic such as Solid and Line).
A Solid graphic is one that potentially has a fill, image, and text - as opposed to a Line, which has only a stroke. Almost all Solid graphics will actually be the subclass Shape, but a canvas background is a Solid without being a Shape.
A Shape is a “Solid” graphic which has a particular shape, either one of the built-in shapes (such as Circle), or a custom bezier shape.
A Line is a graphic which is a vector, potentially connecting two other graphics at its head and tail ends.
Getting Graphics
The graphics property of the Canvas class has a value that is an array of references to every graphic on the canvas.
Here is a script for creating an array of references to all graphics on the current canvas:
var gs = new Array()
canvases.forEach(function(cnvs){
gs = gs.concat(cnvs.graphics)
})
Get All Graphics in Document
01
vargs = newArray()
02
canvases.forEach(function(cnvs){
03
gs = gs.concat(cnvs.graphics)
04
})
Graphic Instance Functions
All graphics share common functions for duplicating, deleting, and reordering their position in the stack of graphics on a canvas. Here are script examples of each function:
orderAbove(Graphic) • Reorder this graphic so that it is just above the given one.
orderBelow(Graphic)) • Reorder this graphic so that it is just below the given one.
remove() • Remove this graphic from its canvas, deleting it.
duplicateTo(locationPoint, Canvas or nil) (Graphic or nil) • A convenience method, this does the same thing as canvas.duplicate() and then setting the geometry origin of the newly duplicated graphic. The destination canvas parameter can be omitted entirely in order to make a duplicate of the graphic to a different location of the same canvas it is already on.
And here’s how to reorder graphics in a specified layer.
var cnvs = document.windows[0].selection.canvas
var layerNames = cnvs.layers.map(function(layer){
return layer.name
})
var targetName = "Cities"
if (layerNames.includes(targetName)){
var targetLayer = cnvs.layers.filter(function(layer){
if (layer.name === targetName){return layer}
})
} else {
throw new Error("Layer not found.")
}
targetLayer = targetLayer[0]
var names = targetLayer.graphics.map(function(graphic){
return graphic.name
})
names.sort().reverse().forEach(function(name){
graphic = cnvs.graphicWithName(name)
graphic.orderAbove(targetLayer.graphics[0])
})
Order Graphics in Specified Layer
01
varcnvs = document.windows[0].selection.canvas
02
var layerNames = cnvs.layers.map(function(layer){
03
return layer.name
04
})
05
var targetName = "Cities"
06
if (layerNames.includes(targetName)){
07
var targetLayer = cnvs.layers.filter(function(layer){
08
if (layer.name === targetName){return layer}
09
})
10
} else {
11
thrownewError("Layer not found.")
12
}
13
targetLayer = targetLayer[0]
14
var names = targetLayer.graphics.map(function(graphic){
15
return graphic.name
16
})
17
names.sort().reverse().forEach(function(name){
18
graphic = cnvs.graphicWithName(name)
19
graphic.orderAbove(targetLayer.graphics[0])
20
})
Select and Deselect Graphics
The select function changes the selection to a new array of graphics. If the extending parameter is true, then the previous selection is retained as well.
