Working with Shapes in Javascript

Applying Shapes via JavaScript

Extract shape from a frame with JavaScript

We added a function, GetPathsAsXML, to our JavaScript API that enables the user to get the shape path XML from frames.

editorObject.ExecuteFunction('document.selectedFrame', 'GetPathsAsXML');

If the frame has a shape applied, the response will be a string of the shape path XML. If the frame does not have a shape applied, the response will be null.

You can use this response in conjunction with SetShapeFromXML. Here is some sample code that might be used in this case:

let shapeXML = editorObject.ExecuteFunction('document.selectedFrame', 'GetPathsAsXML');
//other frame gets selected in between..
editorObject.ExecuteFunction('document.selectedFrame', 'SetPathsFromXML', shapeXML);

SetShapeFromXML & SetPathsFromXML

We added new functions to our JavaScript API that enables the user to manipulate frame shapes. SetShapeFromXML allows the user to apply a shape to a frame directly (it can also be referenced by SetPathsFromXML). Here is some sample code that might be used in this case:

editorObject.ExecuteFunction(
    'document.selectedFrame',
    'SetPathsFromXML',
    '<shape><item id="cc7cbe85-cedf-4dc1-93d1-a3174831e2bf" name="" closed="true"><points><item id="43633862-3642-48e2-8578-c2f534d86244" name="" controlLeftX="12.5mm" controlLeftY="0mm" controlRightX="37.5mm" controlRightY="0mm" type="bezier" x="25mm" y="0mm"/><item id="da6591ca-c4e9-419f-a262-fb9cfaffb59f" name="" controlLeftX="50mm" controlLeftY="12.5mm" controlRightX="50mm" controlRightY="37.5mm" type="bezier" x="50mm" y="25mm"/><item id="c6422896-d59e-4592-b569-aef9ff618cbc" name="" controlLeftX="37.5mm" controlLeftY="50mm" controlRightX="12.5mm" controlRightY="50mm" type="bezier" x="25mm" y="50mm"/><item id="c7da61af-9b21-4679-bded-6a17e9b23905" name="" controlLeftX="0mm" controlLeftY="37.5mm" controlRightX="0mm" controlRightY="12.5mm" type="bezier" x="0mm" y="25mm"/></points></item></shape>'
);

AddShapeFromXML

It has become possible to manipulate the shapes library of the document via javascript. To do so the user can use AddShapeFromXML to add a shape to the library and Delete to remove a shape from the library. Here are some examples: