How to drag drop and resize images in canvas using kineticjs?
Canvas is a new tag of HTML5. This is specially used for graphics designing. So we can design graphics using HTML5 and jquery.
There are many jquery libraries available for drag, drop and resize the image. But how to do these tasks using canvas. Below is the example to do these tasks using canvs.
var stage1;
var layer1;
function update(activeAnchor) {
var group = activeAnchor.getParent();
var topLeft = group.get(‘.topLeft’)[0];
var topRight = group.get(‘.topRight’)[0];
var bottomRight = group.get(‘.bottomRight’)[0];
var bottomLeft = group.get(‘.bottomLeft’)[0];
var image = group.get(‘.image’)[0];
var anchorX = activeAnchor.getX();
var anchorY = activeAnchor.getY();
// update anchor positions
switch (activeAnchor.getName()) {
case ‘topLeft’:
topRight.setY(anchorY);
bottomLeft.setX(anchorX);
break;
case ‘topRight’:
topLeft.setY(anchorY);
bottomRight.setX(anchorX);
break;
case ‘bottomRight’:
bottomLeft.setY(anchorY);
topRight.setX(anchorX);
break;
case ‘bottomLeft’:
bottomRight.setY(anchorY);
topLeft.setX(anchorX);
break;
}
image.setPosition(topLeft.getPosition());
var width = topRight.getX() – topLeft.getX();
var height = bottomLeft.getY() – topLeft.getY();
if(width && height) {
image.setSize(width, height);
}
}
function addAnchor(group, x, y, name) {
var stage = group.getStage();
var layer = group.getLayer();
var anchor = new Kinetic.Circle({
x: x,
y: y,
stroke: ‘#666’,
fill: ‘#ddd’,
strokeWidth: 2,
radius: 8,
name: name,
draggable: true,
dragOnTop: false
});
anchor.on(‘dragmove’, function() {
update(this);
layer.draw();
});
anchor.on(‘mousedown touchstart’, function() {
group.setDraggable(false);
this.moveToTop();
});
anchor.on(‘dragend’, function() {
group.setDraggable(true);
layer.draw();
});
// add hover styling
anchor.on(‘mouseover’, function() {
var layer = this.getLayer();
document.body.style.cursor = ‘pointer’;
this.setStrokeWidth(4);
layer.draw();
});
anchor.on(‘mouseout’, function() {
var layer = this.getLayer();
document.body.style.cursor = ‘default’;
this.setStrokeWidth(2);
layer.draw();
});
group.add(anchor);
}
Function loadImages(imageSrc){
if(isPageLoad){
stage1 = new Kinetic.Stage({
container: ‘stage-frame’,
width: 600,
height: 676
});
layer1 = new Kinetic.Layer();
isPageLoad = false;
}
var yodaGroup = new Kinetic.Group({
x: 100,
y: 120,
draggable: true
});
layer1.add(yodaGroup);
stage1.add(layer1);
var imageObj = new Image();
var yodaImg = new Kinetic.Image({
x: 100,
y: 120,
image: imageObj,
width: 200,
height: 138,
name: ‘image’
});
yodaGroup.add(yodaImg);
yodaGroup.on(‘mouseover’, function() {
document.body.style.cursor = ‘pointer’;
new ProductPrint().addAnchor(yodaGroup, yodaImg.getX(), yodaImg.getY(), ‘topLeft’, ‘none’);
new ProductPrint().addAnchor(yodaGroup, yodaImg.getX()+yodaImg.getWidth(), yodaImg.getY(), ‘topRight’, ‘none’);
new ProductPrint().addAnchor(yodaGroup, yodaImg.getX()+yodaImg.getWidth(), yodaImg.getY()+yodaImg.getHeight(), ‘bottomRight’, ‘none’);
new ProductPrint().addAnchor(yodaGroup, yodaImg.getX(), yodaImg.getY()+yodaImg.getHeight(), ‘bottomLeft’,’none’);
new ProductPrint().addAnchor(yodaGroup, yodaImg.getX()+(yodaImg.getWidth())/2, yodaImg.getY()-5, ‘rotateAnchor’,’rotate’);
layer1.draw();
});
imageObj.src = dataUri;
stage1.draw();
}