Frame

Frame tool allows adding of various scaleable frames to photo or canvas. It works with any photo size or ratio.

var pixie = new Pixie({
  onLoad: function () {
    pixie.tools.frame.add("grunge");
  },
});

Adding custom frames

Each frame consists of eight parts: Top Left, Top, Top Right, Right, Bottom Right, Bottom, Bottom Left, Left. Each part can have an optional image with either stretch or repeat mode. Frame is automatically generated from these eight parts based on canvas size and retina scaling.

Frame Images

Custom frame images should be placed inside assets/images/frames/{your-frame-name} folder with matching file names:

• topLeft.png

• top.png

• topRight.png

• left.png

• bottomRight.png

• bottom.png

• bottomLeft.png

• left.png

Frame tool options

replaceDefault option can be used to hide default pixie frames.

size option can be used to specify min, max and default frame size in percentages based on current canvas size.

Here is an example code for one of the built in pixie frames:

var pixie = new Pixie({
  tools: {
    frame: {
      replaceDefault: false,
      items: [
        {
          name: "oak",
          mode: "stretch",
          size: {
            min: 1,
            max: 35,
            default: 15,
          },
        },
      ],
    },
  },
});

Methods

add

Add a new frame to canvas.

add(frameName: string, sizePercent?: number): void

resize

Resize active frame to specified percentage relative to canvas size.

resize(percentage?: number): void

changeColor

Change color of currently active frame. Only works for "basic" frame.

changeColor(value: string): void

remove

Remove currently active frame.

remove(): void

getByName

Get frame by specified name.

getByName(frameName: string): undefined | Frame