javascript - KineticJs group.setSize(300,300) 不工作

Question

我正在尝试更改动力学组的大小。但它给出了 JavaScript 错误消息。

在动力学 js 文档中，它的写入比 setSize 与组节点一起使用

Answer 1

我认为这些文件在这方面有点过时了。组没有 drawFunc，因此它们没有宽度或高度。如果他们确实获得了宽度和高度，则可以创建剪辑组，这会很好。但是，就像现在一样，组仅用于定义其中包含的对象的相对 x 和 y 起始坐标。这使得一次移动多个对象成为可能（拖动、moveTo、事件处理程序等），但仅此而已。

JsFiddle 按要求

var group = new Kinetic.Group({
    x: 220,
    y: 40,
    draggable: true
});

只需使您的组可拖动并将您的对象添加到组中。

Answer 2

文件已过时或错误。无法直接更改组大小

Answer 3

下面的代码将允许您创建具有剪辑属性的组。像一个组一样实例化它，其中宽度和高度是您的剪切框。

Kinetic.Clipper = function(config) {
    this._initGroup(config);
};
Kinetic.Clipper.prototype = {
    _initGroup: function(config) {
        this.nodeType = 'Group';
        Kinetic.Container.call(this, config);
    },
    drawScene: function() {
        if(this.isVisible()) {

            var context = this.getLayer().getContext();
            var width = this.getWidth(), height = this.getHeight();
            context.save();
            context.beginPath();
            context.rect(0, 0, width, height);
            context.clip();

            var children = this.children, len = children.length;
            for(var n = 0; n < len; n++) {
                children[n].drawScene();
            }

            context.restore();
        }
    },
};
Kinetic.Global.extend(Kinetic.Clipper, Kinetic.Container);