Like a chess board sometime we need to Draw grids on the Stage of KineticJS. During I worked with a MNC for an Application “Policy Designer” I faced the above situation. I have the KineticJS stage with width 800px & height 600px. On over the stage I have a layer. To make stage visible I draw a rectangle with same width & height as refer to the stage. Now as per our requirement I have to draw grids for stage. The intention is where I can drag various shapes to draw a policy flow.
The same example I am presenting in the below code. Here I declared a div with id container. Which is the container for KineticJS stage. pagerectangle is the rectangle which covers stage to display. To draw grids on the stage I called a function in the document.ready() method of jquery. In drawGrid() function I have 3 variables gridLineColor, gridLineCell & gridStroke. Using these setting you can set the grid details. gridLineColor is for the color of line. gridLineCell defines the width & height of individual grid cells. gridStroke is the width of grid lines. Here to draw a grid I created to KineticJS lines gridHorizontalLine & gridVerticalLine. Points for these lines I calculated mathematically to draw the grid. To make my grid dotted line here I used dash : [ 10, 5 ] from the line params of KineticJS. Finally I am adding my both the lines configuration variables (gridHorizontalLine & gridVerticalLine) to layer. Before draw the stage Adding the layer to stage.
To run the below example copy the codes to a notepad file. Save it as a html file. Stay Connected to internet & run the file to watch the Demo.
Example to draw grid on KineticJS Stage
<!DOCTYPE html>
<html>
<head>
<title>Example to draw grid on KineticJS Stage?</title>
<script type="text/javascript" src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.3.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/jscript">
/* KineticJS Stage */
var stage = new Kinetic.Stage({
container : 'container',
width : 800,
height : 600,
draggable : false
});
/* The Primary Layer */
var layer = new Kinetic.Layer({
name : 'layer'
});
/* Rectangle over Stage to Show Visible Area */
var pagerectangle = new Kinetic.Rect({
x : 0,
y : 0,
width : 800,
height : 600,
fill : '#CEF6F5',
id : 'mainpage'
});
/* Adding base Rectangle to layer */
layer.add(pagerectangle);
/* Adding layer to Stage */
stage.add(layer);
stage.draw();
$(document).ready(function() {
/* Draw Grid Function */
drawGrid();
});
/* Function to Draw Grid on Stage */
var drawGrid = function() {
/* Configuration Settings for Grid Lines */
var gridLineColor = 'gray';
var gridLineCell = 50;
var gridStroke = 0.5;
/* Horizontal Line Draw */
var gridHorizontalLine = new Kinetic.Line({
id : 'hline',
points : [ 0, 0, 0, gridLineCell, pagerectangle.getWidth(),
gridLineCell, pagerectangle.getWidth(), 2 * gridLineCell, 0,
2 * gridLineCell, 0, 3 * gridLineCell, 0, 3 * gridLineCell,
pagerectangle.getWidth(), 3 * gridLineCell,
pagerectangle.getWidth(), 4 * gridLineCell,
pagerectangle.getWidth(), 4 * gridLineCell, 0,
4 * gridLineCell, 0, 5 * gridLineCell, 0, 5 * gridLineCell,
pagerectangle.getWidth(), 5 * gridLineCell,
pagerectangle.getWidth(), 6 * gridLineCell,
pagerectangle.getWidth(), 6 * gridLineCell, 0,
6 * gridLineCell, 0, 7 * gridLineCell, 0, 7 * gridLineCell,
pagerectangle.getWidth(), 7 * gridLineCell,
pagerectangle.getWidth(), 8 * gridLineCell,
pagerectangle.getWidth(), 8 * gridLineCell, 0,
8 * gridLineCell, 0, 9 * gridLineCell, 0, 9 * gridLineCell,
pagerectangle.getWidth(), 9 * gridLineCell,
pagerectangle.getWidth(), 10 * gridLineCell,
pagerectangle.getWidth(), 10 * gridLineCell, 0,
10 * gridLineCell, 0, 11 * gridLineCell, 0, 11 * gridLineCell,
pagerectangle.getWidth(), 11 * gridLineCell,
pagerectangle.getWidth(), 12 * gridLineCell,
pagerectangle.getWidth(), 12 * gridLineCell, 0,
12 * gridLineCell, 0, 13 * gridLineCell, 0, 13 * gridLineCell,
pagerectangle.getWidth(), 13 * gridLineCell,
pagerectangle.getWidth(), 14 * gridLineCell,
pagerectangle.getWidth(), 14 * gridLineCell, 0,
14 * gridLineCell, 0, 15 * gridLineCell, 0, 15 * gridLineCell,
pagerectangle.getWidth(), 15 * gridLineCell,
pagerectangle.getWidth(), 16 * gridLineCell,
pagerectangle.getWidth(), 16 * gridLineCell, 0,
16 * gridLineCell, 0
],
stroke : gridLineColor,
strokeWidth : gridStroke,
lineJoin : 'round',
dash : [ 15, 5 ]
});
layer.add(gridHorizontalLine);
/* Vertical Line Draw */
var gridVerticalLine = new Kinetic.Line({
id : 'vline',
points : [ 0, 0, gridLineCell, 0, gridLineCell,
pagerectangle.getHeight(), 2 * gridLineCell,
pagerectangle.getHeight(), 2 * gridLineCell, 0,
3 * gridLineCell, 0, 3 * gridLineCell,
pagerectangle.getHeight(), 4 * gridLineCell,
pagerectangle.getHeight(), 4 * gridLineCell, 0,
5 * gridLineCell, 0, 5 * gridLineCell,
pagerectangle.getHeight(), 6 * gridLineCell,
pagerectangle.getHeight(), 6 * gridLineCell, 0,
7 * gridLineCell, 0, 7 * gridLineCell,
pagerectangle.getHeight(), 8 * gridLineCell,
pagerectangle.getHeight(), 8 * gridLineCell, 0,
9 * gridLineCell, 0, 9 * gridLineCell,
pagerectangle.getHeight(), 10 * gridLineCell,
pagerectangle.getHeight(), 10 * gridLineCell, 0,
11 * gridLineCell, 0, 11 * gridLineCell,
pagerectangle.getHeight(), 12 * gridLineCell,
pagerectangle.getHeight(), 12 * gridLineCell, 0,
13 * gridLineCell, 0, 13 * gridLineCell,
pagerectangle.getHeight(), 14 * gridLineCell,
pagerectangle.getHeight(), 14 * gridLineCell, 0,
15 * gridLineCell, 0, 15 * gridLineCell,
pagerectangle.getHeight(), 16 * gridLineCell,
pagerectangle.getHeight(), 16 * gridLineCell, 0
],
stroke : gridLineColor,
strokeWidth : gridStroke,
lineJoin : 'round',
dash : [ 10, 5 ]
});
layer.add(gridVerticalLine);
stage.add(layer);
stage.draw();
};
</script>
</body>
</html>
