Transformations

Every transformation method returns the figure or figures that were transformed so you can chain them.

Basic transformation on figures, the deg parameter in scaleFrom and shearAround applies the transform in a rotated space.

figure.translate(x,y); // figure.translate(offset);
figure.scaleFrom(point,sx,sy [,deg]);
figure.rotateAround(point,angle);
figure.shearAround(point,sx,sy [,deg]);
figure.transform(matrix);
Cx.translate(figures, x,y); // Cx.translate(figures, offset);
Cx.scaleFrom(figures, point,sx,sy [,deg]);
Cx.rotateAround(figures, point,angle);
Cx.shearAround(figures, point,sx,sy [,deg]);
Cx.transform(figures, matrix);

Transformations using the center of the figures bounds as the pivot. We need to use metrics here so these operations are asynchronous.

figure.rotate$(angle);
figure.scale$(sx, sy);
figure.mirrorX$();
figure.mirrorY$();
Cx.rotate$(figures, angle);
Cx.scale$(figures, sx, sy);
Cx.mirrorX$(figures);
Cx.mirrorY$(figures);

Alignment

figure.center$( to );
Cx.center$( figures, to );

Center a figure or a figures list. to can be a point or anything that has a center (bounds, frame, other figures).

figure.align$( alignment, to [, margin] );

Align the figure against a given bounds.

  • alignment any combination of Left, Center, Right with Top, Middle, Bottom. Examples: “TopLeft”, “Center”, “Bottom”, “CenterMiddle”. It doesn’t matter the order or if you put a space or a comma between them (this is ok: “Top Right”).
  • to a bounds object of something we can get bounds from (canvas,frame,other figures).
  • margin optional margin for the alignment
Cx.align$( figures, alignment [, to, margin] );

Align a group of figures to a given bounds. If you call it without a to parameter it will align the figures against themselves.

Cx.groupedAlign$( figures, alignment, to [,margin] );

Align the figures without loosing their relative distances.

Examples:

// Center figures in Canvas
Cx.center$( figures, canvas );
// Align figures to the top of the Canvas (respecting relative distances)
Cx.groupedAlign$( figures, 'Top', canvas );
// Align figures baselines
Cx.align$( figures, 'bottom' );

Fitting

Cx.fit$(figures, to,{ locked:[bool], fit:['Max'/'Min'/'Mean'] });

Fits a group of figures to a bounds object or anything that has bounds.

Examples:

// Fit figures to cover the Canvas visible area
Cx.fit$(figures, canvas);
// Fit figures to cover all the figures in the document
Cx.fit$(figures, doc.activePageFigures());
Cx.setSize$(figures, { width:[n], height:[n], locked:[bool], fit:['Max'/'Min'/'Mean'], pin:[point] });

Examples:

// Set the width of the selected figures, preserving aspect ratio.
Cx.setSize$(canvas.selectedFigures(),{width:400})
// Set the width and height of the figures, preserving aspect ratio and area of the bounds.
Cx.setSize$(figures,{width:500,fit:'Mean'});
// Set width and height, do not preserve aspect ratio
Cx.setSize$(figures,{width:100,height:100,locked:false});

Boolean operations

Cx.reshape$(figures,action) .then(function( newFigures ) {
// ...

Performs a reshape action on a list of figures. The action can be any of Cx.E.ReshapeAction: ‘Combine’, ‘Weld’, ‘Condense’, ‘FrontMinusBack’, ‘BackMinusFront’, ‘BreakApart’, ‘BreakApartRegions’ and ‘BreakApartByColor’

Cx.combine$(figures) .then(function( newFigure ){ ...
Cx.weld$(figures) .then(function( newFigure ){ ...
Cx.condense$(figures) .then(function( newFigure ){ ...
Cx.frontMinusBack$(figures) .then(function( newFigure ){ ...
Cx.backMinusFront$(figures) .then(function( newFigure ){ ...

Direct functions for combine type operations. Get a list of figures and return one composed figure.

Working with colors

Cx.forEachColor(figures,function(color){ ... },context);

Iterate through every color of a list of figures.


var zones = Cx.uniqueColorZones(figures, { collapseTags:[bool] });

Returns a list of unique color zones composed of a solid color (both from pens and brushes) and with textures. Each zone has a value member that can be a Cx.Color or a Cx.TextureBrush.


Cx.changeColorZone(figures, zone, newValue);

Replaces a color zone with a new value.

var map = function(color) { return newColor -or- color; };
Cx.convertColors(figures, map);

Converts the colors in the figures using the function map.

Cx.colorAt$(figures, point).then( function(color) ) {
// ...

Gets the color at the given point for a list of figures.