MasatoMakino/pixijs-basic-scrollbar

Scrollbar modules for pixi.js

pixijs-basic-scrollbar

Scrollbar modules for pixi.js

Demo

Demo Page

Getting Started

Install

npm install @masatomakino/pixijs-basic-scrollbar --save-dev

pixijs-basic-scrollbar depend on pixi.js and @tweenjs/tween.js

Import

pixijs-basic-scrollbar is composed of ES6 modules and TypeScript d.ts files.

At first, import classes.

import { SliderView } from "@masatomakino/pixijs-basic-scrollbar";

Add to stage

const slider = new SliderView({
  base: new Graphics(...),
  bar: new Graphics(...),
  button: new Graphics(...),
  mask: new Graphics(...),
  minPosition: 0,
  maxPosition: 320, //slider width
  rate: 0.0,
  canvas : app.canvas // Option : global drag on canvas element
});

slider.on("slider_change", e => {
  console.log(e.rate);
});
stage.addChild(slider);

API documents

Option : Scroll bar and Tween

Tween.js needs update in rendering loop.

PIXI.Ticker.shared.add((e) => {
  TWEEN.update(performance.now());
});

Option : global drag on canvas element

Since v7, pixi.js does not get pointer events where nothing is drawn. Give a canvas element as an argument so that dragging continues outside the slider.

const slider = new SliderView(
  ...,
  canvas: app.canvas
});