Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

flying-canvas

1.1.1 • Public • Published

flying-canvas Build Status

yarn version NuGet version

flying-canvas is awesome. LOL!

flying-canvas demo image Check out the live example: https://www.subidote.com/flying-canvas

Use it this way

1 Download and Install flying-canvas

2 Include dependences

2.1 Include flying-canvas.min.js by referencing the necessary files

You will find .js and .css files in dist folder.

<script src="../dist/flying-canvas.min.js"></script>
<link rel="stylesheet" href="../dist/flying-canvas.min.css">

2.2 Initialize the plugin

<script>
    flyingCanvas.init({
        showWings: false,
        animation: false
    });
</script>

When the canvas pane bumps into the edges a function can be executed specifying bumpIntoEdgeFn

<script>
    flyingCanvas.init({
        showWings: false,
        bumpIntoEdgeFn: function(){
            console.log("Choca 1!");
        },
        animation: false
    });
</script>

2.3 Show a picture

Use src: "./void.png" to load a pinture in the canvas.

<script>
    flyingCanvas.init({
        src: "./void.png"
    });
</script>

2.3 Awesome

<script>
    flyingCanvas.init({
        width: 200,
        height: 400,
        showWings: false,
        bumpIntoEdgeFn: function(){
            console.log("Choca 1!");
        },
        zIndex: 300,
        awesome: 2 // This will render the picture of the column
    });
</script>

3 Configuration options

option default description
flyingCanvas.init() - Initializes the component allowing several parameters in json format.
width 350 Width of the canvas.
height 400 Height of the canvas.
pictureFrameWidth 75 Working on this now!
src null Route to an image.
flyingCanvas.loadImage() - Loads new images this way: flyingCanvas.loadImage("newImage.jpg").
flyingCanvas.clearImage() - Removes the image
animation boolean In the case of false the component will not have movement when created.
hidden boolean In the case of false the component will be hidden by default.
showWings boolean Show wings
awesome unknown Awesome stuff will happen.
flyingCanvas.start() - Starts the movement of the canvas.
flyingCanvas.stop() - Stops the movement.
flyingCanvas.hide() - Hides the component. Does not destroy. The component will continue running in the background.
flyingCanvas.show() - Shows the component again.

Development

sudo npm install -g eslint

sudo npm install -g grunt-cli

grunt build

License

flying-canvas is MIT licensed.

Install

npm i flying-canvas

DownloadsWeekly Downloads

1

Version

1.1.1

License

MIT

Unpacked Size

1.36 MB

Total Files

35

Last publish

Collaborators

  • avatar