Package Exports

foxyjs
foxyjs/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (foxyjs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

foxyjs

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");
});