2012-03-01 08:30:14 -05:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2013-06-02 16:41:10 -04:00
|
|
|
<meta charset="UTF-8">
|
2012-03-01 08:30:14 -05:00
|
|
|
<title>Resize</title>
|
|
|
|
|
<link rel="stylesheet" href="../css/style.css">
|
|
|
|
|
<script type="text/javascript" src="../../dist/paper.js"></script>
|
|
|
|
|
<script type="text/paperscript" canvas="canvas">
|
2013-03-09 10:02:11 -05:00
|
|
|
var redPath = new Path.Circle({
|
|
|
|
|
center: view.center,
|
|
|
|
|
radius: 5,
|
|
|
|
|
fillColor: 'red'
|
|
|
|
|
});
|
2012-03-01 08:30:14 -05:00
|
|
|
|
2013-03-09 10:02:11 -05:00
|
|
|
var whitePath = new Path.Circle({
|
|
|
|
|
center: view.center,
|
|
|
|
|
radius: 5,
|
|
|
|
|
fillColor: 'white'
|
|
|
|
|
});
|
2012-03-01 08:30:14 -05:00
|
|
|
|
2013-03-09 10:02:11 -05:00
|
|
|
var text = new PointText({
|
|
|
|
|
content: 'Resize your window',
|
|
|
|
|
justification: 'center',
|
|
|
|
|
point: view.center
|
|
|
|
|
});
|
2012-03-01 08:30:14 -05:00
|
|
|
|
|
|
|
|
function onResize(event) {
|
|
|
|
|
// Resize the red circle to fill the bounds of the view:
|
|
|
|
|
redPath.fitBounds(view.bounds, true);
|
|
|
|
|
|
|
|
|
|
// Resize the white circle to fit within the bounds of the view:
|
|
|
|
|
whitePath.fitBounds(view.bounds, false);
|
|
|
|
|
|
|
|
|
|
// Move the text to the center of the view:
|
|
|
|
|
text.position = view.bounds.center;
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<canvas id="canvas" resize></canvas>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
