foxyjs

example

A simple and powerful Javascript HTML5 SVG library.

Features

  • Out of the box interactions such as scale, move, rotate, skew, group…
  • Built in shapes, controls, animations, image filters, gradients, patterns, brushes…
  • JPG, PNG, JSON and CANVAS , PDF , DFX , AI(adobe illustrator)

Supported Browsers/Environments

Context Supported Version Notes
Firefox ✔️ modern version (tbd)
Safari ✔️ version >= 10.1
Opera ✔️ chromium based
Chrome ✔️ modern version (tbd)
Edge ✔️ chromium based
Edge Legacy ❌
IE11 ❌
Node.js ✔️ Node.js installation

Installation

$ npm install foxyjs --save
// or
$ yarn add foxyjs

Browser

See browser modules for using es6 imports in the browser or use a dedicated bundler.

Quick Start

import { Stage, SVGStar } from "foxyjs";
Plain HTML 

<div id="container" width="100vw" height="100vh"></div>
<script>
  const container = document.getElementById("container");
  const stage = new Stage(container);
  const star = new SVGStar({
    x: 100,
    y: 100,
    rx: 60,
    ry: 60,
    fill: "red",
  });
  stage.addGraph(star);
  stage.selectedElements.set(star);
  stage.toggleTool("transform-tool");
</script>
ReactJS 

import React, { useRef } from "react";
import { Stage, SVGStar } from "foxyjs";

class App extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
  }

  componentDidMount() {
    const board = document.querySelector("#board");
    const stage = new Stage(board);
    const star = new SVGStar({
      x: 100,
      y: 100,
      rx: 60,
      ry: 60,
      fill: "red",
    });
    stage.addGraph(star);
    stage.selectedElements.set(star);
    stage.toggleTool("transform-tool");
  }

  render = () => {
    return (
      <div className="App">
        <div id="board"></div>
      </div>
    );
  };
}

export default App;
Vue2 

<template>
  <div id="container"></div>
</template>;

import { Stage, SVGStar } from "foxyjs";

mounted(() => {
  const container = document.getElementById("container");
  const stage = new Stage(container);
  const star = new SVGStar({
    x: 100,
    y: 100,
    rx: 60,
    ry: 60,
    fill: "red",
  });
  stage.addGraph(star);
  stage.selectedElements.set(star);
  stage.toggleTool("transform-tool");
});
Vue3 

<template>
  <div id="container"></div>
</template>;

import { computed, onMounted, ref } from "vue";
import { Stage, SVGStar } from "foxyjs";

onMounted(() => {
  const container = document.getElementById("container");
  const stage = new Stage(container);
  const star = new SVGStar({
    x: 100,
    y: 100,
    rx: 60,
    ry: 60,
    fill: "red",
  });
  stage.addGraph(star);
  stage.selectedElements.set(star);
  stage.toggleTool("transform-tool");
});

GitHub

View Github