Transforms

It is possible to scale, offset and rotate shapes during Shape creation. We can even change the order and direction of a shape's points.

To do this we set a transform property on the Plain Shape Object.

The transform property takes the form of an array of transforms. These transforms are compounded in the order that they are defined.

Each array item must itself be an array, where the first item is the transform key, and additional items are transform arguments.

All transforms are mapped to their namesake functions in Points.

scale

The scale transform scales a shape. It takes two arguments, a scale factor (number) and an anchor point (string).

import { shape, render } from 'wilderness'

const rect = {
  type: 'rect',
  x: 40,
  y: 0,
  width: 20,
  height: 20,
  fill: '#DBF8A1'
}

const transformedRect = {
  ...rect,
  transforms: [[ 'scale', 0.5, 'topLeft' ]],
  fill: '#1F9FFD'
}

render(
  document.querySelector('svg'),
  shape(rect),
  shape(transformedRect)
)
    

offset

The offset transform offsets a shape. It takes two arguments, an x offset (number) and a y offset (number).

import { shape, render } from 'wilderness'

const rect = {
  type: 'rect',
  x: 0,
  y: 0,
  width: 10,
  height: 10,
  fill: '#DBF8A1'
}

const transformedRect = {
  ...rect,
  transforms: [[ 'offset', 90, 10 ]],
  fill: '#4F5448'
}

render(
  document.querySelector('svg'),
  shape(rect),
  shape(transformedRect)
)
    

rotate

The rotate transform rotates a shape. It takes a single argument, the rotation degrees (number).

import { shape, render } from 'wilderness'

const rect = {
  type: 'rect',
  x: 45,
  y: 5,
  width: 10,
  height: 10,
  fill: '#DBF8A1'
}

const transformedRect = {
  ...rect,
  transforms: [[ 'rotate', 45 ]],
  fill: '#4F5448'
}

render(
  document.querySelector('svg'),
  shape(rect),
  shape(transformedRect)
)
    

moveIndex

The moveIndex transform moves a shape's index point (first point).

This is very useful when fine tuning a morph between two shapes.

It takes a single argument, the number of points to move the index (number).

import { shape, render } from 'wilderness'

const rect = {
  type: 'rect',
  x: 0,
  y: 0,
  width: 20,
  height: 20,
  fill: '#DBF8A1'
}

const transformedRect = {
  ...rect,
  transforms: [
    [ 'offset', 80 ],
    [ 'moveIndex', 2 ]
  ],
  fill: '#4F5448'
}

render(
  document.querySelector('svg'),
  shape(rect),
  shape(transformedRect)
)
    

For the purpose of visualising the moveIndex transform, in the example above we have first applied an offset to the shape. Dots have also been added to the render to represent each point (the blue dot is the index point).

reverse

The reverse transform reverses the order of a shape's points.

As with moveIndex this can also be useful when fine tuning a morph between two shapes. These two transforms can often be used together with good effect.

It takes no additional arguments.

import { shape, render } from 'wilderness'

const rect = {
  type: 'rect',
  x: 40,
  y: 0,
  width: 20,
  height: 20,
  fill: '#DBF8A1'
}

const transformedRect = {
  ...rect,
  transforms: [
    [ 'offset', 80 ],
    [ 'reverse' ]
  ],
  fill: '#4F5448'
}

render(
  document.querySelector('svg'),
  shape(rect),
  shape(transformedRect)
)
    

As with the modeIndex example, for the purpose of visualising the reverse transform, in the example above we have first applied an offset to the shape. Arrows have also been added to the render to represent each point and the direction of their order.