How to add a text on image in kineticjs

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
Advertisements

Javascript closure

Javascript closure !! javascript closure !! javascript closure !!

WTH is this?? its being defined differently in each websites..how do we understand in an quickmanner ūüė¶

Feeling¬†embarrassed with this ūüė¶

Anyways will try to understand the best from myside and explain you in a simple manner ūüôā

First, what is the meaning of closure,lexical??

Closure:¬†A closure is how a function ‚Äúcloses over‚ÄĚ (Crockford) its variables and creates a different scope for them out of the way of the global [window] scope. So an understanding of closures will require some understanding of scope, which is definitely a common stumbling block in first learning JavaScript.

(or)

A closure is the local variables for a function – kept alive after the function has returned, or

A closure is a function defined within another scope that has access to all the variables within the outer scope.

A closure is a stack-frame which is not deallocated when the function returns. (as if a ‘stack-frame’ were malloc’ed instead of being on the stack!)

Lexical:

The word ‚Äúlexical‚ÄĚ means, in a broad sense ‚Äúrelating to text‚ÄĚ, and clearly we have defined ‚Äúscope‚ÄĚ as being a relationship involving text, so is this kind of scoping also called ‚Äúlexical scoping‚ÄĚ?

Lexical scoping is a fancy term that refers to a function remembering and preserving its state between and after executions.

 

OMG!! Omg!! it cant be explain in simple..its being used for different purposes..how to make it simple :/

First get an idea like what is local and global variables and what the exact scope of it, from here

A function doesn’t have to¬†return¬†in order to be called a closure.¬†Simply accessing variables outside of your immediate lexical scope creates a closure.

function foo(x){
var tmp =3;returnfunction(y){
    alert(x + y +(++tmp));// will also alert 16
}
}
var bar = foo(2);// bar is now a closure.
bar(10);

Here’s a slightly more interesting example ‚ÄĒ a¬†makeAdder¬†function:

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2));  // 7
console.log(add10(2)); // 12
 In this example, we have defined a function makeAdder(x) which takes a single argument x and returns a new function. The function it returns takes a single argument y, and returns the sum of x and y.

In essence,¬†makeAdder¬†is a function factory ‚ÄĒ it creates functions which can add a specific value to their argument. In the above example we use our function factory to create two new functions ‚ÄĒ one that adds 5 to its argument, and one that adds 10.

add5¬†and¬†add10¬†are both closures. They share the same function body definition, but store different environments. In¬†add5‘s environment,¬†x¬†is 5. As far as¬†add10¬†is concerned,¬†x¬†is 10.

 Another example:

A closure is a function defined within another scope that has access to all the variables within the outer scope.

Using closure to hide state

Imagine this piece of code:

greet_plain.js

function greet(message) {
  console.log(message);
}

function greeter(name, age) {
  return name + ", who is " + age + " years old, says hi!";
}

// Generate the message
var message = greeter("Bob", 47);

// Pass it explicitly to greet
greet(message);

We’re manually passing the internal state around so that the other functions can get ahold of it. I mean, it works and is really simple, but assuming you never need the generated message string outside of the greet function, what’s the point of making the user of the API handle internal data for you. Also what if later on the greet function needed some other data, you would have to change everything to pass along more variables.

Clearly there must be a better way.

My favorite use of closure is to call a function that generates another function or group of functions but hides all the state in private variables within the closure:

greeter.js

function greeter(name, age) {
  var message = name + ", who is " + age + " years old, says hi!";

  return function greet() {
    console.log(message);
  };
}

// Generate the closure
var bobGreeter = greeter("Bob", 47);

// Use the closure
bobGreeter();

Note that the greet function is nested within the greeter function. This means it’s within the lexical scope of greeterand thus according to the rules of closure has access to the local variables of greeter including message, name, andage.

 

More:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures

http://javascriptweblog.wordpress.com/2010/10/25/understanding-javascript-closures/

http://davidbcalhoun.com/2011/what-is-a-closure-in-javascript/

http://howtonode.org/why-use-closure

 

My Example:

function makeAdder(x) {
return function (x) {
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(),
y: bet.getY() + 30,
text: ”,
fill: ‘red’,
fontFamily: ‘Cambria’,
fontSize: 19,
fontStyle: ‘bold’,
width: 118,
height: 100,
align: “center”,
verticalAlign: “middle”
});
text.setText(arg1);
group.add(text);
layer.draw();
};
imageObj.src = ‘bet_chips/’ + i + ‘.png’;
// bet.setZIndex(zI);
// zI = zI + 1;
};
}
// console.log(total);

var add5 = makeAdder(i);
add5(i);