ExtendScript to convert Adobe Illustrator dashed strokes to actual paths.

Overview

Dasher

Script to convert Adobe Illustrator dashed strokes to actual paths.

Convert Selected Dashed Strokes.js demo animation


Why this project?

Adobe Illustrator does not natively provide this functionality. We can "Outline Path" or "Expand Stroke", but there is no feature that provides simple open paths for each dash.

Example usages are cutting machines that require an open path to guide a tool bit or laser.


Installation

Download the script files. The scripts can be stored anywhere on your computer, but you must keep them all together in the same folder so that they can load each other.


Quick Start

To use it straight away, just make a selection in Illustrator and run Convert Dashed Strokes.js script.

This script will try to find any dashed strokes in the selection and create dashes path items on a new "Dashes" layer.

Remember: it won't work unless Bez.js and Dasher.js are in the same folder with the script.


Basic usage

Using convertToDashes method of Bez to convert one path item. No options are supplied, so it will use default options (see Configuration below).

    var item = app.activeDocument.selection[0];
    var bez = new Bez({ pathItem: item });
    bez.convertToDashes();

Configuration

The convertToDashes method of Bez takes an options argument. If it is not supplied, defaults will be used.

option description default
pattern: Array of [dash, gap] lengths item's strokeDashes property
alignDashes: Boolean (if true, align dashes to corners and path ends, scaling lengths to fit) item's stroke dash alignment style
layer: Layer to place converted dashes Place group next to item on same layer
strokeCap: StrokeCap type of line capping item's strokeCap property or StrokeCap.BUTTENDCAP
strokeColor: Swatch or Color to color dashes item's strokeColor property (if no color, dashes won't be stroked)
strokeJoin: StrokeJoin type of joints item's StrokeJoin property or StrokeJoin.MITERENDJOIN
strokeMiterLimit: Number mitre limit 4
strokeWidth: Number width of stroke in pts 1


Example:

var options = {
    pattern: [8,2,4,2],
    alignDashes: true,
    strokeColor: app.activeDocument.swatches[5]
}

var item = app.activeDocument.selection[0];
var bez = new Bez({ pathItem: item });
bez.convertToDashes(options);

What is Dasher.js?

Dasher is a tool for generating and manipulating simple numerical patterns in the form used by Illustrator's stroke dashes.


What is Bez.js?

Bez is rudimentary class I used to store the bezier path handling functions required by this project, but I may develop it further in other directions if the need arises.


Please help with testing

As of 2022-01-25, this script is hardly tested at all, and only on my machine. Adobe Illlustrator 2022 (v26), MacOS 12.1.

Please post any issues you come across.


Known Limitations

In cases where the Illustrator path item is stroked with a strokeDashes array with an odd number of members greater than one Illustrator, at some path section lengths, seems to break it's own rules on how to fit the dashes. This looks to me like a bug, as it introduces strange lengths that don't seem to be logically derived from the strokeDashes. In these rare cases, Dasher makes a better-looking result, so I've not attempted to match Illustrator's behaviour.


System requirements

Adobe Illustrator CS6 and above. As of 2022-01-24, tested only on AI version 26 (MacOS 12.1).


Acknowledgements

Thanks so much to Hiroyuki Sato, for his bezier maths code from his excellent Divide (length).js script.

Project was inspired by a question asked by pixxxelshubser.

You might also like...

A lightweight (the actual ship is heavy though), performat & powerful sharder for Discord.JS. Indomitable uses cluster module to evenly spread her weight (load) across your cores

A lightweight (the actual ship is heavy though), performat & powerful sharder for Discord.JS. Indomitable uses cluster module to evenly spread her weight (load) across your cores

Indomitable A lightweight (the actual ship is heavy though), performat & powerful sharder for Discord.JS. Indomitable uses cluster module to evenly sp

Nov 29, 2022

A lightweight JavaScript library that renders text in a brilliant style by displaying strings of random characters before the actual text.

A lightweight JavaScript library that renders text in a brilliant style by displaying strings of random characters before the actual text.

cryptoWriter.js A lightweight javascript library which creates brilliant text animation by rendering strings of random characters before the actual te

Sep 13, 2022

Powercord plugin to make "divider" roles into actual dividers

Powercord plugin to make

Powecord Role Dividers Install in Replugged Turns "divider" roles into actual dividers. Before: After: A divider role I have is not being shown as a d

Dec 28, 2022

Lightweight, simple to use jQuery plugin to animate SVG paths

jQuery DrawSVG This plugin uses the jQuery built-in animation engine to transition the stroke on every path inside the selected svg element, using

Dec 20, 2022

A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion

ReactPlayer A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, M

Jan 4, 2023

Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.

Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.

Background Scale Hover Effect Recreation of the background scale hover effect seen on the DDD Hotel menu using CSS clip paths. Article on Codrops Demo

Dec 6, 2022

The slides in this slideshow wobble as they move. The effect is based on Sergey Valiukh's Dribbble shot and was made using Snap.svg and morphing SVG paths.

Wobbly Slideshow Effect The slides in this slideshow wobble as they move. The effect is based on Sergey Valiukh's Dribbble shot and was made using Sna

Jul 27, 2022

Lightweight, simple to use jQuery plugin to animate SVG paths

jQuery DrawSVG This plugin uses the jQuery built-in animation engine to transition the stroke on every path inside the selected svg element, using

Dec 20, 2022

Glob - Github action to match glob patterns and retrieve the relative file paths.

Glob - Github action to match glob patterns and retrieve the relative file paths.

Dec 12, 2022

To keep online organized data and be able to add listeners in certain paths by socket.io and http clients

To keep online organized data and be able to add listeners in certain paths by socket.io and http clients

The purpose of this project is to create a state machine server to keep organized data and be able to add listeners with socket.io in specific paths and in addition to providing a possible form of messages between socket.io clients.

Mar 19, 2022

🀠 Functional utilities using object property paths with wildcards and regexps 🌡

🀠 Functional utilities using object property paths with wildcards and regexps. 🌡 Available functional methods include: πŸ—ΊοΈ Mapping: map() πŸš‚ Merging

Dec 15, 2022

🀠 Object property paths with wildcards and regexps 🌡

🀠 Object property paths with wildcards and regexps. 🌡 Get/set object properties using: ⛏️ Dot-delimited paths: foo.bar.0.baz ⭐ Wildcards: foo.*, **.

Jan 3, 2023

Smoothly interpolate between variations of SVG paths.

svg-path-morph A simple library for morphing between variations of SVG paths. Use svg-path-morph to smoothly morph between X variations of the same SV

Jan 3, 2023

A plugin that can find the paths between two notes. Not sure who will want to use it...

Obsidian Path Finder Plugin Install BRAT Install Obsidian42-BRAT plugin. Click Add new beta plugin and fill in jerrywcy/obsidian-path-finder. Activate

Dec 31, 2022

A webpack plugin to enforce case-sensitive paths when resolving module

@umijs/case-sensitive-paths-webpack-plugin A webpack plugin to enforce case-sensitive paths when resolving module, similar to the well-known case-sens

Jul 25, 2022

πŸ“ƒ Typed primitives for Typescript to work with file paths

typed-file-system-path typed-file-system-path takes inspiration from Path.swift in swift-tools-support-core and provides typed primitives to work with

Dec 15, 2022

Magically convert a simple text input into a cool tag list with this jQuery plugin.

jQuery Tags Input Plugin Do you use tags to organize content on your site? This plugin will turn your boring tag list into a magical input that turns

Dec 23, 2022

Convert a simple HTML syntax into tables compatible with Foundation for Emails.

Inky Inky is an HTML-based templating language that converts simple HTML into complex, responsive email-ready HTML. Designed for Foundation for Emails

Dec 22, 2022

Convert json data from editorjs to html elements

EditorJs Data Parser Easyly convert json data from editorjs to html elements Installaton npm i editorjs-data-parser yarn add editorjs-data-parser Supp

Aug 30, 2022
Releases(1.0.2)
Owner
null
Modern JavaScript ponyfills for ES6. Intended for use with Extendscript.

extendscript-ponyfills https://github.com/Klustre/extender#why Ponys array object string βœ… every βœ… groupBy ?? create βœ… endsWith βœ… fill βœ… includes ?? d

Martin Lindberg 3 Nov 25, 2022
Convert your SVG file directly to Flutter paths and prevent all the messing with bezier curves.

svg-to-flutter-path-converter Convert your SVG file directly to Flutter paths and prevent all the messing with bezier curves. Flutter Clutter The tool

null 30 Jan 2, 2023
meetapp Free Adobe Connect Alternatives

meetapp meetapp is free adobe connect alternatives for visual classrooms , online meetings, screen share, webinars , video and audio conferencing. Fea

null 38 Oct 12, 2022
An open source Javascript framework for detecting the Adobe Flash Player plugin and embedding Flash (swf) files.

β€” IMPORTANT UPDATE β€”ΒΆ ↑ SWFObject is no longer in active development. Flash Player is on the decline, and the authors of SWFObject have moved on to ot

null 1.2k Nov 27, 2022
A lightweight Adobe Photoshop .psd/.psb file parser in typescript with zero-dependency for WebBrowser and NodeJS

@webtoon/psd A lightweight Adobe Photoshop .psd/.psb file parser in typescript with zero-dependency for WebBrowser and NodeJS Browser Support Chrome F

null 830 Jan 1, 2023
Implements live reload functionality to Adobe extension development.

Adobe Live Reload Adobe Live Reload implements live reload functionality to Adobe extension development. Features Reload Adobe Extensions on file save

Duncan Lutz 4 Apr 24, 2022
Displaying actual age in percentage with 9 signs after dot (floating number)

Actual Age Chrome Extension Displaying actual age in percentage with 9 signs after dot (floating number) Features Popup You can select your Birth date

Igor Makeenko 22 Nov 2, 2022
Small module that makes sure your catch, caught an actual error and not a programming mistake or assertion

safety-catch Small module that makes sure your catch, caught an actual error and not a programming mistake or assertion. npm install safety-catch Tri

Mathias Buus 31 May 4, 2022
Transform URLs in strings to actual links.

Transform URLs in strings to actual links. It will find valid links in the given string and create <a> tags for it. Internally, it uses this Regex to

Prince Neil Cedrick Castro 7 Nov 4, 2022
Actual, a local-first personal finance tool

This is the main project to run Actual, a local-first personal finance tool. It comes with the latest version of Actual, and a server to persist chang

null 1.3k Jan 3, 2023