Javascript KineticJS分组图像_Javascript_Image_Kineticjs

Javascript KineticJS分组图像

javascript image

Javascript KineticJS分组图像,javascript,image,kineticjs,Javascript,Image,Kineticjs,我正在尝试使用KineticJS对图像进行分组。我对这一点非常陌生，我试图实现的是一个带有黑色矩形的背景层和另一个包含一个组的子（节点？）图像的背景层。当我将x和y值添加到组中时，图像似乎忽略了更改 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=is

我正在尝试使用KineticJS对图像进行分组。我对这一点非常陌生，我试图实现的是一个带有黑色矩形的背景层和另一个包含一个组的子（节点？）图像的背景层。当我将x和y值添加到组中时，图像似乎忽略了更改

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Canvas</title>
<style>

body {
        margin: 0px;
        padding: 0px;
}

#container {
    background-color:#FFFFFF;
    margin: 0px;
    padding: 0px;
}
</style>


</head>


<body bgcolor="#999999">
    <div id="container"></div>

    <script src="kinetic-v5.0.1.min.js"></script>
    <script defer="defer">

   var stage = new Kinetic.Stage({
        container: 'container',
        width: window.innerWidth,  
        height: window.innerHeight
      });

        var layer1 = new Kinetic.Layer();

        var bg = new Kinetic.Rect({
            x:0,
            y:0,
            width:(window.innerWidth / 100) * 99,
            height:(window.innerHeight / 100) * 99,
            fill: 'black'
        });




      layer1.add(bg);

      stage.add(layer1);


var layer2 = new Kinetic.Layer();   



var group = new Kinetic.Group({
    x: 10,
    y: 15,
 layer2.add(group);


帆布
身体{
边际：0px；
填充：0px；
}
#容器{
背景色：#FFFFFF；
边际：0px；
填充：0px；
}
var阶段=新的动力学阶段({
容器：'容器'，
宽度：window.innerWidth，
高度：window.innerHeight
});
var layer1=新的动能层（）；
var bg=新的动能.Rect({
x:0,，
y:0，
宽度：（窗内宽度/100）*99，
高度：（窗内高度/100）*99，
填充：“黑色”
});
第1层。添加（背景）；
阶段。添加（第1层）；
var layer2=新的动能层（）；
var组=新的动力学组({
x:10，
y:15，
第2层。添加（组）；

这没有效果

        id:"group1"
      });
     layer2.add(group);     

      var tshirtS = new Image();
      tshirtS.onload = function() {
        var tshirtSk = new Kinetic.Image({
          x: 10,
          y: 15,
          image: tshirtS,
          width: 106,
          height: 118
        });

        group.add(tshirtSk);
        layer2.add(tshirtSk);
        stage.add(layer2);
      };
      tshirtS.src = 'tshirt-small.png';



    </script>
</body>
</html>

id:“组1”
});
第2层。添加（组）；
var tshirtS=新图像（）；
tshirtS.onload=函数（）{
var tshirtSk=新的动能图({
x:10，
y:15，
图片：T恤，
宽度：106，
身高：118
});
加组（尖沙咀）；
第2层添加（T恤）；
阶段。添加（第2层）；
};
tshirtS.src='tshirt small.png'；

组上缺少绘图功能。这项工作：

        group.add(tshirtSk);
        group.draw();

该组缺少抽签功能。本作品：group.add（tshirtSk）；group.draw（）；