0

例如，我有以下创建多边形：

            var poly = new Kinetic.Polygon({
                x: coorx,
                y: coory,
                points: coords,
                alpha: 0,
                fill: colors[Math.floor(Math.random() * colors.length)],
                name: myname
            });

我想做的是有两个类名，例如“rect-1”和“rect-2”。我希望某些形状具有其中一个类，有些则两者兼有。

这样做的目的是能够使用get()语法以一种方式转换某些形状，例如不透明度，并以另一种方式转换其他形状，例如偏移：

是否可以像我在这里描述的那样为形状提供多个“类”名称以进行高级选择？

谢谢！

    var shapes = stage.get(".rect-1");

    for(var n = 0; n < shapes.length; n++) {
        var shape = shapes[n];

        shape.transitionTo({
            alpha: (opacities[Math.floor(Math.random() * opacities.length)] * 1.5) + .7,
            duration: 2
        });                 
    }

    var shapes = stage.get(".rect-2");

    for(var n = 0; n < shapes.length; n++) {
        var shape = shapes[n];

        shape.transitionTo({
            offset: {
                x: 10,
                y: 10
            },
            duration: 2
        });                 
    }
4

3 回答 3

8

有趣的用例！我会把它添加到我的待办事项列表中。也许是这样的：

var rect = new Kinetic.Rect({
   name: 'foo bar test'
});

将分配三个不同的名称（类似于 DOM 类名称字符串）

于 2012-08-11T03:34:26.370 回答
3

此对象过滤尚未内置，但一个简单的实现可能是使用该getChildren()方法遍历阶段子级并在此循环中测试条件，例如

if shape.get('classList') && shape.get('classList').indexOf('rect1') !== -1

使用单继承的另一种解决方案可能是使用该方法对 Kinetic.Rect 类进行子类化extend()并重载shapeType属性，这将成为您过滤的关键。

于 2012-08-07T00:47:07.563 回答
0

Kinetic 函数可公开访问，因此您可以轻松地用自己的版本覆盖它。这是我修复它的方法。

Kinetic._addName = function(node, name) {
    if(name !== undefined) {
        var names = name.split(/\W+/g);
        for(var n = 0; n < names.length; n++) {
            if (names[n]) {
                if(this.names[names[n]] === undefined) {
                    this.names[names[n]] = [];
                }
                this.names[names[n]].push(node);
            }
        }
    }
};

Eric，如果你喜欢它，请随时将它添加到 Kinetic。我可能会很快提交一个拉取请求。

于 2014-04-09T03:53:53.613 回答