KineticJs group.setSize(300,300) not working

问题

I am trying to change size of kinetic group. but it gives JavaScript error message.

in kinetic js document its written than setSize works with group nodes

回答1:

I think the documents are a bit outdated in that respect. Groups do not have a drawFunc so they do not have a width or height. If they ever do get width and height, it will be possible to create clipped groups, which will be nice. However, as they are now, groups are simply used to define a relative x and y starting coordinate for objects contained within them. This makes moving several objects at once possible (dragging, moveTo, event handlers, etc...), but that's about it.

JsFiddle as requested

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

Just make your group draggable and add your objects to the group.

回答2:

The code below will allow you to create a group with clipping properties. Instantiate it like a group, where width and height is your clipping box.

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);

回答3:

Document is outdated or wrong. It is not possible to directly change group size

来源：https://stackoverflow.com/questions/13097688/kineticjs-group-setsize300-300-not-working

标签

javascript

html

canvas

kineticjs