CODEWITHSUNDEEP
javascriptjqueryhtmlkineticjs
Muhammad Usman
Muhammad Usman

Reputation: 10936

Bind HTML element with the object that is already created

I want to add images on canvas by using library Kinetic.js

The images are loaded from a database after I create the canvas. How I can bind this canvas with the elements that are created after the canvas?

JS Fiddle

HTML

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
    <title>Design</title>
 <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/v4.2.0/kinetic-v4.2.0.min.js" type="text/javascript"></script>
<style>


#wrapper{
width:300px;
height:200px;
margin:auto;
border-radius: 15px;
border: 4px solid black;
}

#container{
height:120px;
width:100%;
border:1px solid red;
}
#items, #cliparts{
height:55px;
border:1px solid green;
width:100%;
}

#items img, #cliparts img {
max-height:50px;
max-width:40px;
padding: 0 5px;
border:2px double white;
}
#items img:hover,  #cliparts img:hover{
border:2px double blue;
cursor:pointer;
}
</style>
</head>

<body>


<div id="wrapper">
  <div id="container">  </div>
  <div id="cliparts">

</div>
</body>


</html>

JavaScript

$(function() {
var stage = new Kinetic.Stage({
    container: "container",
    width: 300,
    height: 100
});

var layer = new Kinetic.Layer();

var clip_group = new Kinetic.Group({
    x: 20,
    y: 10,
    draggable: true,
});                


});

   $('#cliparts').append('<img class="clips" id="clip1" src="http://www.clker.com/cliparts/b/9/8/4/12284231761400606271Ricardo_Black_Boy_-_PNG.svg.med.png">');     


  $('#clip1').live('click', function(){
       var imgObj = new Image();
     imgObj.src= 'http://www.clker.com/cliparts/b/9/8/4/12284231761400606271Ricardo_Black_Boy_-_PNG.svg.med.png';

    imgObj.onload = function(){
        var clip_image = new Kinetic.Image({
                      x: 0,
                      y: 0,
                      image: imgObj,
                      width: 150,
                      height: 138,
                      name: "image",
                    });
       // how to access the following elements
               clip_group.add(clip_image);
                layer.add(clip_group);
                stage.add(layer);
                stage.draw();  
    };     


});

​

​

Upvotes: 0

Views: 676

Answers (1)

PAEz
PAEz

Reputation: 8542

Im not a JQuery person and bad at technical terms so please excuse me if I get something wrong in this explenation, but rest assured the code will work ;)
$(a) is like saying window.onload do a, well you say a is an anonymous function.
With an anonymous function any variables in it will only be in the scope of itself and not window or global.
Later on your trying to accese variables as if they are global or in the scope of window.
So...you can either move all your code into that function or in that function make the variables you want accesed outside of it global.
Here's a few of examples...

Pass the window object to the anonymous function and declare the variables you want global against that... 

$(function(a) {
    a.stage = new Kinetic.Stage({
        container: "container",
        width: 300,
        height: 100
    });

    a.layer = new Kinetic.Layer();

    a.clip_group = new Kinetic.Group({
        x: 20,
        y: 10,
        draggable: true,
    });                


}(window));

http://jsfiddle.net/j234L/1/

Declare your variables against the window object directly... 

$(function() {
    window.stage = new Kinetic.Stage({
        container: "container",
        width: 300,
        height: 100
    });

    window.layer = new Kinetic.Layer();

    window.clip_group = new Kinetic.Group({
        x: 20,
        y: 10,
        draggable: true,
    });                


});

http://jsfiddle.net/j234L/2/

Put everything in the onload function.... 

$(function() {
    window.stage = new Kinetic.Stage({
        container: "container",
        width: 300,
        height: 100
    });

    window.layer = new Kinetic.Layer();

    window.clip_group = new Kinetic.Group({
        x: 20,
        y: 10,
        draggable: true,
    });

    $('#cliparts').append('<img class="clips" id="clip1" src="http://www.clker.com/cliparts/b/9/8/4/12284231761400606271Ricardo_Black_Boy_-_PNG.svg.med.png">');


    $('#clip1').live('click', function() {
        var imgObj = new Image();
        imgObj.src = 'http://www.clker.com/cliparts/b/9/8/4/12284231761400606271Ricardo_Black_Boy_-_PNG.svg.med.png';

        imgObj.onload = function() {
            var clip_image = new Kinetic.Image({
                x: 0,
                y: 0,
                image: imgObj,
                width: 150,
                height: 138,
                name: "image",
            });
            // how to access the following elements
            clip_group.add(clip_image);
            layer.add(clip_group);
            stage.add(layer);
            stage.draw();
        };


    });
});​

http://jsfiddle.net/j234L/3/

Upvotes: 1

Related Questions