Category: KineticJs

Kineticjs Cloning example

Published on by sathyalogLeave a comment

<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
canvas {
border: 1px solid #9C9898;
}
</style>
<script src=”http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js”></script&gt;
<script>
window.onload = function() {
var stage = new Kinetic.Stage({
container: ‘container’,
width: 578,
height: 200
});

var layer = new Kinetic.Layer();

var rect = new Kinetic.Rect({
x: 239,
y: 75,
width: 100,
height: 50,
fill: ‘green’,
stroke: ‘black’,
strokeWidth: 4,
draggable:true
});

var clone = rect.clone();
clone.setX(10);clone.setY(10);
// add the clone to the layer
layer.add(rect).add(clone);

// add the layer to the stage
stage.add(layer);
};

</script>
</head>
<body>
<div id=”container”></div>
</body>
</html>

 

Check in jsfiddle

Advertisements

Angularjs with kineticjs??

Published on by sathyalogLeave a comment

Folks,

Can this be possible?? First we will know what are these different frameworks? what similarities and dissimilarities do they hold?

AngularJS is great at binding DOM elments.

But KineticJS objects are not DOM elements—they are just pixels on the canvas.

So AngularJS can’t control Kinetic objects directly.

To get Kinetic objects to move in response to text-input changes, you could use an AngularJS controller and make calls to the Kinetic object’s setX/setY.

To get text-input values to change as Kinetic objects are dragged, you might call the AngularJS controller from within a Kinetic dragmove event handler.

A complication is that by default, both Angular and Kinetic will want to control mouse events for their own purposes.

I’m not saying it can’t be done, but…

Integrating KineticJS + AngularJS is more complicated

How to add a text on image in kineticjs

Published on by sathyalogLeave a comment

Folks,

I have been searching for a longtime to write text on image in kineticjs..but its none of use..in some articles they mentioned we can use z-index like below..zI should be given with integer..

bet.setZIndex(zI);

But i sort it out without using that by placing kinetic text in kinetic image like shown below..

                                var imageObj = new Image();
 
                                imageObj.onload = function () {
                                    bet = new Kinetic.Image({
                                        x: xaxis,
                                        y: yaxis,
                                        image: imageObj
                                    });
                                    group.add(bet);
                                    layer.add(group);
                                    yaxis = yaxis - 7;
                                    var text = new Kinetic.Text({
                                        x: bet.getX(),//get x coordinate of image
                                        y: bet.getY() + 30, // get y coordinate of image
                                        text: '',
                                        fill: 'red',
                                        fontFamily: 'Cambria',
                                        fontSize: 19,
                                        fontStyle: 'bold',
                                        width: 118,
                                        height: 100,
                                        align: "center",
                                        verticalAlign: "middle"
                                    });
                                    text.setText(arg1); //set text on your image
                                    group.add(text);
                                    layer.draw(); 
 
 
                                };
                                imageObj.src = 'bet_chips/' + i + '.png';//image source