// get the active document var doc = app. ActiveDocument;// get reference to layer 1 var layer = doc. Layers 0;Any code entered in a script following these references will have access to the doc or layer objects. Preprocessor DirectivesPreprocessor directives are a way to include external scripts. At a basic level, the first line of a script might have a directive as show below.
![]()
Adobe does not recommend that customers using old versions of Photoshop upgrade to macOS Catalina. Incompatible versions (version 19.x and earlier) will not display in the ‘Older Versions’ list within the Creative Cloud desktop app. Older versions use 32-bit licensing components and installers.
![]()
This directive includes any code written in the file lib.js, bringing it into my script. Why use this? Over time your code might get complex, making it hard to read.
Using additional files will allow you to modularize, simplify, reuse, and streamline your code. To learn more about their use look at the JavaScript Tools Guide (pdf) located under Applications/ExtendScript Toolkit CC/SDK.
#include 'lib.js 'For the moment we won't worry about preprocessor directives. We will make use of them later in the guide. Hello WorldThis example will insert the text 'Hello World' at the position (0,0) in the artboard. The position that an object is inserted into the artboard is dependent on the artboard coordinates. When you make a new document using the Illustrator New Document window, the artboard will default to a position of (0,0). This is not always the case when generating an artboard using a script.
We will explore why this is next.Create an Illustrator file with mm as the default units. Set the document size to 100 mm x 100 mm and RGB Color. As mentioned previously, its really nice to be able to see the grid while learning about positioning and inserting objects to the artboard.
Setup the grid by going to Preferences Guides & Grid Gridline every: 1 mm, Subdivisions: 1.Create a script called hello-world.jsx and insert the following code. // get the active document var doc = app. ActiveDocument;// get reference to layer 1 var layer = doc. Layers 0;// create new text frame and add it to the layer var text = layer. Add;// contents and position of text frame text. Contents = 'Hello World ';text.
Position = 0, 0;.Run the code using Process Palette to see the result in Illustrator. The text was placed in the top left corner at (0,0).DebuggingThe $.writeln function - This is similar to println in Processing or console.log in standard JavaScript and is really useful for debugging. The only caveat is it only works in the ExtendScript Toolkit IDE and will print to the JavaScript Console within the IDE. I have not found a solution for printing debug messages to the console in Atom yet.
To make use of it, you can have the ExtendScript Toolkit open next to Atom. Var doc = app. ActiveDocument;var layer = doc. Layers 0; ExamplesThis section describes the examples contained in the scripts folder.
The best way to learn the API is to work through these examples starting from the top. Hello WorldThis example assumes there is an active document open in Illustrator. It gets a reference to the document, the first layer in the document, then adds a textFrameItem to the textFrames collection. A reference to the textFrameItem added is then positioned at 0,0 and given the contents of 'Hello World'.Assuming the document was created from the new file menu, it will have an origin of the top left, meaning both the world coordinates and artboard coordinates will align. As such, the text should be drawn in the top left corner. // define the document width (in points) var width = 100;// define the document height (in points) var height = 100;// create a new document; Set to RGB colorspace var doc = app. Add( DocumentColorSpace.
RGB, width, height);// add text to it var text1 = doc. PointText( 10, 0 );// the text text1. Contents = 'Hello World '; New Document Set OriginThis example creates a new document with a width of 100 pt and height of 100 pt and adds a pointTextItem to the textFrames collection. Before adding the text object we shift the ruler origin for the document such that the origin is in the top left. This is different from when we create a document using the standard new file menu. In two previous examples, you may notice the location of the text inserted is at or near the bottom of the artboard. This is because when generating a new document with a script, Illustrator will default to the bottom left as the origin instead of the top left.
![]()
// define the document width (in points) var width = 100;// define the document height (in points) var height = 100;// create a new document var doc = app. Add( DocumentColorSpace. RGB, width, height);// shift the zero-point of the rulers in the document relative to the bottom left of the document. Basically, make (0,0) of the artboard the top left corner to make it easier to position objects. RulerOrigin = 0,height;// add text to it var text1 = doc. PointText( 0, 0 );// the text text1.
Contents = 'Hello World '; New Document PresetThis example makes use of the DocumentPreset function to setup a new document. This allows you to customize things like the document title, width, height, and colorspace. It also allows you to make use of built in Illustrator presets for documents (which I rarely find myself using). // define the document width (in points) var width = 100;// define the document height (in points) var height = 100;var presets = app. StartupPresetsList;/. To get list of presets: var presets = app.startupPresetsList; $.writeln(presets); Returns: Art & Illustration,Basic RGB,Devices,Film and Video,Mobile,Print,Video and Film,Web./ var preset = presets 0;var docPreset = new DocumentPreset;docPreset. Title = 'MyNewDocument '; // Untitled by default docPreset.
Width = width;docPreset. Height = height;docPreset. ColorMode = DocumentColorSpace.
RGB;// create a new document var doc = app. AddDocument(preset, docPreset, false); New Document Preset UnitsThis example builds on the previous one and includes a scaling factor to change the document units from Points to Millimeters. I find the easiest way to deal with unit conversion is to just multiply or divide by the scaling factor. In this case its 2.834645 so we just declare a global variable called PTSMM to reference as needed. The document units are also specified in the docPreset as Millimeters. Var PTSMM = 2.834645;// define the document width (in mm) var width = 100. PTSMM;// define the document height (in mm) var height = 100.
PTSMM;var presets = app. StartupPresetsList;/. To get list of presets: var presets = app.startupPresetsList; $.writeln(presets); Returns: Art & Illustration,Basic RGB,Devices,Film and Video,Mobile,Print,Video and Film,Web./ var preset = presets 0;var docPreset = new DocumentPreset;//docPreset.title = 'MyNewDocument'; // Untitled by default docPreset.
Width = width;docPreset. Height = height;docPreset. ColorMode = DocumentColorSpace. Units = RulerUnits. Millimeters; // set the ruler units to mm // create a new document var doc = app. AddDocument(preset, docPreset, false);// shift origin doc. RulerOrigin = 0,height;// insert drawing code here // the document is setup with origin (0,00 in the top left corner.
Note: Positioning in the y direction is negative (ie -y). PrimitivesThis example covers the basics of drawing and styling primitive shapes such as rectangles, rounded rectangles, ellipses, lines, and closed paths. It also introduces a preprocessor directive to include some helper functions for working with color. #include './lib/color.js ' // define the document width (in points) var width = 100;// define the document height (in points) var height = 100;// create a new document var doc = app. Add( DocumentColorSpace. RGB, width, height);// shift origin doc. RulerOrigin = 0,height;// add to existing layer var layer = doc.
Layers 0;// coordinates (in points) var y = 0;var x = 0;var w = 10;var h = 10;// draw rectangle var rect = layer. Rectangle( -y, x, w, h);rect. FillColor = makeColorRGB( 0, 0, 255);rect. Stroked = false;// draw rounded rectangle var roundRect = layer. RoundedRectangle( -y, x + 10, w, h, 1, 1, false);roundRect. FillColor = makeColorRGB( 255, 0, 0);roundRect.
Stroked = false;// draw ellipse var ellipse = layer. Ellipse( -y, x + 20, w, h);ellipse. FillColor = makeColorRGB( 0, 255, 0);ellipse. Stroked = false;// draw line var p = layer. Add;var lineList = new Array( 10, - 20, 20, - 20);p. Filled = false;p.
StrokeWidth = 1;p. StrokeColor = makeColorRGB( 0, 0, 255);// draw closed path var p = layer. Add;var lineList = 30, - 20, 50, - 30, 40, - 15;p. Closed = true;p. Filled = false;p. StrokeCap = StrokeCap. StrokeJoin = StrokeJoin.
StrokeWidth = 2. #include './lib/units.js '#include './lib/doc.js ' // make new doc in pts (default) var doc = makeDocument( 100, 100);// make new doc in mm //var doc = makeDocument(100, 100, 'MM'); // make new doc in cm //var doc = makeDocument(100, 100, 'CM'); // make new doc in inches //var doc = makeDocument(100, 100, 'IN'); Preprocessor DirectivesThis example demonstrates how to include a single 'library' file called main.js using the #include preprocessor directive. Main.js in turn includes other js files.
![]() Comments are closed.
|
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
January 2023
Categories |