Skip to content

Instantly share code, notes, and snippets.

@michaelprovenzano
Forked from vladocar/DrawShape.js
Last active August 22, 2023 12:36
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save michaelprovenzano/da9c834e25c2ff1f7b1ccc3cbad57c82 to your computer and use it in GitHub Desktop.
Save michaelprovenzano/da9c834e25c2ff1f7b1ccc3cbad57c82 to your computer and use it in GitHub Desktop.
Draw Shape in Photoshop with JavaScript
/* Code by Mike Hale http://www.ps-scripts.com/bb/viewtopic.php?f=14&t=1802&start=15
with small modification by Vladimir Carrer
Modified by Michael Provenzano
================================================================
BASIC USAGE
================================================================
Pass in an array of points to draw a shape.
DrawShape(
[
[ 99, 1650, [60, 1650], [129, 1650] ], // Bezier Point
[ 75, 1674 ], // Corner Point
[ 99, 1698 ], // Corner Point
[ 123, 1674 ] // Corner Point
]
);
================================================================
Points: An array of the points that make up the shape in CLOCKWISE order. Two types of points can be created:
1. Corner Point: Use an array with 2 values: [x, y]
2. Bezier Point: Use an array with 4 values: [ x, y, [ handle1_x, handle1_y], [ handle2_x, handle2_y] ]
================================================================
OPTIONS
================================================================
The second parameter is an optional options object. This allows to you set an RGB color or the units that you are using to define your shape.
var points = [
[1, 1], // Corner Point
[1, 2], // Corner Point
[2, 2, [1.5, 2.5], [2.5, 1.5]], // Bezier Point
[2, 1], // Corner Point
];
var options = {
color: [180, 0, 0], // RGB Color
units: 'cm',
}
DrawShape(points, options);
Color (Optional): An array of 3 values for each [ r, g, b]
Units (Optional): The units you will be using to define your shape. The default is points. (Supports 'px', 'in', 'cm', 'mm', and 'pica')
================================================================
*/
function DrawShape(pointsArray, options) {
// Catch errors
if (!pointsArray)
return alert(
'Error: No "pointsArray" was passed to the DrawShape function. The "points" option of the DrawShape function is not optional'
);
if (typeof pointsArray !== 'object')
return alert('Error: The "points" option of the DrawShape function needs to be an array');
if (!pointsArray.length)
return alert('Error: The "points" option of the DrawShape function needs to be an array');
var doc = app.activeDocument;
RGBcolor = options.color;
if (!RGBcolor) RGBcolor = [0, 0, 0]; // Default color is black
var lineArray = pointsToLineArray(pointsArray, options.units);
// Create the shape
var lineSubPathArray = new SubPathInfo();
lineSubPathArray.closed = true;
lineSubPathArray.operation = ShapeOperation.SHAPEADD;
lineSubPathArray.entireSubPath = lineArray;
var myPathItem = doc.pathItems.add('myPath', [lineSubPathArray]);
var desc88 = new ActionDescriptor();
var ref60 = new ActionReference();
ref60.putClass(stringIDToTypeID('contentLayer'));
desc88.putReference(charIDToTypeID('null'), ref60);
var desc89 = new ActionDescriptor();
var desc90 = new ActionDescriptor();
var desc91 = new ActionDescriptor();
desc91.putDouble(charIDToTypeID('Rd '), RGBcolor[0]); // R
desc91.putDouble(charIDToTypeID('Grn '), RGBcolor[1]); // G
desc91.putDouble(charIDToTypeID('Bl '), RGBcolor[2]); // B
var id481 = charIDToTypeID('RGBC');
desc90.putObject(charIDToTypeID('Clr '), id481, desc91);
desc89.putObject(charIDToTypeID('Type'), stringIDToTypeID('solidColorLayer'), desc90);
desc88.putObject(charIDToTypeID('Usng'), stringIDToTypeID('contentLayer'), desc89);
executeAction(charIDToTypeID('Mk '), desc88, DialogModes.NO);
// Remove the temporary path
myPathItem.remove();
function pointsToLineArray(pointsArray, pointsUnits) {
var lineArray = [];
for (var i = pointsArray.length - 1; i >= 0; i--) {
// Adjust parameters based on document resolution
for (var j = 0; j < pointsArray[i].length; j++) {
if (typeof pointsArray[i][j] === 'number') {
pointsArray[i][j] = pointsArray[i][j] * pointsPer(pointsUnits);
} else {
for (var x = 0; x < pointsArray[i][j].length; x++) {
pointsArray[i][j][x] = pointsArray[i][j][x] * pointsPer(pointsUnits);
}
}
}
// Create a new point
var newPoint = new PathPointInfo();
newPoint.kind = PointKind.CORNERPOINT;
newPoint.anchor = [pointsArray[i][0], pointsArray[i][1]];
if (pointsArray[i].length === 2) {
newPoint.leftDirection = newPoint.anchor;
newPoint.rightDirection = newPoint.anchor;
} else if (pointsArray[i].length > 2) {
newPoint.leftDirection = pointsArray[i][2];
newPoint.rightDirection = pointsArray[i][3];
}
lineArray.push(newPoint);
}
return lineArray;
}
function pointsPer(units) {
switch (units) {
case 'px':
return 72 / doc.resolution;
case 'in':
return 72;
case 'cm':
return 72 / 2.54;
case 'mm':
return 72 / 2.54 / 10;
case 'pica':
return 12 / 1;
case 'pt':
default:
return 1; // just returns points
}
}
}
/*
================================================================
EXAMPLES
================================================================
*/
DrawShape(
[
[99, 1650, [60, 1650], [129, 1650]], // Bezier Point
[75, 1674], // Corner Point
[99, 1698], // Corner Point
[123, 1674], // Corner Point
],
{
color: [180, 0, 0], // RGB Color
}
);
DrawShape(
[
[1, 1], // Corner Point
[1, 2], // Corner Point
[2, 2, [1.5, 2.5], [2.5, 1.5]], // Bezier Point
[2, 1], // Corner Point
],
{
color: [180, 0, 0], // RGB Color
units: 'cm',
}
);
DrawShape(
[
[120, 100], // Corner Point
[100, 200], // Corner Point
[200, 200], // Corner Point
[200, 100], // Corner Point
],
{
color: [0, 0, 150], // RGB Color
}
);
DrawShape(
[
[512, 128], // Corner Point
[600, 256], // Corner Point
[684, 320], // Corner Point
[600, 386], // Corner Point
[686, 514], // Corner Point
[512, 450], // Corner Point
[340, 512], // Corner Point
[428, 386], // Corner Point
[340, 320], // Corner Point
[428, 256], // Corner Point
],
{
color: [150, 150, 150], // RGB Color
}
);
@EwvwGeN
Copy link

EwvwGeN commented Aug 18, 2023

Line 98, it should be
for (var i = pointsArray.length - 1; i >= 0; i--) {
isn't so?

@michaelprovenzano
Copy link
Author

Line 98, it should be for (var i = pointsArray.length - 1; i >= 0; i--) { isn't so?

You're absolutely right - Thanks for the correction!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment