Skip to main content
B
BryanPagenkopf
Inspiring
January 11, 2023
Answered

[Branched] [JS] Duplicate, move a selected object by twice its width, colour the object and its "bg"

  • January 11, 2023
  • 3 replies
  • 1573 views

I have a Swatch that is a gradient named "BRONZE" that I would like to color the dup.selected object.

I've tried to add a line after dub.selected = true; but none of what I have tried has worked.

 

 

var doc = app.activeDocument;
var sel = doc.selection;
if (sel.length > 0) {
  var pIt = sel[0];
  var wdt = pIt.width;
  var hdt = pIt.hieght;
  var dub = pIt.duplicate();
  doc.selection = null;
  dub.translate(wdt*2, 0);
  dub.selected = true;

  generateBackground();

} else {
  alert("No items are selected.");
}

function generateBackground() {
    var sel = doc.selection;
    var item = sel[0];
    var bounds = item.geometricBounds;
    var width = bounds[2] - bounds[0];
    var height = bounds[1] - bounds[3];
    var fillColor = new CMYKColor();
        fillColor.cyan = 100;
        fillColor.magenta = 100;
        fillColor.yellow = 100;
        fillColor.black = 100;
    var background = doc.pathItems.rectangle(bounds[1], bounds[0], width, height)
        background.fillColor = fillColor;
        background.filled = true;
        background.stroked = false;
        background.zOrder(ZOrderMethod.SENDTOBACK);
  }

 



[ branched from Moving a Selected Item twice it's width to Illustrator forum by moderator ]

[ title added by moderator ]

This topic has been closed for replies.
Correct answer pixxxelschubser

I attached a file that has the needed graphic styles and such.   Also, in answer to your questions, I am just trying to McGyver code together.
I worked with Graphic Style because I have existing code that works to apply Graphic Styles.
I tried using the Swatch colors but couldn't get them to apply, maybe because of a typo in my code, perhaps because they are Custom Swatches that are also Gradients, I don't know.

I use reserved words because I don't honestly know any better, I am using code snippets from old code, code that I find on these forums, code I find on other websites, and youtube video tutorials.


Please try the following code snippet with the upper left object in your own first example file: Example Step by Step.pdf

(Please do not combine only parts of this code snippet with others - I have slightly changed some variable names).

 

//selection_create_duplicate_of_sel_and_bg-rectangle_and_fill_both.jsx
//create a duplicate of selection and add a "background" rectangle and fill both with predefined color

// Illustrator thread: [Branched] [JS] Duplicate, move a selected object by twice its width, colour the object and its "bg" 
// https://community.adobe.com/t5/illustrator-discussions/branched-js-duplicate-move-a-selected-object-by-twice-its-width-colour-the-object-and-its-quot-bg/m-p/13481589

// example file: Example Step by Step
// First select the upper left object - then execute the script

// regards pixxxelschubser 

var doc = app.activeDocument;
var sel = doc.selection;
if (sel.length > 0) {
    var pIt = sel[0];
    var wdt = pIt.width;
    var hgt = pIt.height;
    var dup = pIt.duplicate();

    doc.selection = null;
    dup.translate(wdt*2, 0);

    var gBds = dup.geometricBounds;
    dup.pathItems[0].fillColor = doc.swatches["Bronze"].color;

    var bgDup = doc.pathItems.rectangle(gBds[1], gBds[0], wdt, hgt);
    bgDup.move(dup, ElementPlacement.PLACEAFTER);
    bgDup.stroked = false;
    bgDup.fillColor = doc.swatches["2418 BROWN"].color;
    } else {
    alert("No item is selected.");
}

 

If that works for you
have fun
😉

 

3 replies

pixxxelschubser
Community Expert
pixxxelschubserCommunity Expert
Community Expert
January 21, 2023

Hi @BryanPagenkopf 

Have you already tried the last code? Does it work for you?

pixxxelschubser
Community Expert
pixxxelschubserCommunity Expert
Community Expert
January 11, 2023

I don't understand what you are trying to do with this additional function.

 

It creates a rectangle under your duplicate in the size of the duplicate with the colour "jet black". And you are using reserved words as variable names again.

 

A selection is not necessary to assign the fillColor to the duplicate. For this you have the variable name "dup".

 

 

var doc = app.activeDocument;
var sel = doc.selection;
if (sel.length > 0) {
  var pIt = sel[0];
  var wdt = pIt.width;
  var hdt = pIt.hieght;
  var dub = pIt.duplicate();
  doc.selection = null;
  dub.translate(wdt*2, 0);
  //dub.selected = true;
  dub.fillColor = doc.swatches["BRONZE"].color; // or
  //dub.fillColor = doc.swatches.getByName("BRONZE").color;
} else {
  alert("No items are selected.");
}

 

 

 

Does that work for you?

B
BryanPagenkopfAuthor
Inspiring
January 11, 2023

 @pixxxelschubser Sorry I'm attempting to make a copy of my art layout and then colorize it.  I'm able to do it now with a combination of Action Steps and Scripts, but I was hoping to set up a single Script to do it all.
Please see the attached PDF for the steps I'm trying to accomplish.

I hope that gives you a better understanding
Take Care!

B
BryanPagenkopfAuthor
Inspiring
January 12, 2023

@femkeblanco @pixxxelschubser   I just wanted to say Thank you so much for your assistance with this post and my many others!  They have been so helpful to me and hopefully many others on these forums.  I was able to create what I needed using Graphic Styles and both of your advice.  Here is the Script so that others can learn from it!

var doc = app.activeDocument;
var sel = doc.selection;

if (sel.length > 0) {
var pIt = sel[0];
var wdt = pIt.width;
var hdt = pIt.height;
var dub = pIt.duplicate();
doc.selection = null;
dub.translate(wdt*2, 0);
dub.selected = true;

var win = new Window("dialog", "Choose a Graphic Style");
win.orientation = "column";

var group1 = win.add("group");
group1.orientation = "row";
var bronze = group1.add("radiobutton", undefined, "Bronze");
var custom1 = group1.add("radiobutton", undefined, "Custom Raised");
bronze.value = true;

var group2 = win.add("group");
group2.orientation = "row";
var black = group2.add("radiobutton", undefined, "Black");
var custom2 = group2.add("radiobutton", undefined, "Custom Recessed");
black.value = true;

var okBtn = win.add("button", undefined, "OK");
okBtn.onClick = function() {
if (bronze.value) {
var gStyle = doc.graphicStyles.getByName("Bronze");
gStyle.applyTo(doc.selection[0]);
} else if (custom1.value) {
var gStyle = doc.graphicStyles.getByName("Custom Raised");
gStyle.applyTo(doc.selection[0]);
}

generateBackground();

if (black.value) {
var gStyle = doc.graphicStyles.getByName("Black");
gStyle.applyTo(doc.pathItems[doc.pathItems.length-1]);
}  else if (custom2.value) {
var gStyle = doc.graphicStyles.getByName("Custom Recessed");
gStyle.applyTo(doc.pathItems[doc.pathItems.length-1]);
}
    win.close();
  }
  
  win.show();
  
  //generateBackground();
  
  function generateBackground() {
    var sel = doc.selection;
    var item = sel[0];
    var bounds = item.geometricBounds;
    var width = bounds[2] - bounds[0];
    var height = bounds[1] - bounds[3];
    var background = doc.pathItems.rectangle(bounds[1], bounds[0], width, height);
    background.zOrder(ZOrderMethod.SENDTOBACK);
  }
  
  doc.selection = null;
  
  var activeLayer = doc.activeLayer;
  var pathItems = activeLayer.pathItems;
  if(pathItems.length > 0) {
    var lastPath = pathItems[pathItems.length-1];
    lastPath.selected = true;
  } else {
    alert("No path items found in the active layer.");
  }
} else {
  alert("No items are selected.");
}
    femkeblanco
    femkeblanco
    Legend
    January 11, 2023

    "I have a Swatch that is a gradient named "BRONZE" that I would like to color the dup.selected object.

    I've tried to add a line after dub.selected = true; but none of what I have tried has worked."

     

    Add this line

    dub.fillColor = doc.swatches["BRONZE"].color;

     

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