pistris

A zoomable and scrollable Vue component

Usage no npm install needed!

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

README

English | 简体中文

pistris

A zoomable and scrollable Vue component

npm license

Homepage | Code Pen

Features

Pistris consists of three parts: stage, scene, and layer. The stage is composed of Ruler and Guide Line. Anything in the stage will becomes zoomable and scrollable, similar to a Photoshop container.

screenshot

Stage

  • zoomable
  • scrollable
  • ruler
  • guide line
  • touchscreen supports

Scene

  • rotatable
  • scalable
  • moveable
  • select elements within area by the dragging

Layer

  • group by
  • visible / hidden
  • snap to guide line or other layers

Install

# npm
npm install pistris

# yarn
yarn add pistris

Usage

import { Stage } from "pistris";

export default {
  render() {
    const props = {
      zoomMin: 0.1,
      zoomMax: 10,
    };
    return <Stage { ...{ props } }>Hello World.</Stage>;
  }
};