flying-canvas

flying-canvas

flying-canvas is awesome. LOL!

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

Use it this way

1 Download and Install flying-canvas

• NPM: npm install flying-canvas
• Yarn: yarn add flying-canvas
• github: https://github.com/ajsoriar/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.