To operate in mouse is more user friendly then keyboard. KineticJS is very helpful to create flowchart applications. While designing a flowchart application we need to draw line by dragging mouse pointer. In the below sample code I declared a stage where there are two layers. One is temporary & other one is real-time. Div with the id container is the place for Canvas. To draw line with mouse pointer here I added three mouse events. Mousedown, Mousemove & Mouseup. Using getMousePosition() function I am retrieving the x & y coordinate of the Canvas.
To run the below example copy this codes to a Notepad file. Save it as a html file. Run this. The library file I referred here is a CDN link. To execute the html file you created above make sure you are with Internet Connectivity.
Demo App to Draw line using Mouse
<!DOCTYPE html>
<html>
<head>
<title>How to draw line using mouse in KineticJS?</title>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.2.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
.kineticjs-content { background-color: lightblue; }
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
/* Declaration of Stage */
var stage = new Kinetic.Stage({
container: 'container',
width: 640,
height: 280,
draggable: false
});
/* Declartion of Layer */
var layer = new Kinetic.Layer({
name: 'layer'
});
var tmpLayer;
beginPoint = undefined;
mousedown = function(evt) {
beginPoint = getMousePosition();
begin = true;
stage.add(tmpLayer);
};
mousemove = function(evt) {
if (!begin) {
return;
}
var tempPoint = getMousePosition();
if (tempPoint !== undefined && beginPoint !== undefined) {
var tmpLine = new Kinetic.Line({
points : [beginPoint.x, beginPoint.y, tempPoint.x,
tempPoint.y ],
stroke : '#C00000',
strokeWidth : 5
});
tmpLayer.removeChildren();
tmpLayer.add(tmpLine);
tmpLayer.draw();
}
};
mouseup = function(evt) {
if (begin) {
var tempPoint = getMousePosition();
if (tempPoint !== undefined && beginPoint !== undefined) {
var tmpLine = new Kinetic.Line({
points : [beginPoint.x, beginPoint.y, tempPoint.x,
tempPoint.y ],
stroke : '#C00000',
strokeWidth : 5
});
layer.add(tmpLine);
layer.draw();
}
begin = false;
}
};
/*Function to get Mouse Position*/
var getMousePosition = function() {
var pointerpos = stage.getPointerPosition();
if (pointerpos === undefined)
return undefined;
var pos = stage.getPosition();
var offset = stage.getOffset();
var scale = stage.getScale();
return {
x : ((pointerpos.x / scale.x) - (pos.x / scale.x) + offset.x),
y : ((pointerpos.y / scale.y) - (pos.y / scale.y) + offset.y)
};
};
$(document).ready(function(){
/* Creating temporary layer */
tmpLayer = new Kinetic.Layer({
name : 'tmpLayer'
});
stage.add(layer);
/* Adding Events to Canvas */
$('#container .kineticjs-content').on('mousedown', mousedown);
$('#container .kineticjs-content').on('mousemove', mousemove);
$('#container .kineticjs-content').on('mouseup', mouseup);
});
</script>
</body>
</html>
