Question

我正在尝试使用KineticJs，并希望拥有对象，因此我可以轻松处理这些元素。

这是我的代码。它不起作用，我不知道为什么。（我真的不知道oop，只是学习）

 $(function(){     
    var stage = new Kinetic.Stage({
        container: 'gridalea',
        width: 172,
        height: 720
    });

    var color_layer = new Kinetic.Layer();
    var sh_layer = new Kinetic.Layer();

    var Left={
        light: {
            frame: function(){
                poly = new Kinetic.Polygon({
                    points: [70, 0, 0, 22, 0, 672, 70, 720, 70, 710, 6, 667, 6, 29, 70, 10, 70, 0],
                    stroke: 'white',
                    strokeWidth: 1
                });
                // add the shape to the layer
                color_layer.add(poly);
                stage.add(color_layer); 
            },
            fill: function(color){
                poly.setFill(color);
            }
        },
        dark: {
            frame: function(){
                var poly = new Kinetic.Polygon({
                    points: [6, 193, 6, 667, 11, 663, 11, 440, 6, 437, 6, 427, 11, 425, 11, 193, 6, 193],
                    stroke: 'white',
                    strokeWidth: 1
                });
                // add the shape to the layer
                color_layer.add(poly);
                stage.add(color_layer); 
            },
            fill: function(color){
                poly.setFill(color);
            }
        },
    }
    Left.light.frame();
    Left.light.fill('red');
});

我打算做的是能够在创建多边形之后设置多边形的填充颜色，我必须处理图像的很多部分，所以我使用对象使其变得简单。你能指出我的代码存在的问题吗？我知道我知道自己很蹩脚，我只需要你的帮助。

编辑：当我添加

Left.dark.frame();
Left.dark.fill('red');

之后

Left.light.frame();
Left.light.fill('red');

Left.light.frame（）变为红色，但Left.dark.frame（）不是

Answer 1

问题是我填写后必须将图层添加到舞台上！

stage.add(color_layer);

走到最底层

Answer 2

您的fill功能最后应该有color_layer.draw()或stage.draw()。

为什么它在编辑中提到的工作：

基本上，当您在调用Left.dark.frame()之后调用Left.light时，您要将另一个对象添加到图层并尝试将图层添加回舞台，其中一个（我不确定哪个目前可以查看源代码，但是调用draw()方法。我的猜测是，最有可能的是调用将图层再次添加到舞台上，这会刷新画布，并且您会看到Light多边形的填充颜色。

之后设置对象的属性？

2 个答案: