Skip to main content
O
oscark92990557
Participant
September 3, 2017
Answered

Draw Shape in Photoshop with JavaScript

  • September 3, 2017
  • 2 replies
  • 5189 views

Hello,

I have a problem with DrawShape script: Draw Shape in Photoshop with JavaScript · GitHub:

/* Code by  Mike Hale http://www.ps-scripts.com/bb/viewtopic.php?f=14&t=1802&start=15
with small modification by Vladimir Carrer
*/
function DrawShape() {
    
    var doc = app.activeDocument;
    var y = arguments.length;
    var i = 0;
    
    var lineArray = [];
    for (i = 0; i < y; i++) {
        lineArray = new PathPointInfo;
        lineArray.kind = PointKind.CORNERPOINT;
        lineArray.anchor = arguments;
        lineArray.leftDirection = lineArray.anchor;
        lineArray.rightDirection = lineArray.anchor;
    }
    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  "), 0.000000); // R
    desc91.putDouble(charIDToTypeID("Grn "), 0.000000); // G
    desc91.putDouble(charIDToTypeID("Bl  "), 0.000000); // 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);
    
    myPathItem.remove();
}
// X,Y
// Put the coordinates in clockwise order
DrawShape([100, 100], [100, 200], [200, 200], [200, 100]);


I need to make a modification that will allow to enter Drawshape arguments from a defined array.

By default, the argument must be entered manually into a function as a set of points, for example: [100, 100], [100, 200], [200, 200], [200, 100].

I need to get this effect: DrawShape(myarray), where myarray is defined by function:

var importpoints= "0,26.82;14.44,38.23;10.74,42.89;20.77,50.83;45.78,19.33;21.32,0;0,26.82";
var myarray = importpoints.split(";");
for (var i = 0; i < myarray.length; i++) {
   myarray = myarray.split(",");
}

The code that is written does not work. I can not understand how the myarray array should be defined so that it can be used as an argument to the DrawShape function.

Finally, the coordinates I want to load from the txt file, hence the idea to import txt into the table. Sorry for my English.

    This topic has been closed for replies.
    Correct answer c.pfaffenbichler

    Some amendments might be needed for the way you want to use it.

    /* Code by  Mike Hale http://www.ps-scripts.com/bb/viewtopic.php?f=14&t=1802&start=15

    with small modification by Vladimir Carrer and further editing

    */ 

    #target photoshop

     

    function DrawShape(theArray) { 

         

        var doc = app.activeDocument; 

        var y = theArray.length; 

        var i = 0; 

         

        var lineArray = []; 

        for (i = 0; i < y; i++) { 

            lineArray = new PathPointInfo; 

            lineArray.kind = PointKind.CORNERPOINT; 

            lineArray.anchor = [Number(theArray[0]),Number (theArray[1])];

      $.writeln(theArray.join("___")+("\n"))

            lineArray.leftDirection = lineArray.anchor; 

            lineArray.rightDirection = lineArray.anchor; 

        } 

     

     

        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  "), 0.000000); // R 

        desc91.putDouble(charIDToTypeID("Grn "), 0.000000); // G 

        desc91.putDouble(charIDToTypeID("Bl  "), 0.000000); // 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); 

         

        myPathItem.remove(); 

    } 

     

     

    // Put the coordinates in clockwise order 

    var importpoints= "0,26.82;14.44,38.23;10.74,42.89;20.77,50.83;45.78,19.33;21.32,0;0,26.82"; 

    var myarray = importpoints.split(";"); 

    for (var i = 0; i < myarray.length; i++) { 

       myarray = myarray.split(","); 

    };

    DrawShape (myarray);

    2 replies

    c.pfaffenbichler
    Community Expert
    c.pfaffenbichlerCommunity Expert
    Community Expert
    September 5, 2017

    To create Paths with more than one subPathItem and bezier handles that are not identical with the points themselves you could use this:

    var thePath = createPath2015([[[[123.946875,67.756875],[153.647014898625,67.756875],[94.246735101375,67.756875], true],[[177.72375,121.53375],[177.72375,151.233889898625],[177.72375,91.833610101375], true],

    [[123.946875,175.310625],[94.246735101375,175.310625],[153.647014898625,175.310625], true],[[70.17,121.53375],[70.17,91.833610101375],[70.17,151.233889898625], true], true,1097098272],

    [[[173.3953125,133.648125],[194.627376180187,133.648125],[152.163248819812,133.648125], true],[[211.839375,172.0921875],[211.839375,193.324251180188],[211.839375,150.860123819812], true],

    [[173.3953125,210.53625],[152.163248819812,210.53625],[194.627376180187,210.53625], true],[[134.95125,172.0921875],[134.95125,150.860123819812],[134.95125,193.324251180188], true], true, 1737]], "aaa");

    ////// create a path from collectPathInfoFromDesc2012-array //////

    function createPath2015(theArray, thePathsName) {

    var originalRulerUnits = app.preferences.rulerUnits;

    app.preferences.rulerUnits = Units.PIXELS;

    // thanks to xbytor;

    cTID = function(s) { return app.charIDToTypeID(s); };

    sTID = function(s) { return app.stringIDToTypeID(s); };

        var desc1 = new ActionDescriptor();

        var ref1 = new ActionReference();

        ref1.putProperty(cTID('Path'), cTID('WrPt'));

        desc1.putReference(sTID('null'), ref1);

        var list1 = new ActionList();

    for (var m = 0; m < theArray.length; m++) {

      var thisSubPath = theArray;

        var desc2 = new ActionDescriptor();

        desc2.putEnumerated(sTID('shapeOperation'), sTID('shapeOperation'), thisSubPath[thisSubPath.length - 1]);

        var list2 = new ActionList();

        var desc3 = new ActionDescriptor();

        desc3.putBoolean(cTID('Clsp'), thisSubPath[thisSubPath.length - 2]);

        var list3 = new ActionList();

    for (var n = 0; n < thisSubPath.length - 2; n++) {

      var thisPoint = thisSubPath;

        var desc4 = new ActionDescriptor();

        var desc5 = new ActionDescriptor();

        desc5.putUnitDouble(cTID('Hrzn'), cTID('#Rlt'), thisPoint[0][0]);

        desc5.putUnitDouble(cTID('Vrtc'), cTID('#Rlt'), thisPoint[0][1]);

        desc4.putObject(cTID('Anch'), cTID('Pnt '), desc5);

        var desc6 = new ActionDescriptor();

        desc6.putUnitDouble(cTID('Hrzn'), cTID('#Rlt'), thisPoint[1][0]);

        desc6.putUnitDouble(cTID('Vrtc'), cTID('#Rlt'), thisPoint[1][1]);

        desc4.putObject(cTID('Fwd '), cTID('Pnt '), desc6);

        var desc7 = new ActionDescriptor();

        desc7.putUnitDouble(cTID('Hrzn'), cTID('#Rlt'), thisPoint[2][0]);

        desc7.putUnitDouble(cTID('Vrtc'), cTID('#Rlt'), thisPoint[2][1]);

        desc4.putObject(cTID('Bwd '), cTID('Pnt '), desc7);

        desc4.putBoolean(cTID('Smoo'), thisPoint[3]);

        list3.putObject(cTID('Pthp'), desc4);

      };

        desc3.putList(cTID('Pts '), list3);

        list2.putObject(cTID('Sbpl'), desc3);

        desc2.putList(cTID('SbpL'), list2);

        list1.putObject(cTID('PaCm'), desc2);

      };

        desc1.putList(cTID('T   '), list1);

        executeAction(cTID('setd'), desc1, DialogModes.NO);

    // name work path;

    var check = false;

    var x = activeDocument.pathItems.length - 1;

    while (check == false) {

    if (activeDocument.pathItems.kind == PathKind.WORKPATH) {

    app.activeDocument.pathItems.name = thePathsName;

    var myPathItem = app.activeDocument.pathItems;

    check = true

    };

    x--

    };

    app.preferences.rulerUnits = originalRulerUnits;

    return myPathItem

    };

    pixxxelschubser
    Community Expert
    pixxxelschubserCommunity Expert
    Community Expert
    September 5, 2017

    Nice.

    I think Jive added wrong spaces.

    Here

    var thePath = createPath2015([[[[123.946875,67.756875],[153.647014898625,67.756875],[94.246735101375,67 .756875],

    should be

    var thePath = createPath2015([[[[123.946875,67.756875],[153.647014898625,67.756875],[94.246735101375,67.756875],

    and here

    [[211.839375,172.0921875],[211.839375,193.324251180188],[211.839375,150.86012381981 2], true],

    should be

    [[211.839375,172.0921875],[211.839375,193.324251180188],[211.839375,150.860123819812], true],

    After these little changes your code runs.

    One question:

    What changes are necessary to create shapes instead of paths?

    JJMack
    Community Expert
    JJMackCommunity Expert
    Community Expert
    September 5, 2017

    https://forums.adobe.com/people/pixxxel+schubser  wrote

    Nice.

    var thePath = createPath2015([[[[123.946875,67.756875],[153.647014898625,67.756875],[94.246735101375,67 .756875],

    should be

    var thePath = createPath2015([[[[123.946875,67.756875],[153.647014898625,67.756875],[94.246735101375,67 .756875],

    var thePath = createPath2015([[[[123.946875,67.756875],[153.647014898625,67.756875],[94.246735101375,67 .756875],

    shoulld be 7.7 not 7 .7

    JJMack
    c.pfaffenbichler
    Community Expert
    c.pfaffenbichlerCommunity ExpertCorrect answer
    Community Expert
    September 4, 2017

    Some amendments might be needed for the way you want to use it.

    /* Code by  Mike Hale http://www.ps-scripts.com/bb/viewtopic.php?f=14&t=1802&start=15

    with small modification by Vladimir Carrer and further editing

    */ 

    #target photoshop

     

    function DrawShape(theArray) { 

         

        var doc = app.activeDocument; 

        var y = theArray.length; 

        var i = 0; 

         

        var lineArray = []; 

        for (i = 0; i < y; i++) { 

            lineArray = new PathPointInfo; 

            lineArray.kind = PointKind.CORNERPOINT; 

            lineArray.anchor = [Number(theArray[0]),Number (theArray[1])];

      $.writeln(theArray.join("___")+("\n"))

            lineArray.leftDirection = lineArray.anchor; 

            lineArray.rightDirection = lineArray.anchor; 

        } 

     

     

        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  "), 0.000000); // R 

        desc91.putDouble(charIDToTypeID("Grn "), 0.000000); // G 

        desc91.putDouble(charIDToTypeID("Bl  "), 0.000000); // 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); 

         

        myPathItem.remove(); 

    } 

     

     

    // Put the coordinates in clockwise order 

    var importpoints= "0,26.82;14.44,38.23;10.74,42.89;20.77,50.83;45.78,19.33;21.32,0;0,26.82"; 

    var myarray = importpoints.split(";"); 

    for (var i = 0; i < myarray.length; i++) { 

       myarray = myarray.split(","); 

    };

    DrawShape (myarray);

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices