I would like to use pen tool (like photo shop) using kineticjs, I don't have any idea about how to achieve this.
whether it is possible or not?. If possible means help me to find out the solution.
I am using kinetic-v5.0.1.min.js and kinetic-v5.0.1.js files.
Thanks in advance.
What did you try? What did you find after you searched? Anyway, You'll have to listen for mouse events on the stage and then draw a Kinetic.Line. Those two questions on Stackoverflow should help you, in case you didn't see them.
Here is a complete solution.
Working Demo: http://jsfiddle.net/JSdc2/LjJ8W/
document.body.addEventListener( 'mousedown', startListening, false );
// -- /init
// add ins for testing
var stage = new Kinetic.Stage({
width: window.innerWidth - 30,
height: window.innerHeight - 70,
container: 'container'
});
var freeHandLayer = new Kinetic.Layer({
x:0,
y:0,
width: window.innerWidth/2,
height: window.innerHeight/2
});
var background = new Kinetic.Rect({
width: window.innerWidth - 30,
height: window.innerHeight - 70,
fill: '#DDDDDD'
});
freeHandLayer.add( background );
stage.add( freeHandLayer );
// -- /add ins
var ctx = freeHandLayer.getContext('2d');
// ------- freeHand Functions
// thanks to http://nick.zoic.org/
function draw_marker(x, y, r) {
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI*2);
ctx.closePath();
ctx.fillStyle = "#0F0";
ctx.fill();
}
function draw_segment(x1, y1, x2, y2) {
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.strokeStyle = "#0F0";
ctx.stroke();
ctx.closePath();
}
// -----
var pos, ox, oy, xys, nx, ny, dx, dy, dd;
var points = [];
var xnums = [];
var ynums = [];
function startListening() {
points=[]; // clear array
xnums=[];
ynums=[];
pos = stage.getPointerPosition();
ox = pos.x;
oy = pos.y;
xnums[0] = ox;
ynums[0] = oy;
document.body.removeEventListener( 'mousedown', startListening );
document.body.addEventListener( 'mousemove', handleMovement, false );
}
function handleMovement() {
document.body.addEventListener('mouseup', finalizeSpline, false );
pos = stage.getPointerPosition();
nx = pos.x;
ny = pos.y;
dx = nx - ox;
dy = ny - oy;
dd = Math.sqrt(dx*dx + dy*dy);
if (dd > 10) {
draw_segment(ox, oy, nx, ny);
xnums.push(nx);
ynums.push(ny);
ox = nx;
oy = ny;
}
}
var ID = 0;
var customShape = [];
function finalizeSpline() {
ID++;
document.body.removeEventListener('mousemove', handleMovement );
document.body.removeEventListener('mouseup', finalizeSpline );
for ( var i = 0; i < xnums.length; i++ ) {
points.push (xnums[ i ]);
points.push (ynums[ i ]);
}
// Create a Group for the new shape to live inside
customShape[ID] = new Kinetic.Group({
x: 0,
y: 0,
rotationDeg: 0
});
customShape[ID].id = 'L06customShape' + ID;
customShape[ID].attrs.id = 'L06customShape' + ID;
customShape[ID].selectable = true;
customShape[ID].selectStyle = "group" ;
customShape[ID].colorable = true;
customShape[ID].colorStyle = "single" ;
customShape[ID].description = "A custom shape." ;
customShape[ID].difficulty = 1;
// Create the shape from user input
var spline = new Kinetic.Line({
id:'L06spline' + ID,
points: points, // uses the points we collected from user pointer movement
tension: 0, // TO DO: don't like the range Kinetic offers 0 to 1, create something better.
closed: false,
fill: '#ccc',
draggable: true
});
// add some tweaks
customShape[ID].on('mousedown touchstart', function( e ) { signals.mouseDown.dispatch( this, e ); });
customShape[ID].on('mouseup touchend', function( e ) { signals.mouseUp.dispatch( this, e ); });
customShape[ID].add( spline );
customShape[ID].className = 'Blob';
freeHandLayer.add( customShape[ID] );
document.body.addEventListener( 'mousedown', startListening, false );
}
function getPointerPos( e ) {
var position = ctx.getBoundingClientRect();
return {
x: e.clientX - position.left,
y: e.clientY - position.top
};
}
