Question

我尝试使用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);

这没效果

        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>

Answer 1

该组缺少绘制功能。这有效：

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

KineticJS分组图像

1 个答案: