0

我想使用库在画布上添加图像Kinetic.js

创建画布后，图像是从数据库中加载的。如何将此画布与画布之后创建的元素绑定？

JS小提琴

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();  
    };     


});

​</p>

​</p>

4

1 回答 1

1

我不是一个 JQuery 人，不擅长技术术语，所以如果我在这个解释中有什么问题，请原谅，但请放心，代码会起作用；）
$(a)就像说 window.onload do a，你说a的是一个匿名函数。
对于匿名函数，其中的任何变量都只会在其自身范围内，而不是window全局范围内。
稍后您尝试访问变量，就好像它们是全局的或在窗口范围内一样。
所以......您可以将所有代码移动到该函数中，或者在该函数中使您想要在其外部访问的变量成为全局变量。
这里有几个例子......

将窗口对象传递给匿名函数并声明您想要全局的变量... 

$(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/

直接针对窗口对象声明变量... 

$(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/

把所有东西都放在onload函数中...... 

$(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/

于 2012-12-19T10:22:26.747 回答