fisheye

    1.0.2 • Public • Published

    fisheye

    Easily create a fisheye effect anywhere you need it.

    Demo

    Parameters

    You just need to provide few things:

    • a origin {x,y} that is generally the mouse position you need to pass
    • a list of items with {x,y}

    You can provide different parameters for the fisheye effect but there are already set by default so it's not mandatory :

    • distortion
    • radius

    The function will return a list of items {x,y,scale} according to the fisheye parameters.

    How you use those values is up to you, but generally, you already have a function to draw your items with {x,y} that you can just reuse.

    Example

    import fisheye from 'fisheye';
     
    const items = [
      { x: 10, y: 20 },
      { x: 20, y: 15 },
    ];
     
    // draw(items);
     
    const f = fisheye();
    // const f = fisheye(4, 300); // more distortion, bigger radius
     
    const mousePointer = { x: 15, y: 15 };
    const itemsFisheyed = items.map(f(mousePointer));
    // draw(itemsFisheyed);
     
    // [
    //   { x: 5.3756834868953,
    //     y: 24.624316513104702,
    //     scale: 1.92486330262094 },
    //   { x: 24.710604651796842,
    //     y: 15,
    //     scale: 1.9421209303593685 }
    // ]

    Following mouse pointer

    Most likely, you'll do something following the mouse pointer, such as:

    onMouseMove(e) {
      const transform = f({ x: e.clientX, y: e.clientY });
      const items = this.state.items.map(transform);
      this.setState({ items });
    }

    Install

    npm i fisheye

    DownloadsWeekly Downloads

    3

    Version

    1.0.2

    License

    MIT

    Last publish

    Collaborators

    • chtefi