vinci

a canvas library for interactive and multi shape objects

Usage no npm install needed!

<script type="module">
  import vinci from 'https://cdn.skypack.dev/vinci';
</script>

README

vinci.js (in development)

vinci.js is an interactive 2D graphic canvas library engine. It can be used to support 2D picture edit, data visualization, video editting, etc.

Currently, it already has the basic interactive feature, and it is still in development.

Below is the demo capture from vinci.js.

demo

install

npm install --S vinci

usage

import { VinciCanvas, StaticVinciCanvas, Shapes } from 'vinci';

const vinci = new VinciCanvas();

const rect = new Shapes.Rect({ left: 10, top: 20, width: 300, height: 200 });

const circle = new Shapes.Circle({ cx: 50, cy: 50, r: 100});

vinci.add(rect);
vinci.add(circle);

// append vinci to the DOM
vinci.getElement();

TODO list

  • Path shape
  • Textbox shape
  • group function
  • behavior improvement
  • fillStyle/strokeStyle/ refactor
  • drawing mode

After these feature done, it will be published in public.

roadmap