Skip to main content
Parts4Arts
Inspiring
October 4, 2021
Answered

Drawing a line with Javascript

  • October 4, 2021
  • 1 reply
  • 2603 views

Hello,

I am looking for the command in Javascript for Illustrator to draw a simple line.
For a rectangle I use
    var itemRef1 = docRef.pathItems.rectangle(vTop, vLeft, vWidth, vLength);
A corresponding command
    var itemRef1 = docRef.pathItems.line(vX1, vY1, vX2, vX2);
does not seem to exist.

 

And how can you draw arcs and spirals with JavaScript?

 

Thanks for the answer in advance,
- jens.

 

This topic has been closed for replies.
Correct answer femkeblanco

You probably know this already but here it is.  There is no built-in function to draw a line (or an arc or spiral), at least not in the syntax of rectangle(), although of course you can define your own. 

 

To draw a line
(1) you add a pathItem to the pathItems collection;
(2) you add a first pathPoint to the pathPoints collection in the above pathItem;
(3) you add an anchor and two (right and left) handles to the above pathPoint;
(4) you add a second pathPoint to the pathPoints collection in the above pathItem;
(5) you add an anchor and two (right and left) handles to the above pathPoint.

 

When the anchor and two handles are the same for each point, the result is a straight line. This should draw a line from (0, 0) to the centre of the artboard:

 

var w = app.activeDocument.width, h = - app.activeDocument.height;
var path1 = app.activeDocument.pathItems.add();
var p1 = path1.pathPoints.add();
p1.anchor = p1.rightDirection = p1.leftDirection = [0, 0];
var p2 = path1.pathPoints.add();
p2.anchor = p2.rightDirection = p2.leftDirection = [w / 2, h / 2];

 

When the handles move, the result is a curve. You manipulate the handles the same way you do manually in Illustrator.  If you only want straight lines, a slightly faster way is to use setEntirePath(). This takes an array of the two anchors.

 

var w = app.activeDocument.width, h = - app.activeDocument.height;
var path1 = app.activeDocument.pathItems.add();
path1.setEntirePath( [ [0, 0], [w / 2, h / 2] ] );

 

1 reply

femkeblanco
femkeblancoCorrect answer
Legend
October 4, 2021

You probably know this already but here it is.  There is no built-in function to draw a line (or an arc or spiral), at least not in the syntax of rectangle(), although of course you can define your own. 

 

To draw a line
(1) you add a pathItem to the pathItems collection;
(2) you add a first pathPoint to the pathPoints collection in the above pathItem;
(3) you add an anchor and two (right and left) handles to the above pathPoint;
(4) you add a second pathPoint to the pathPoints collection in the above pathItem;
(5) you add an anchor and two (right and left) handles to the above pathPoint.

 

When the anchor and two handles are the same for each point, the result is a straight line. This should draw a line from (0, 0) to the centre of the artboard:

 

var w = app.activeDocument.width, h = - app.activeDocument.height;
var path1 = app.activeDocument.pathItems.add();
var p1 = path1.pathPoints.add();
p1.anchor = p1.rightDirection = p1.leftDirection = [0, 0];
var p2 = path1.pathPoints.add();
p2.anchor = p2.rightDirection = p2.leftDirection = [w / 2, h / 2];

 

When the handles move, the result is a curve. You manipulate the handles the same way you do manually in Illustrator.  If you only want straight lines, a slightly faster way is to use setEntirePath(). This takes an array of the two anchors.

 

var w = app.activeDocument.width, h = - app.activeDocument.height;
var path1 = app.activeDocument.pathItems.add();
path1.setEntirePath( [ [0, 0], [w / 2, h / 2] ] );

 

Parts4Arts
Inspiring
October 5, 2021

Thanks for this clear infomation. I'm working on a Javascript to create squares paper. I will publish it soon.

– jens.