During my software development experiences I never faced such a challenging stuff to design a table like Microsoft word or excel. Recently with my Ex-employer in a project I found me to design a table like MS-Word. The skills I used here are KineticJS, HTML5 & Jquery.

A table looks very easy to Operate but during the development of a table I faced many critical logical games to handle. In this article I am sharing the complete class for creating a table. The JavaScript class I am sharing here is TableShape which accepts row & column numbers with KineticJS stage & layer. In real-time this class is capable to draw table for you depending upon the row & column values. To implement this you need to copy this js file to your application & while creating the instance for the class TableShape you need to pass parameters only.

In the below TableShape class I have all the ready mate method to do operation with a table. createCell is the method which creates cell for table. Used Splitters to handle cells & rows adjustments. To insert a row into the table we created a function insertRow(). Where by passing the index you can add a row to your table. To delete a row in this class we implemented deleteRow() function. This function accepts index of the row which one you want to delete. Depending upon the index this external function is capable to delete row from your table. Similar to insertRow() & deleteRow() we have insertColumn() & deleteColumn() method. Using getHeight() & getWidth() external function you can retrieve table width & height in your class. During operations to retrieve the x & y positions of table in this class we declared two additional methods getX() & getY(). These methods are added to the exports array of this method. Which you can easily access from your class. Using setWidth() & setHeight() functions you can set table width & height from your external class. To select the table or it’s cells this class contains Select & Deselect methods. You just need to call them from your class to use. Like this there are plenty of functionality you can get with this class.

This class is well tested by our QA team. I don’t think you will get any problems to implement this class. What problems we faced during a table design I don’t want to give you the same pain. Let us reuse the code.

tableShape.js

/*Table Cell related default values*/
var DEFAULT_CELL_STROKE_WIDTH = 1;
var DEFAULT_CELL_WIDTH = 200;
var DEFAULT_CELL_HEIGHT = 100;
var MIN_CELL_DIM = 25;
var DEFAULT_SPANNER_WIDTH = 5;
/*Table Slitter Default Stroke & Width*/
var DEFAULT_SPLITTER_STROKE = "#000000";
var DEFAULT_SPLITTER_WIDTH = 3;

return exports;
}

The post Design MS-Excel like Table using KineticJS on HTML5 Canvas? appeared first on OneStop Shop.

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>

The post How to Draw Grid on KineticJS Stage? appeared first on OneStop Shop.

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>

The post How Connected Line will move with the Shape using KineticJS? appeared first on OneStop Shop.

KineticJS is a JavaScript Library which allow us to render high performance graphics over a HTML5 Canvas. Let us talk about an Application where we need to draw flowcharts & Lines. From one node to another node while drawing a line I want to show arrow head for the line. To make arrow head line dynamic it required few mathematical calculation. Look at the example below. Here I created line with arrow head.

In the sample application I have two points for the line. Which is declared as x1, y1 & x2, y2. lineArrowConfig holds configuration setting for arrow head line. To draw finally adding the line configuration to layer & using draw method rendering the stage.

To run the below application copy the codes into a notepad file & save it as a html file. Before run the html file make sure you are with Internet Connectivity. Because here I used CDN link to refer KineticJS library.

Demo App to Draw arrow Head Line

<!DOCTYPE html>
<html>
<head>
<title>Example to draw line with Arrow head using 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: 540,
height: 280,
draggable: false
});

/* Declartion of Layer */
var layer = new Kinetic.Layer({
name: 'layer'
});

/*Points for Line Draw*/
var x1 = 100;
var y1 = 100;
var x2 = 200;
var y2 = 200;

var headlen = 10;
var angle = Math.atan2(y2-y1,x2-x1);

/*Configuration settings for Line*/
var lineArrowConfig = new Kinetic.Line({
id: 'SingleArrowLine',
points: [ x1, y1,
x2,
y2,
x2-headlen*Math.cos(angle-Math.PI/6),
y2-headlen*Math.sin(angle-Math.PI/6),
x2,
y2,
x2-headlen*Math.cos(angle+Math.PI/6),
y2-headlen*Math.sin(angle+Math.PI/6)
],
shapeType: "line",
stroke: 'red',
strokeWidth: 2,
lineCap: 'round',
lineJoin: 'round',
draggable: false
});

/*Adding line Configure to Layer*/
layer.add(lineArrowConfig);

stage.add(layer);
stage.draw();

</script>
</body>
</html>

The post How to Draw Arrow Head Line using KineticJS? appeared first on OneStop Shop.

KineticJS is a JavaScript library to interact with HTML5 Canvas. Using KineticJS with less line of codes you can do high performance based animations, layering, drag n drop, filtering etc. KineticJS supports desktop & high end mobile devices. Shapes like Rectangle, Circle, Ellipse, Line & Polygon you can easily draw using KineticJS. After draw the shape to re-size or to rotate the shapes you need marquee.

Marquee is an identity to selected shapes. In this session let us share the marquee class to apply on any shape using KineticJS. Here marquee.js is the class file where all the related functions are added to select a shape. Copy the index.html & marquee.js file to a folder. Open the index file. In this example marquee.js is a JavaScript class. You can refer this in your program. Create an instance of marquee class & using show method apply marquee on the shapes. Using hide method you can remove marquee from the applied shapes.

Index.html

<!DOCTYPE HTML>

<html>

<head>

<title>How to apply marquee on KineticJS Shapes?</title>

<script src=”http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.3.min.js” type=”text/javascript”></script>

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script>

<script src=”marquee.js” type=”text/javascript”></script>

</head>

<body>

<div id=”stagetodraw”></div>

<script type=”text/javascript”>

/* Drawing Stage */

var stage = new Kinetic.Stage({

container: ‘stagetodraw’,

width: 640,

height: 380,

draggable: false

});

/* Drawing Rectangle over Stage */

var bgRectangle = new Kinetic.Rect({

x: 0,

y: 0,

width: stage.getWidth(),

height: stage.getHeight(),

fill: ‘#E5E4E2’,

draggable: false

});

bgRectangle.on(‘click’, function() {

mar.hide();

});

/* Creating a Layer */

var layer = new Kinetic.Layer();

/* Adding base Rectangle to Layer */

layer.add(bgRectangle);

var mar = null;

/* Rectangle for Marquee */

var marqueeRectangle = new Kinetic.Rect({

x: 100,

y: 100,

width: 400,

height: 150,

fill: ‘lightblue’,

draggable: true

});

marqueeRectangle.on(‘click’, function() {

/* Creating instance for marquee class */

mar = new Marquee(marqueeRectangle);

/* Using show method showing marquee for rectangle */

mar.show();

});

/* Adding shape to Layer */

layer.add(marqueeRectangle);

/* Adding Layer to Stage */

stage.add(layer);

</script>

</body>

</html>

Marquee.js

var Marquee = function (shape) {

/* Declaration of marquee settings */

var RESIZE_RECT_FILL_COLOR = “green”;

var RESIZE_CIRCLE_FILL_COLOR = “blue”;

var RESIZE_LINE_STROKE_COLOR = “darkgray”;

var RESIZE_LINE_SHORT_WIDTH = 20;

var RESIZE_RECT_WIDTH_FACTOR = 2;

var RESIZE_CIRCLE_WIDTH_FACTOR = 1;

var STROKE_WIDTH = 5;

var ROT_DEG = 10;

/* Declaring the points for marquee */

var CP_ACTION = {

NONE: 0,

CP_LEFT: 1,

CP_TOP: 2,

CP_RIGHT: 3,

CP_BOTTOM: 4,

CP_TOP_LEFT: 5,

CP_TOP_RIGHT: 6,

CP_BOTTOM_LEFT: 7,

CP_BOTTOM_RIGHT: 8,

CP_ROTATE: 9

};

var exports = {};

var _shape = null;

var _group = null;

var _layer = null;

var _stage = null;

var _bSelected = false;

var _cpAction = null;

var _marX = null;

var _marY = null;

var _marWidth = null;

var _marHeight = null;

function init() {

var stroke = STROKE_WIDTH;

getMarDimensions(stroke);

_group = new Kinetic.Group({

id: “marquee”,

name: “marqueeGroup”,

x: _marX, //0,

y: _marY, //0,

width: _marWidth,

height: _marHeight,

draggable: true

});

// move shape to this group

_shape.setX(0);

_shape.setY(0);

_shape.moveTo(_group);

// resizing border lines

createBorderLines(stroke / 2, 0, 0, _marHeight, _marWidth, false);

// control points

createControlPoints(stroke, 0, 0, _marHeight, _marWidth, false);

_layer.add(_group);

_stage.draw();

}

/* Show method to display marquee */

exports.show = function () {

_bSelected = true;

for (i = 0; i < _group.children.length; i++) {

_group.children[i].show();

}

_group.setDraggable(true);

_shape.setDraggable(true);

_stage.draw();

};

/* Hide method to hide marquee */

exports.hide = function () {

_bSelected = false;

for (i = 0; i < _group.children.length; i++) {

if (_group.children[i]._id != _shape._id) {

_group.children[i].hide();

}

}

_group.setDraggable(false);

_shape.setDraggable(false);

_stage.draw();

};

exports.refresh = function (prevX, prevY) {

var stroke = STROKE_WIDTH;

getMarDimensions(stroke);

createBorderLines(stroke, 0, 0, _marHeight, _marWidth, true);

createControlPoints(stroke, 0, 0, _marHeight, _marWidth, true);

_stage.draw();

}

function getMarDimensions(stroke) {

var offset = _shape.getOffset();

var scale = _shape.getScale();

switch (_shape.shapeType) {

case“Rect”:

_marWidth = _shape.getWidth() * scale.x;

_marHeight = _shape.getHeight() * scale.y;

_marX = (_shape.getX());

_marY = (_shape.getY());

break;

default:

_marWidth = 100;

_marHeight = 100;

break;

}

}

/* Function to draw border line for a shape */

function createBorderLines(stroke, x, y, height, width, refresh) {

if (refresh) {

var borderLines = _group.get(“.borderLines”)[0];

borderLines.setPoints([x + (width / 2), y – RESIZE_LINE_SHORT_WIDTH,

x + (width / 2), y,

x + width, y,

x + width, y + height,

x, y + height,

x, y,

x + (width / 2), y]);

}

else {

var borderLines = new Kinetic.Line({

id: “marquee”,

name: “borderLines”,

points: [x + (width / 2), y – RESIZE_LINE_SHORT_WIDTH,

x + (width / 2), y,

x + width, y,

x + width, y + height,

x, y + height,

x, y,

x + (width / 2), y],

dashArray: [STROKE_WIDTH, STROKE_WIDTH, STROKE_WIDTH, STROKE_WIDTH],

stroke: RESIZE_LINE_STROKE_COLOR,

strokeWidth: stroke,

lineCap: ’round’,

lineJoin: ’round’,

draggable: true,

dragOnTop: false

});

borderLines.on(“mouseenter”, function (evt) {

$(“body”).css(“cursor”, “move”);

});

borderLines.on(“mouseleave”, function (evt) {

$(“body”).css(“cursor”, “default”);

});

_group.add(borderLines);

}

}

function handleResizeRotate(anchor) {

if (anchor) {

var prevX = _marX;

var prevY = _marY;

var currX = _marX + anchor.getX();

var currY = _marY + anchor.getY();

var scale = _shape.getScale();

var offset = _shape.getOffset();

var width = _shape.getWidth();

var height = _shape.getHeight();

var aspectRatio = width / height;

switch (anchor.getName()) {

case“cpRotate”:

var haf = prevX + ((width * scale.x) / 2);

var isRight = currX > haf ? true : false;

//center origin so rotation happens around center of group

if (!_group.hasAdjustedForRotation) {

_group.setOffset(_group.getWidth() / 2, _group.getHeight() / 2);

_group.move(_group.getScale().x * (_group.getWidth() / 2), _group.getScale().y * (_group.getHeight() / 2));

_group.hasAdjustedForRotation = true;

}

if (isRight) {

_group.rotateDeg(1);

}

else {

_group.rotateDeg(-1);

}

exports.refresh();

break;

case“cpTop”:

currY += (anchor.getHeight() / 2);

var diffY = (currY – prevY) / scale.y;

_shape.setHeight(parseFloat(height – diffY), anchor);

_group.setY(_group.getY() + (diffY * scale.y));

exports.refresh();

break;

case“cpLeft”:

currX += (anchor.getWidth() / 2);

var diffX = (currX – prevX) / scale.x;

_shape.setWidth(parseFloat(width – diffX), anchor);

_group.setX(_group.getX() + (diffX * scale.x));

exports.refresh();

break;

case“cpTopLeft”:

currY += (anchor.getHeight() / 2);

currX += (anchor.getWidth() / 2);

var diffX = (currX – prevX) / scale.x;

var diffY = (currY – prevY) / scale.y;

_shape.setWidth(parseFloat(width – diffX), anchor);

_shape.setHeight(parseFloat(height – diffY), anchor);

_group.setX(_group.getX() + (diffX * scale.x));

_group.setY(_group.getY() + (diffY * scale.y));

exports.refresh();

break;

case“cpBottomLeft”:

currY -= (anchor.getHeight() / 2);

currX += (anchor.getWidth() / 2);

var diffX = (currX – prevX) / scale.x;

var diffY = (currY – prevY) / scale.y;

_shape.setWidth(parseFloat(width – diffX), anchor);

_shape.setHeight(parseFloat(height + parseFloat(diffY – height)), anchor);

_group.setX(_group.getX() + (diffX * scale.x));

exports.refresh();

break;

case“cpRight”:

currX += (anchor.getWidth() / 2);

var diffX = (currX – prevX) / scale.x;

_shape.setWidth(parseFloat(width + parseFloat((diffX – width))), anchor);

exports.refresh();

break;

case“cpTopRight”:

currY += (anchor.getHeight() / 2);

currX -= (anchor.getWidth() / 2);

var diffX = (currX – prevX) / scale.x;

var diffY = (currY – prevY) / scale.y;

_shape.setWidth(parseFloat(width + parseFloat(diffX – width)), anchor);

_shape.setHeight(height – diffY, anchor);

_group.setY(_group.getY() + (diffY * scale.y));

exports.refresh();

break;

case“cpBottomRight”:

currY += (anchor.getHeight() / 2);

currX += (anchor.getWidth() / 2);

var diffX = (currX – prevX) / scale.x;

var diffY = (currY – prevY) / scale.y;

_shape.setWidth(parseFloat(width + parseFloat(diffX – width)), anchor);

_shape.setHeight(parseFloat(height + parseFloat(diffY – height)), anchor);

_group.setWidth(parseFloat(width + parseFloat(diffX – width)));

_group.setHeight(parseFloat(height + parseFloat(diffY – height)));

exports.refresh();

break;

case“cpBottom”:

currY += (anchor.getHeight() / 2);

var diffY = (currY – prevY) / scale.y;

_shape.setHeight(parseFloat(height + parseFloat(diffY – height)), anchor);

exports.refresh();

break;

default:

break;

}

}

}

function createControlPoints(stroke, x, y, height, width, refresh) {

// rotate control point

if (refresh) {

var cpRotate = _group.get(“.cpRotate”)[0];

cpRotate.setX(x + (width / 2));

cpRotate.setY(y – RESIZE_LINE_SHORT_WIDTH);

}

else {

var cpRotate = new Kinetic.Circle({

id: “marquee”,

name: “cpRotate”,

x: x + (width / 2),

y: y – RESIZE_LINE_SHORT_WIDTH,

radius: stroke * RESIZE_CIRCLE_WIDTH_FACTOR,

stroke: RESIZE_CIRCLE_FILL_COLOR,

fill: RESIZE_CIRCLE_FILL_COLOR,

draggable: true,

dragOnTop: false

});

cpRotate.on(“mouseenter”, function (evt) {

$(“body”).css(“cursor”, “wait”);

});

cpRotate.on(“mouseleave”, function (evt) {

$(“body”).css(“cursor”, “default”);

});

cpRotate.on(“mousedown”, function () {

_cpAction = CP_ACTION.CP_ROTATE;

_group.setDraggable(false);

});

cpRotate.on(“mouseup dragend”, function () {

_cpAction = CP_ACTION.NONE;

_group.setDraggable(true);

});

cpRotate.on(“dragmove”, function (evt) {

handleResizeRotate(cpRotate);

});

_group.add(cpRotate);

}

// resizing left control point

if (refresh) {

var cpLeft = _group.get(“.cpLeft”)[0];

cpLeft.setX(x – stroke);

cpLeft.setY(y – stroke + (height / 2));

}

else {

var cpLeft = new Kinetic.Rect({

id: “marquee”,

name: “cpLeft”,

x: x – stroke,

y: y – stroke + (height / 2),

width: stroke * RESIZE_RECT_WIDTH_FACTOR,

height: stroke * RESIZE_RECT_WIDTH_FACTOR,

stroke: RESIZE_RECT_FILL_COLOR,

fill: RESIZE_RECT_FILL_COLOR,

draggable: true,

dragOnTop: false

});

cpLeft.on(“mouseenter”, function (evt) {

$(“body”).css(“cursor”, “e-resize”);

});

cpLeft.on(“mouseleave”, function (evt) {

$(“body”).css(“cursor”, “default”);

});

cpLeft.on(“mousedown”, function (evt) {

_cpAction = CP_ACTION.CP_LEFT;

_group.setDraggable(false);

});

cpLeft.on(“mouseup dragend”, function (evt) {

_cpAction = CP_ACTION.NONE;

_group.setDraggable(true);

});

cpLeft.on(“dragmove”, function (evt) {

handleResizeRotate(cpLeft);

});

_group.add(cpLeft);

}

// resizing right control point

if (refresh) {

var cpRight = _group.get(“.cpRight”)[0];

cpRight.setX(x – stroke + width);

cpRight.setY(y – stroke + (height / 2));

}

else {

var cpRight = new Kinetic.Rect({

id: “marquee”,

name: “cpRight”,

x: x – stroke + width,

y: y – stroke + (height / 2),

width: stroke * RESIZE_RECT_WIDTH_FACTOR,

height: stroke * RESIZE_RECT_WIDTH_FACTOR,

stroke: RESIZE_RECT_FILL_COLOR,

fill: RESIZE_RECT_FILL_COLOR,

draggable: true,

dragOnTop: false

});

cpRight.on(“mouseenter”, function (evt) {

$(“body”).css(“cursor”, “e-resize”);

});

cpRight.on(“mouseleave”, function (evt) {

$(“body”).css(“cursor”, “default”);

});

cpRight.on(“mousedown”, function () {

_cpAction = CP_ACTION.CP_RIGHT;

_group.setDraggable(false);

});

cpRight.on(“mouseup dragnend”, function (evt) {

_cpAction = CP_ACTION.NONE;

_group.setDraggable(true);

});

cpRight.on(“dragmove”, function (evt) {

handleResizeRotate(cpRight);

});

_group.add(cpRight);

}

if (_shape.shapeType == “Line”)

return;

// resizing top control point

if (refresh) {

var cpTop = _group.get(“.cpTop”)[0];

cpTop.setX(x – stroke + (width / 2));

cpTop.setY(y – stroke);

}

else {

var cpTop = new Kinetic.Rect({

id: “marquee”,

name: “cpTop”,

x: x – stroke + (width / 2),

y: y – stroke,

width: stroke * RESIZE_RECT_WIDTH_FACTOR,

height: stroke * RESIZE_RECT_WIDTH_FACTOR,

stroke: RESIZE_RECT_FILL_COLOR,

fill: RESIZE_RECT_FILL_COLOR,

draggable: true,

dragOnTop: false

});

cpTop.on(“mouseenter”, function (evt) {

$(“body”).css(“cursor”, “s-resize”);

});

cpTop.on(“mouseleave”, function (evt) {

$(“body”).css(“cursor”, “default”);

});

cpTop.on(“mousedown”, function () {

_cpAction = CP_ACTION.CP_TOP;

_group.setDraggable(false);

});

cpTop.on(“mouseup dragnend”, function () {

_cpAction = CP_ACTION.NONE;

_group.setDraggable(true);

});

cpTop.on(“dragmove”, function (evt) {

handleResizeRotate(cpTop);

});

_group.add(cpTop);

}

// resizing bottom control point

if (refresh) {

var cpBottom = _group.get(“.cpBottom”)[0];

cpBottom.setX(x – stroke + (width / 2));

cpBottom.setY(y – stroke + height);

}

else {

var cpBottom = new Kinetic.Rect({

id: “marquee”,

name: “cpBottom”,

x: x – stroke + (width / 2),

y: y – stroke + height,

width: stroke * RESIZE_RECT_WIDTH_FACTOR,

height: stroke * RESIZE_RECT_WIDTH_FACTOR,

stroke: RESIZE_RECT_FILL_COLOR,

fill: RESIZE_RECT_FILL_COLOR,

draggable: true,

dragOnTop: false

});

cpBottom.on(“mouseenter”, function (evt) {

$(“body”).css(“cursor”, “s-resize”);

});

cpBottom.on(“mouseleave”, function (evt) {

$(“body”).css(“cursor”, “default”);

});

cpBottom.on(“mousedown”, function () {

_cpAction = CP_ACTION.CP_BOTTOM;

_group.setDraggable(false);

});

cpBottom.on(“mouseup dragnend”, function () {

_cpAction = CP_ACTION.NONE;

_group.setDraggable(true);

});

cpBottom.on(“dragmove”, function (evt) {

handleResizeRotate(cpBottom);

});

_group.add(cpBottom);

}

// resizing top-left control point

if (refresh) {

var cpTopLeft = _group.get(“.cpTopLeft”)[0];

cpTopLeft.setX(x);

cpTopLeft.setY(y);

}

else {

var cpTopLeft = new Kinetic.Circle({

id: “marquee”,

name: “cpTopLeft”,

x: x,

y: y,

radius: stroke * RESIZE_CIRCLE_WIDTH_FACTOR,

stroke: RESIZE_CIRCLE_FILL_COLOR,

fill: RESIZE_CIRCLE_FILL_COLOR,

draggable: true,

dragOnTop: false

});

cpTopLeft.on(“mouseenter”, function (evt) {

$(“body”).css(“cursor”, “se-resize”);

});

cpTopLeft.on(“mouseleave”, function (evt) {

$(“body”).css(“cursor”, “default”);

});

cpTopLeft.on(“mousedown”, function () {

_cpAction = CP_ACTION.CP_TOP_LEFT;

_group.setDraggable(false);

});

cpTopLeft.on(“mouseup dragnend”, function () {

_cpAction = CP_ACTION.NONE;

_group.setDraggable(true);

});

cpTopLeft.on(“dragmove”, function (evt) {

handleResizeRotate(cpTopLeft);

});

_group.add(cpTopLeft);

}

// resizing top-right control point

if (refresh) {

var cpTopRight = _group.get(“.cpTopRight”)[0];

cpTopRight.setX(x + width);

cpTopRight.setY(y);

}

else {

var cpTopRight = new Kinetic.Circle({

id: “marquee”,

name: “cpTopRight”,

x: x + width,

y: y,

radius: stroke * RESIZE_CIRCLE_WIDTH_FACTOR,

stroke: RESIZE_CIRCLE_FILL_COLOR,

fill: RESIZE_CIRCLE_FILL_COLOR,

draggable: true,

dragOnTop: false

});

cpTopRight.on(“mouseenter”, function (evt) {

$(“body”).css(“cursor”, “ne-resize”);

});

cpTopRight.on(“mouseleave”, function (evt) {

$(“body”).css(“cursor”, “default”);

});

cpTopRight.on(“mousedown”, function () {

_cpAction = CP_ACTION.CP_TOP_RIGHT;

_group.setDraggable(false);

});

cpTopRight.on(“mouseup dragnend”, function () {

_cpAction = CP_ACTION.NONE;

_group.setDraggable(true);

});

cpTopRight.on(“dragmove”, function (evt) {

handleResizeRotate(cpTopRight);

});

_group.add(cpTopRight);

}

// resizing bottom-left control point

if (refresh) {

var cpBottomLeft = _group.get(“.cpBottomLeft”)[0];

cpBottomLeft.setX(x);

cpBottomLeft.setY(y + height);

}

else {

var cpBottomLeft = new Kinetic.Circle({

id: “marquee”,

name: “cpBottomLeft”,

x: x,

y: y + height,

radius: stroke * RESIZE_CIRCLE_WIDTH_FACTOR,

stroke: RESIZE_CIRCLE_FILL_COLOR,

fill: RESIZE_CIRCLE_FILL_COLOR,

draggable: true,

dragOnTop: false

});

cpBottomLeft.on(“mouseenter”, function (evt) {

$(“body”).css(“cursor”, “sw-resize”);

});

cpBottomLeft.on(“mouseleave”, function (evt) {

$(“body”).css(“cursor”, “default”);

});

cpBottomLeft.on(“mousedown”, function () {

_cpAction = CP_ACTION.CP_BOTTOM_LEFT;

_group.setDraggable(false);

});

cpBottomLeft.on(“mouseup dragnend”, function () {

_cpAction = CP_ACTION.NONE;

_group.setDraggable(true);

});

cpBottomLeft.on(“dragmove”, function (evt) {

handleResizeRotate(cpBottomLeft);

});

_group.add(cpBottomLeft);

}

// resizing bottom-right control point

if (refresh) {

var cpBottomRight = _group.get(“.cpBottomRight”)[0];

cpBottomRight.setX(x + width);

cpBottomRight.setY(y + height);

}

else {

var cpBottomRight = new Kinetic.Circle({

id: “marquee”,

name: “cpBottomRight”,

x: x + width,

y: y + height,

radius: stroke * RESIZE_CIRCLE_WIDTH_FACTOR,

stroke: RESIZE_CIRCLE_FILL_COLOR,

fill: RESIZE_CIRCLE_FILL_COLOR,

draggable: true,

dragOnTop: false

});

cpBottomRight.on(“mouseenter”, function (evt) {

$(“body”).css(“cursor”, “se-resize”);

});

cpBottomRight.on(“mouseleave”, function (evt) {

$(“body”).css(“cursor”, “default”);

});

cpBottomRight.on(“mousedown”, function () {

_cpAction = CP_ACTION.CP_BOTTOM_RIGHT;

_group.setDraggable(false);

});

cpBottomRight.on(“mouseup dragnend”, function () {

_cpAction = CP_ACTION.NONE;

_group.setDraggable(true);

});

cpBottomRight.on(“dragmove”, function (evt) {

handleResizeRotate(cpBottomRight);

});

_group.add(cpBottomRight);

}

}

_shape = shape;

_layer = shape.getLayer();

_stage = shape.getStage();

init();

return exports;

};

The post How to Apply Marquee on KineticJS Shapes? appeared first on OneStop Shop.

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>

The post How to Draw Line using Mouse in KineticJS? appeared first on OneStop Shop.

KineticJS is a JavaScript library. It is light weight & provides better graphics. Let’s assume you want to develop an Interactive design document app. Here what you want is you need 3 panels left, right & center. Left panel is the toolbar. From where you can drag any shape to the center area. Where center area is a HTML5 Canvas. Here depending upon the requirements you can resize the shape, you can drag it to any corner of your central area, you can layer the shape or you can rotate the shape. While you selected a shape on canvas in right pan you can saw the property for that particular shape. If you will update the properties value it will reflect on the shape. In this case KineticJS is programmer friendly. Using kineticJS we can create shapes like Rectangle, Circle, Polygon, line & Ellipse.

Example to Draw shapes using KineticJS

To draw a shape using KineticJS in below program first I created a stage. On stage creating layer. Using configuration setting I am creating various shapes & adding this to layer. Finally adding layer to stage. To draw using stage.draw method.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example to Draw Shapes using 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="canvasarea"></div>

<script type="text/jscript">
// Prepeare your stage first before draw a shape.
var stage = new Kinetic.Stage({
container: 'canvasarea',
width: 600,
height: 500,
draggable: false
});

// After stage you need a layer to draw shapes on this.
var layer = new Kinetic.Layer();

// How to draw a rectanlge using KineticJS?
var configRectangle = new Kinetic.Rect({
x: 339,
y: 60,
width: 200,
height: 80,
fill: 'lightblue',
stroke: 'black',
strokeWidth: 5,
draggable: true
});

// Add rectangle configuration settings to layer
layer.add(configRectangle);

// How to draw a circle using KineticJS?
var configCircle = new Kinetic.Circle({
x: 150,
y: 280,
radius: 70,
fill: 'lightblue',
stroke: 'black',
strokeWidth: 5,
draggable: true
});

// Add circle configuration settings to layer
layer.add(configCircle);

// How to draw a polygon using KineticJS?
var configPolygon = new Kinetic.Polygon({
points: [400, 392, 430, 320, 500, 280, 470, 209, 339, 239, 400, 392],
fill: 'lightblue',
stroke: 'black',
strokeWidth: 5,
draggable: true
});

// Add polygon configuration settings to layer
layer.add(configPolygon);

// How to draw a line using KineticJS?
var configLine = new Kinetic.Line({
points: [70, 450, 250, 450],
stroke: 'lightblue',
strokeWidth: 7,
lineCap: 'round',
lineJoin: 'round',
draggable: true
});

// Add line configuration settings to layer
layer.add(configLine);

// How to draw a ellipse using KineticJS?
var configEllipse = new Kinetic.Ellipse({
x: 150,
y: 100,
radius: {
x: 100,
y: 50
},
fill: 'lightblue',
stroke: 'black',
strokeWidth: 5,
draggable: true
});

// Add ellipse configuration settings to layer
layer.add(configEllipse);

// To present Add the layer to the stage
stage.add(layer);
stage.draw();
</script>
</body>
</html>

The post How to Draw Graphical Shapes using KineticJS? appeared first on OneStop Shop.