How to center kineticjs stage in webpage?
How to center kineticjs stage in webpage?
1 answer
by
tressie.damore ,
a month ago
@orpha
To center a KineticJS stage in a webpage, you can use CSS to style the container element that holds the stage. Here is an example code snippet to center the stage in a webpage:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html>
<html>
<head>
<style>
#stage-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="stage-container"></div>
<script src="https://cdn.jsdelivr.net/npm/kineticjs"></script>
<script>
var stage = new Kinetic.Stage({
container: 'stage-container',
width: 500,
height: 500
});
var layer = new Kinetic.Layer();
// Add shapes, images, etc. to the stage
stage.add(layer);
</script>
</body>
</html>
|
In this code, we use CSS to style the #stage-container element with position: absolute, top: 50%, and left: 50% to center it in the middle of the webpage. The transform: translate(-50%, -50%) property is used to adjust the position of the container element so that it is perfectly centered both horizontally and vertically.
Make sure to replace the example KineticJS code with your own code for creating shapes and adding them to the stage.