Skip to main content
K
KitsuneKyo
Participant
February 17, 2014
Answered

JS - Center Selection to Artboard / New Document with certain Artboard size

  • February 17, 2014
  • 2 replies
  • 2918 views

TL;DR:

how do I center my current selection to the artboard?

just like hitting the "horizontal align-center" and "vertical align-center" buttons.

Hi,

I've been searching for the last two hours and before my head hits the keyboard I wanted to ask you for help.

What I'm struggling with:

in my init function i create a new document and then copy all layers from the previous document step by step to the new document and then save it as SVG.

// Init

(function(){

          destination = Folder.selectDialog('Select folder for SVG files.', docPath);

          if (!destination){return;}

          holderDoc = app.documents.add();

          stepThroughAndExportLayers(docRef.layers);

}());

my problem is that holderDoc = app.documents.add(); always creates a document that is not the same size as my initial document where the layers get copied from.

so I want the exact same artboard size as in my initial document.

I'm fine with either doing it as fixed values or taking directly the values of the inital doc.

i tried this in the segment where I create the new document:

// Init

(function(){

  destination = Folder.selectDialog('Select folder for SVG files.', docPath);

  if (!destination){return;}

  holderDoc = app.documents.add();

  holderDoc.artboards[0].artboardRect = [0,0,128,128];

  stepThroughAndExportLayers(docRef.layers);

}());

and get this error message:

"Error 1200: an Illustrator error occured: 1346458189 ('PARM')

Line: 83

-> holderDoc.artboards[0].artboardRect = [0,0,128,128];"

which from what I've read on the web means that illustrator doesnt know what document to pick. but i have called it directly. so what could be the issue?

to clearify: I do not want to fit the artboard to the images/layer. the artboard should always have a certain size. (for me 128px by 128px)

I would highly appreciate you helping me with either fixing my approach or propose a completely new one.

Thanks so much in advance.

// edit: workaround


(function(){

          destination = Folder.selectDialog('Select folder for SVG files.', docPath);

          if (!destination){return;}

          var activeArtboard = app.activeDocument.artboards[app.activeDocument.artboards.getActiveArtboardIndex()];

          var ABRect = activeArtboard.artboardRect;

          holderDoc = app.documents.add();

          holderDoc.artboards.add(ABRect);

          holderDoc.artboards.remove(0);

          holderDoc.artboards.setActiveArtboardIndex(0);

          //stepThroughAndExportLayers(docRef.layers);

}());

i now added a new artboard to the new document with the same size as the artboard on the initial document.

i remove the predefined artboard on the new doc and set the new artboard as active.

BUT!

the artboard is now not centered into the window. which lets illustrator place my image with ctrl+c -> ctrl+v somewhere outside the artboard.

i now need to align my selection to the center of the artboard. but i cant find any reference on how to center a selection to the artboard.

This topic has been closed for replies.
Correct answer pixxxelschubser

I'm not sure if I understand you right.

If you want to create a new document with a fixed width and height you can do this:

var doc = app.documents.add(DocumentColorSpace.RGB, new UnitValue ("128", "px"), new UnitValue ("128", "px"));

If you only wants align your selected items at the artboard, you can try this:

Note that the result may be different, if clipping masks are exists in the document.

Please test it at first on copies of your documents. Use it on your own risk.

// ArtboardCenterAroundSelectedPaths.jsx
// works with CS5 
// http://forums.adobe.com/thread/1336506?tstart=0
// (title: script to align selected objects to artboard)
// quick & dirty, all selected items will be centered at the active artboard  
// (include clipping paths  !visible result can be different)
 
// regards pixxxelschubser  19.Nov. 2013
 
var aDoc = app.activeDocument;
var Sel = aDoc.selection;
 
if (Sel.length >0 ) {
    var abIdx = aDoc.artboards.getActiveArtboardIndex();
    var actAbBds = aDoc.artboards[abIdx].artboardRect;
 
    var vBounds = Sel[0].visibleBounds;
    vBounds_Li = vBounds[0];
    vBounds_Ob = vBounds[1];
    vBounds_Re = vBounds[2];
    vBounds_Un = vBounds[3];
 
if (Sel.length >1 ) {    
    for (i=1; i<Sel.length ; i++) {
        vBdsI = Sel.visibleBounds;
        if( vBounds_Li > vBdsI[0] ) {vBounds_Li = vBdsI[0]};
        if( vBounds_Ob < vBdsI[1] ) {vBounds_Ob = vBdsI[1]};
        if( vBounds_Re < vBdsI[2] ) {vBounds_Re = vBdsI[2]};
        if( vBounds_Un > vBdsI[3] ) {vBounds_Un = vBdsI[3]};
        }
 
    aDoc.artboards[abIdx].artboardRect = [vBounds_Li +((vBounds_Re - vBounds_Li)/2-(actAbBds[2]-actAbBds[0])/2), vBounds_Ob -((vBounds_Ob - vBounds_Un)/2+(actAbBds[3]-actAbBds[1])/2), vBounds_Li +((vBounds_Re - vBounds_Li)/2-(actAbBds[2]-actAbBds[0])/2)+(actAbBds[2]-actAbBds[0]), vBounds_Ob -((vBounds_Ob - vBounds_Un)/2+(actAbBds[3]-actAbBds[1])/2)+(actAbBds[3]-actAbBds[1])];
    }
    } else {
        alert ("No selection");
        }

Hope, this is helpful for you.

Have fun

2 replies

W
W_J_T
Inspiring
February 17, 2014

Welcome to the forum.

KitsuneKyo wrote:

create a new document and then copy all layers from the previous document step by step to the new document and then save it as SVG

I am just curious, but if your goal is exporting an SVG why are you going though the hassle of making a new document and copying things over and not instead just using the original document for exporting the SVG?

K
KitsuneKyoAuthor
Participant
February 18, 2014

thank you a lot pixxxel schubser.

the aligning snipped I already tried but it didnt seem to do anything for me unfortunately. :/

@W_J_T:

i have 144 Football club logos that have to be exported in 4 different artboard sizes. (further use demands different artboard sizes)

these logos are split into different leagues (UK/IT/BE...) for that reason I have 7 different .ai files with all the logos placed on seperate layers.

for example for 512x512px the logos can have either a maximum height or width of 500px. so a bit of margin...

when just hiding other layers and exporting the svg the filesize is exploding to 900kb as opposed to deleting all other layers (26kb)

for that reason I create a new temp document in which my script copies layer 1, then saves it with the layer name and finally deletes the layer again. then it takes the next layer from the original document and so on and so forth.

i know its pretty complicated :/

W
W_J_T
Inspiring
February 18, 2014

KitsuneKyo wrote:

when just hiding other layers and exporting the svg the filesize is exploding to 900kb as opposed to deleting all other layers (26kb) for that reason I create a new temp document in which my script copies layer 1, then saves it with the layer name and finally deletes the layer again. then it takes the next layer from the original document and so on and so forth.

Oh yeah right, I think that may be the case with exporting .eps and .pdf as well. Now that you mention that though I now remember where I have seen your code, it's from Anton Ball's script. Since your modifying Anton Ball's script your should post your finished script version for others when completed and give credit. ;-)

Layers to SVG - layers_export.jsx  @ author Anton Ball

As far as centering things maybe this will help you, it's just one exmple of how it can be done:

var doc = app.activeDocument;
var sel = doc.selection[0]; // selected item
sel.position = [((doc.width / 2) - (sel.width / 2)), (-(doc.height / 2) + (sel.height / 2))]
pixxxelschubser
Community Expert
pixxxelschubserCommunity ExpertCorrect answer
Community Expert
February 17, 2014

I'm not sure if I understand you right.

If you want to create a new document with a fixed width and height you can do this:

var doc = app.documents.add(DocumentColorSpace.RGB, new UnitValue ("128", "px"), new UnitValue ("128", "px"));

If you only wants align your selected items at the artboard, you can try this:

Note that the result may be different, if clipping masks are exists in the document.

Please test it at first on copies of your documents. Use it on your own risk.

// ArtboardCenterAroundSelectedPaths.jsx
// works with CS5 
// http://forums.adobe.com/thread/1336506?tstart=0
// (title: script to align selected objects to artboard)
// quick & dirty, all selected items will be centered at the active artboard  
// (include clipping paths  !visible result can be different)
 
// regards pixxxelschubser  19.Nov. 2013
 
var aDoc = app.activeDocument;
var Sel = aDoc.selection;
 
if (Sel.length >0 ) {
    var abIdx = aDoc.artboards.getActiveArtboardIndex();
    var actAbBds = aDoc.artboards[abIdx].artboardRect;
 
    var vBounds = Sel[0].visibleBounds;
    vBounds_Li = vBounds[0];
    vBounds_Ob = vBounds[1];
    vBounds_Re = vBounds[2];
    vBounds_Un = vBounds[3];
 
if (Sel.length >1 ) {    
    for (i=1; i<Sel.length ; i++) {
        vBdsI = Sel.visibleBounds;
        if( vBounds_Li > vBdsI[0] ) {vBounds_Li = vBdsI[0]};
        if( vBounds_Ob < vBdsI[1] ) {vBounds_Ob = vBdsI[1]};
        if( vBounds_Re < vBdsI[2] ) {vBounds_Re = vBdsI[2]};
        if( vBounds_Un > vBdsI[3] ) {vBounds_Un = vBdsI[3]};
        }
 
    aDoc.artboards[abIdx].artboardRect = [vBounds_Li +((vBounds_Re - vBounds_Li)/2-(actAbBds[2]-actAbBds[0])/2), vBounds_Ob -((vBounds_Ob - vBounds_Un)/2+(actAbBds[3]-actAbBds[1])/2), vBounds_Li +((vBounds_Re - vBounds_Li)/2-(actAbBds[2]-actAbBds[0])/2)+(actAbBds[2]-actAbBds[0]), vBounds_Ob -((vBounds_Ob - vBounds_Un)/2+(actAbBds[3]-actAbBds[1])/2)+(actAbBds[3]-actAbBds[1])];
    }
    } else {
        alert ("No selection");
        }

Hope, this is helpful for you.

Have fun

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