KineticJS is a third party library to draw high end graphics in HTML5. Using KineticJS we can draw several shapes like Ellipse, Rectangle, Line or Oval. Lets discuss about a situation where I have 2 shapes on over my HTML5 Canvas. A rectangle & a Line. What I need is when I drag the rectangle the connected line need to move with the rectangle. Look at the example below. Here I have a rectangle & a line over KineticJS stage. On rectangle movement I am moving the line with rectangle. To achieve this I called a function moveLine() in dragmove event of rectangle.
In moveLine function I am passing the shape (Rectangle) as a parameter. x2 & y2 are the center points of the shape rectangle. Using getPosition() method from KineticJS I am retrieving the drag positions of rectangle. By adding shape.getWidth()/2 & shape.getHeight()/2 I am getting the center position of the shape rectangle. To find out the total area of the shape I declared 4 variables startPointX, startPointY, endPointX, endPointY. startPointX & startPointY I am getting from getPosition() method. To get the end points endPointX & endPointY of shape I am adding width & height (100px) to x & y points. Now inside a for loop I am checking all the elements of the stage. If the element id match to line I am comparing the startPointX, startPointY, endPointX & endPointY to know whether the line connected to shape or not. If the line is connected to shape here I am getting x1 & y1. x2 & y2 is available before after getting x1 & y1 I am updating the shape x2 & y2 points using setPoints() method.
To run the below sample application Copy the code to a Notepad file. Save it as a HTML file. Here I am using CDN link to refer KineticJS library. Before run the above HTML file make sure you are with Internet Connectivity.
<code><!DOCTYPE html>
<html>
<head>
<title>How connected line will move with the Shape in KineticJS?</title>
<script type="text/javascript" src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.3.min.js"></script>
</head>
<body>
<div id="conCanvas"></div>
<script type="text/jscript">
/*Stage for Drawing*/
var stage = new Kinetic.Stage({
container: 'conCanvas',
width: 600,
height: 500,
draggable: false
});
/*Creating Layer for Stage*/
var layer = new Kinetic.Layer();
/*Configuration for Line*/
var line = new Kinetic.Line({
id: 'line',
points: [50, 200, 250, 200],
stroke: 'red',
strokeWidth: 3,
lineCap: 'round',
lineJoin: 'round',
draggable: true
});
/*Adding line Configuration to Layer*/
layer.add(line);
/*Configuration for Rectangle*/
var rectangle = new Kinetic.Rect({
id: 'rectangle',
x: 200,
y: 150,
width: 100,
height: 100,
fill: 'lightblue',
stroke: 'black',
strokeWidth: 2,
draggable: true
});
/*Drag move event for Rectangle*/
rectangle.on('dragmove', function() {
moveLine(rectangle);
});
/*Adding Rectangle to Layer*/
layer.add(rectangle);
stage.add(layer);
stage.draw();
var x1, y1, x2, y2, lineCn, startPointX, startPointY, endPointX, endPointY;
function moveLine(shape) {
x2 = shape.getPosition().x + shape.getWidth()/2;
y2 = shape.getPosition().y + shape.getHeight()/2;
/*Getting Position Points for the Shape*/
startPointX = shape.getPosition().x;
startPointY = shape.getPosition().y;
endPointX = shape.getPosition().x + 100;
endPointY = shape.getPosition().y + 100;
for (var cn=0; cn<stage.children[0].children.length; cn++) {
if (stage.children[0].children[cn].getId().match('line')) {
lineCn = stage.children[0].children[cn];
if (((startPointX < lineCn.getPoints()[0].x && lineCn.getPoints()[0].x < endPointX) && (startPointY < lineCn.getPoints()[0].y && lineCn.getPoints()[0].y < endPointY))) {
x1 = lineCn.getPoints()[1].x;
y1 = lineCn.getPoints()[1].y;
}
if (((startPointX < lineCn.getPoints()[1].x && lineCn.getPoints()[1].x < endPointX) && (startPointY < lineCn.getPoints()[1].y && lineCn.getPoints()[1].y < endPointY))) {
x1 = lineCn.getPoints()[0].x;
y1 = lineCn.getPoints()[0].y;
}
}
}
lineCn.setPoints([x1, y1, x2, y2]);
stage.draw();
}
</script>
</body>
</html>
