Created
November 17, 2015 19:29
-
-
Save campsjos/b561023e453aba2d9c31 to your computer and use it in GitHub Desktop.
Paper.js canvas responsive resizing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <style> | |
| #canvas { | |
| width:100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="canvas" width="800" height="600" resize /> | |
| <script> | |
| /* http://jsfiddle.net/u1fo39d8/3/ */ | |
| function init() { | |
| var original_size = { | |
| width: 800, | |
| height: 600 | |
| }; | |
| var actual_ratio = $('#canvas').innerWidth()/original_size.width; | |
| var last_width = $('#canvas').innerWidth(); | |
| var canvas = document.getElementById('canvas'); | |
| paper.setup(canvas); | |
| var raster1 = new paper.Raster('http://placehold.it/800x600'); | |
| raster1.onLoad = function(){ | |
| raster1.position = paper.view.center; | |
| raster1.size = paper.view.size; | |
| }; | |
| var ball1 = new paper.Shape.Circle(new paper.Point(getReal(80), getReal(50)), getReal(30)); | |
| ball1.fillColor = 'red'; | |
| ball1.onMouseUp = function() { | |
| alert("ball 1!"); | |
| }; | |
| var ball2 = new paper.Shape.Circle(new paper.Point(getReal(160), getReal(100)), getReal(60)); | |
| ball2.fillColor = 'blue'; | |
| var ball3 = new paper.Shape.Circle(new paper.Point(getReal(400), getReal(60)), getReal(40)); | |
| ball3.fillColor = 'yellow'; | |
| var ball4 = new paper.Shape.Circle(new paper.Point(getReal(800), getReal(600)), getReal(25)); | |
| ball4.fillColor = 'green'; | |
| paper.view.onResize = function(event) { | |
| paper.view.setViewSize(new paper.Size(getReal(800), getReal(600))); | |
| var scale = getScale(); | |
| ball1.position = new paper.Point(getReal(80), getReal(50)); | |
| ball1.scale(scale); | |
| ball2.position = new paper.Point(getReal(160), getReal(100)); | |
| ball2.scale(scale); | |
| ball3.position = new paper.Point(getReal(400), getReal(60)); | |
| ball3.scale(scale); | |
| ball4.position = new paper.Point(getReal(800), getReal(600)); | |
| ball4.scale(scale); | |
| raster1.scale(scale); | |
| raster1.position = paper.view.center; | |
| }; | |
| function getReal(val) { | |
| var actual_ratio = $('#canvas').innerWidth()/original_size.width; | |
| return val*actual_ratio; | |
| } | |
| function getScale() { | |
| var scale = $('#canvas').innerWidth()/last_width; | |
| last_width = $('#canvas').innerWidth(); | |
| return scale; | |
| } | |
| } | |
| $(document).ready(init); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment