• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Placing layer in exact position related to canvas.

Explorer ,
Aug 20, 2017 Aug 20, 2017

Copy link to clipboard

Copied

Could you make a sample JavaScript code how to position a layer in exact position related to the canvas (whole image)?
For example, there is an image 600x600px dimensions. This image contains a 'Layer 1' which is 100x200px.
We need to place the 'Layer 1' in the coordinates of x=300px and y=300px related to the top left corner of the canvas.

TOPICS
Actions and scripting

Views

5.0K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Aug 20, 2017 Aug 20, 2017

Copy link to clipboard

Copied

#target photoshop;

if(documents.length) main();

function main(){

var X = 300; //Top left

var Y = 300; //Top left

try{

var doc = app.activeDocument;

app.displayDialogs = DialogModes.NO;

var strtRulerUnits = app.preferences.rulerUnits;

var strtTypeUnits = app.preferences.typeUnits;

app.preferences.rulerUnits = Units.PIXELS;

app.preferences.typeUnits = TypeUnits.PIXELS;

activeDocument.activeLayer = activeDocument.artLayers.getByName("Layer 1");

var LB = activeDocument.activeLayer.bounds;

activeDocument.activeLayer.translate(X-LB[0].value,Y-LB[1].value);

}catch(e){alert(e + "\nLine number = " + e.line);}

finally{

app.preferences.rulerUnits = strtRulerUnits;

app.preferences.typeUnits = strtTypeUnits;

    }

};

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Aug 20, 2017 Aug 20, 2017

Copy link to clipboard

Copied

A trivial question

How do i get the x  and y coordinates.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 20, 2017 Aug 20, 2017

Copy link to clipboard

Copied

Here is a script I posted sever times.  The script places a watermark/logo image file into the active document resizes the Watermark relative to the document's height then positions the water mark in one of the bottom corners with some margin size.  The first few variables in the script set most of the size and positioning options.  Its not hard to read the code.

#target photoshop; 

app.bringToFront(); 

var logoFile = "~/Desktop/JJMack.png"; // Watermark file should be large for resize down works better than up

var LogoSize = 10;                     // percent of document height to resize Watermark to

var LogoMargin = 1;                    // percent of Document height the Watermark should have as a margin

var BottomLetf = false;                // false = Bottom Right true Bottom Left

placeWatermark(logoFile, LogoSize, LogoMargin);  // Place Watermark into the bottom of the document

function placeWatermark(Image,Size,Margin){ 

   if(!documents.length) return;                       // if no document return

   try{ 

      var doc = app.activeDocument;                    // set Doc object to active document

      app.displayDialogs = DialogModes.NO;             // Dialog off

      var strtRulerUnits = app.preferences.rulerUnits; // Save Users ruler units

      var strtTypeUnits = app.preferences.typeUnits;   // Save Users Type units

      app.preferences.rulerUnits = Units.PIXELS;       // work with pixels

      app.preferences.typeUnits = TypeUnits.PIXELS;    // work with pixels

      var fileObj = new File(Image);                   // the passed file

      if(!fileObj.exists){                             // If file does not exits tell user

         alert(fileObj.name  + " does not exist!"); 

         return; 

      } 

      placeFile(fileObj);                              // Place in file the Watermark png file

      activeDocument.activeLayer.resize(100 ,100,AnchorPosition.MIDDLECENTER); // Insure Place did not scale layer 

      var SB = activeDocument.activeLayer.bounds;      // get layers bounds

      var layerHeight = SB[3] - SB[1];                 // get layers height 

      var resizePercent = (100/layerHeight)*(Size/100*doc.height.value); // Percent to resize by

      activeDocument.activeLayer.resize(resizePercent ,resizePercent,AnchorPosition.MIDDLECENTER);  // Resize width and height by percentage

      SB = activeDocument.activeLayer.bounds;          // get resized layers bounds 

      activeDocument.activeLayer.translate(-SB[0].value,-SB[1].value); // Move resized layer to top left canvas corner

      var LayerWidth = (SB[2].value - SB[0].value);    // get resized layers width 

      var LayerHeight = (SB[3].value - SB[1].value);   // get resized layers height

      marginSize = Margin/100*doc.height.value;        // Margin size

      // move resized watermark into the document lower right corner with some margin or lower left

      if  ( BottomLetf) {activeDocument.activeLayer.translate(marginSize,( doc.height.value -marginSize - LayerHeight));}

      else {activeDocument.activeLayer.translate((doc.width.value -marginSize - LayerWidth),( doc.height.value -marginSize - LayerHeight));}

   }

   catch(e) { alert(e + ': on line ' + e.line); }       // inform user of error 

   finally{ 

      app.preferences.rulerUnits = strtRulerUnits;      // Restore user ruler units 

      app.preferences.typeUnits = strtTypeUnits;        // Restore user type units   

   }; 

};

function placeFile(placeFile) { 

    var desc21 = new ActionDescriptor(); 

    desc21.putPath( charIDToTypeID('null'), new File(placeFile) ); 

    desc21.putEnumerated( charIDToTypeID('FTcs'), charIDToTypeID('QCSt'), charIDToTypeID('Qcsa') ); 

    var desc22 = new ActionDescriptor(); 

    desc22.putUnitDouble( charIDToTypeID('Hrzn'), charIDToTypeID('#Pxl'), 0.000000 ); 

    desc22.putUnitDouble( charIDToTypeID('Vrtc'), charIDToTypeID('#Pxl'), 0.000000 ); 

    desc21.putObject( charIDToTypeID('Ofst'), charIDToTypeID('Ofst'), desc22 ); 

    executeAction( charIDToTypeID('Plc '), desc21, DialogModes.NO ); 

}; 

JJMack

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 31, 2020 May 31, 2020

Copy link to clipboard

Copied

This code works well. Could you please provide the code to position the watermark to the bottom center of the document?

Thank you!

Victor

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 31, 2020 May 31, 2020

Copy link to clipboard

Copied

Here you go:

 

// Align Active Layer

/* 
//macscripter.net/viewtopic.php?id=38890
AdLf = Align Left
AdRg = Align Right
AdCH = Align Centre Horizontal
AdTp = Align Top
AdBt = Align Bottom
AdCV = Align Centre Vertical
*/

//www.ps-scripts.com/viewtopic.php?f=66&t=7036&p=35273&hilit=align+layer#p35273

align('AdBt'); align('AdCH'); // Change as required

function align(method) {
    app.activeDocument.selection.selectAll();
    var desc = new ActionDescriptor();
    var ref = new ActionReference();
    ref.putEnumerated(charIDToTypeID("Lyr "), charIDToTypeID("Ordn"), charIDToTypeID("Trgt"));
    desc.putReference(charIDToTypeID("null"), ref);
    desc.putEnumerated(charIDToTypeID("Usng"), charIDToTypeID("ADSt"), charIDToTypeID(method));
    try {
        executeAction(charIDToTypeID("Algn"), desc, DialogModes.NO);
    } catch (e) {}
    app.activeDocument.selection.deselect();
};

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Aug 21, 2017 Aug 21, 2017

Copy link to clipboard

Copied

To get the active layer details.

#target photoshop;

app.preferences.rulerUnits = Units.PIXELS;

var LB = activeDocument.activeLayer.bounds;

alert("Left = " +LB[0].value + " Top = " + LB[1].value + " Right = " + LB[2].value + " Bottom = " + LB[3].value);

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Aug 21, 2017 Aug 21, 2017

Copy link to clipboard

Copied

I noticed that if the document and another dimension the square is positioned at another point

Can not you use rulers in percent?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Aug 21, 2017 Aug 21, 2017

Copy link to clipboard

Copied

If you wish to do so.

Translate.jpg

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Aug 22, 2017 Aug 22, 2017

Copy link to clipboard

Copied

SuperMerlin

I can not get it to work

You could set an example

Thank you

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Aug 22, 2017 Aug 22, 2017

Copy link to clipboard

Copied

That example requires you have an open document with a layer named "Layer 1"

This example create a document and a layer, fills a section of that layer and moves it so that the top left is positioned at X = 300 Y = 300

#target photoshop; 

main(); 

 

function main(){ 

try{ 

    // X & Y is where the the layer is to be moved to.

var X = 300; //Top left 

var Y = 300; //Top left 

app.displayDialogs = DialogModes.NO; 

var strtRulerUnits = app.preferences.rulerUnits; 

var strtTypeUnits = app.preferences.typeUnits; 

app.preferences.rulerUnits = Units.PIXELS; 

app.preferences.typeUnits = TypeUnits.PIXELS; 

//create a new document

var doc = app.documents.add(1800, 1200, 300, null, NewDocumentMode.RGB, DocumentFill.WHITE);

//create a new layer

doc.artLayers.add();

//make a selection

doc.selection.select([[600,400],[800,400],[800,800],[600,800]], SelectionType.REPLACE, 0, false);

//create a colour

var Red = new SolidColor;

Red.rgb.hexValue = "ff0000";

//set foreground colour to red

app.foregroundColor = Red;

//fill selection

doc.selection.fill(app.foregroundColor);

//deselect

doc.selection.deselect();

// get bounds of active layer

var LB = activeDocument.activeLayer.bounds; 

//move layer to X,Y as defined above

activeDocument.activeLayer.translate(X-LB[0].value,Y-LB[1].value); 

//get bounds to display position of the layer

LB = activeDocument.activeLayer.bounds;

//display X and Y of top left corner of layer

alert("Top X is " + LB[0].value + "\nTop Y is " +LB[1].value);

}catch(e){alert(e + "\nLine number = " + e.line);} 

finally{ 

app.preferences.rulerUnits = strtRulerUnits; 

app.preferences.typeUnits = strtTypeUnits; 

    } 

};

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Aug 25, 2022 Aug 25, 2022

Copy link to clipboard

Copied

Being a PS scripting beginner myself, it took me a while to get a grasp on how placing and moving (translating) objects works. So here's a little ASCII art and code reference I made that may help. I keep this in one of my script files for when I need a refresher.

   /**** Bounds reference: 
    
    An array of 4 values in the order [x1,y1,x2,y2] or [Left,Top,Right,Bottom]  
    
    bounds[0] = x1 or Left
    bounds[1] = y1 or Top
    bounds[2] = x2 or Right
    bounds[3] = y2 or Bottom
    
    Width = (x2-x1) or (bounds[2]-bounds[0])
    
    Height= (y2-y1) or (bounds[3]-bounds[1])
    
    Diagram:
    
     (x1,y1)        (x2,y1)
    (0-Left)    (2-Right)(1-Top)
    
       ...___Width____...
        |              |
        |             Height
        |              |
        |              |
       ...------------...
     (x1,y2)        (x2,y2)
                  (3-Bottom)


    */

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 25, 2022 Aug 25, 2022

Copy link to clipboard

Copied

LATEST

@27shutterclicks – thanks for sharing, I do a similar thing as well:

 

var layerBounds = activeDocument.activeLayer.bounds;
var layerWidth = layerBounds[2].value - layerBounds[0].value;
var layerHeight = layerBounds[3].value - layerBounds[1].value;
alert(layerBounds[0].value);
alert(layerBounds[2].value);
alert(layerBounds[1].value);
alert(layerBounds[3].value);
alert(layerWidth);
alert(layerHeight);

// or

var selectionBounds = activeDocument.selection.bounds;
var selectionLeft = selectionBounds[0].value;
var selectionTop = selectionBounds[1].value;
var selectionRight = selectionBounds[2].value;
var selectionBottom = selectionBounds[3].value;
var selectionWidth = selectionBounds[2].value - selectionBounds[0].value;
var selectionHeight = selectionBounds[3].value - selectionBounds[1].value;
var selectionXCenter = (selectionBounds[0].value + selectionWidth) / 2;
var selectionYCenter = (selectionBounds[1].value + selectionHeight) / 2;

//////////
// Left [0], Top [1], Right [2] and Bottom [3]
//////////


//    Bounds:
//    + - - - - - - - [1] - - - - - - - +
//    |                                 |
//    |                                 |
//   [0]                               [2]
//    |                                 |
//    |                                 |
//    + - - - - - - - [3] - - - - - - - +

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines