Highlighted

Can JavaScript set the properties of a dashed line to alternate in color?

Participant ,
Jun 02, 2020

Copy link to clipboard

Copied

Say for example, to set the dash to be 10mm and the gap to be 10mm as one property of the line, and make that red, and then simultaneously set another property of the same line to start this time with a 10mm gap, then a 10mm dash, and set that to be yellow.... making the line have alternating dashed line colors?

Adobe Community Professional
Correct answer by Charu Rajput | Adobe Community Professional

Hi Maple,

I am not sure of the direct way to do this in Javascript. But here is the sample code, that will create, two lines exact at same position, one line will have one solid stroke color and another line will dashed stroked color. And after that both lines are grouped together. Here is the snippet

 

#target illustrator
function createLine() {
    var doc = app.activeDocument;
    var line = doc.pathItems.add();
    line.stroked = true;
    line.width = 4;
    line.setEntirePath(Array(Array(100, 100), Array(375, 100)));
    return line;
}

function main() {
    var firstLine = createLine();
    var color = new CMYKColor();
    color.cyan = 85;
    color.magenta = 10
    color.yellow = 100;
    color.black = 10;
    firstLine.strokeColor = color;
    firstLine.strokeDashes = [];

    var secondLine = createLine();
    var color = new CMYKColor();
    color.cyan = 0;
    color.magenta = 95;
    color.yellow = 20;
    color.black = 0;
    secondLine.strokeColor = color;
    secondLine.strokeDashes = new Array(12, 12);

    firstLine.selected = true;
    secondLine.selected = true;
    app.executeMenuCommand('group');
}

main();

 

 

Ofcourse, there is no gap right now in the lines. and the lines will look line as in screenshot.

Screenshot 2020-06-03 at 7.22.46 AM.png

TOPICS
Scripting

Views

583

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Can JavaScript set the properties of a dashed line to alternate in color?

Participant ,
Jun 02, 2020

Copy link to clipboard

Copied

Say for example, to set the dash to be 10mm and the gap to be 10mm as one property of the line, and make that red, and then simultaneously set another property of the same line to start this time with a 10mm gap, then a 10mm dash, and set that to be yellow.... making the line have alternating dashed line colors?

Adobe Community Professional
Correct answer by Charu Rajput | Adobe Community Professional

Hi Maple,

I am not sure of the direct way to do this in Javascript. But here is the sample code, that will create, two lines exact at same position, one line will have one solid stroke color and another line will dashed stroked color. And after that both lines are grouped together. Here is the snippet

 

#target illustrator
function createLine() {
    var doc = app.activeDocument;
    var line = doc.pathItems.add();
    line.stroked = true;
    line.width = 4;
    line.setEntirePath(Array(Array(100, 100), Array(375, 100)));
    return line;
}

function main() {
    var firstLine = createLine();
    var color = new CMYKColor();
    color.cyan = 85;
    color.magenta = 10
    color.yellow = 100;
    color.black = 10;
    firstLine.strokeColor = color;
    firstLine.strokeDashes = [];

    var secondLine = createLine();
    var color = new CMYKColor();
    color.cyan = 0;
    color.magenta = 95;
    color.yellow = 20;
    color.black = 0;
    secondLine.strokeColor = color;
    secondLine.strokeDashes = new Array(12, 12);

    firstLine.selected = true;
    secondLine.selected = true;
    app.executeMenuCommand('group');
}

main();

 

 

Ofcourse, there is no gap right now in the lines. and the lines will look line as in screenshot.

Screenshot 2020-06-03 at 7.22.46 AM.png

TOPICS
Scripting

Views

584

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 02, 2020 0
Contributor ,
Jun 02, 2020

Copy link to clipboard

Copied

Hi Maple_Stirrup,

 

I'm not sure about whether javascript provides a good way to do this. A dashed stroke doesn't have intrinsic properties for coloring individual dashes or gaps. If you absolutely need a scripting solution, please ignore the following! 🙂

 

Have a look at the answer here. I think it could work for what you want but you'd need three strokes: a red, yellow and white. Edit: Oops! I see that you asked that question originally, so obviously that won't work for you!

 

Another approach, would be to use path patterns. See screen shots below. I made a 10mm x 1mm red rectangle then duplicated it 20mm horizontally and coloured it yellow. The path pattern needs 33.33% spacing for the gap between each repetition. Note that the length of the dashes won't be consistent the way I've set it up in the screenshot.

 

Regards,

Mark

Screen Shot 2020-06-03 at 8.49.51 am.pngScreen Shot 2020-06-03 at 8.49.31 am.png

Edit: Oh I now think that you don't want any gaps between the dashes. In that case, duplicate the red rectangle across by 10mm and set the path pattern spacing to 0%.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 02, 2020 1
Adobe Community Professional ,
Jun 02, 2020

Copy link to clipboard

Copied

Hi Maple,

I am not sure of the direct way to do this in Javascript. But here is the sample code, that will create, two lines exact at same position, one line will have one solid stroke color and another line will dashed stroked color. And after that both lines are grouped together. Here is the snippet

 

#target illustrator
function createLine() {
    var doc = app.activeDocument;
    var line = doc.pathItems.add();
    line.stroked = true;
    line.width = 4;
    line.setEntirePath(Array(Array(100, 100), Array(375, 100)));
    return line;
}

function main() {
    var firstLine = createLine();
    var color = new CMYKColor();
    color.cyan = 85;
    color.magenta = 10
    color.yellow = 100;
    color.black = 10;
    firstLine.strokeColor = color;
    firstLine.strokeDashes = [];

    var secondLine = createLine();
    var color = new CMYKColor();
    color.cyan = 0;
    color.magenta = 95;
    color.yellow = 20;
    color.black = 0;
    secondLine.strokeColor = color;
    secondLine.strokeDashes = new Array(12, 12);

    firstLine.selected = true;
    secondLine.selected = true;
    app.executeMenuCommand('group');
}

main();

 

 

Ofcourse, there is no gap right now in the lines. and the lines will look line as in screenshot.

Screenshot 2020-06-03 at 7.22.46 AM.png

Best regards

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 02, 2020 1
Enthusiast ,
Jun 03, 2020

Copy link to clipboard

Copied

Bonjour à tous!

Pas besoin de script...

renél80416020_0-1591175997606.png

de elleere

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 03, 2020 1
Participant ,
Jun 03, 2020

Copy link to clipboard

Copied

I appreciate everyone's help ❤️

 

Yeah I was working on this a couple of years ago, but I unfortunately I stopped working on it.  I figured a new thread might be better.

 

The two lines on top of each other seems like the easiest route for me now, plus the example code was right there, so that's what I went with.  So extra thanks there.

 

There's two more property settings that I'd like to see if I can set, but didn't see the options in the Scripting Reference pdf, I took a screenshot and pointed at them with arrows.  Can I assign these in a script to my lines?

 

extras.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 03, 2020 0
Adobe Community Professional ,
Jun 03, 2020

Copy link to clipboard

Copied

Well, I need to look in to this and currently my laptop is completeley dead and due to this, it will be difficult to tell you because all related documentations and everything is on my laptop. I will confirm and get back to you soon.

Best regards

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 03, 2020 1