Question

使用顶部或底部左侧锚点调整组的大小时，组的x和y位置不会更新。 This is my fiddle（打开控制台并调整大小。组的x，y将是相同的）

 function update(activeAnchor) {
        var group = activeAnchor.getParent();

        var topLeft = group.get('.topLeft')[0];
        var topRight = group.get('.topRight')[0];
        var bottomRight = group.get('.bottomRight')[0];
        var bottomLeft = group.get('.bottomLeft')[0];
        var image = group.get('.highlight')[0];

        var anchorX = activeAnchor.getX();
        var anchorY = activeAnchor.getY();

        // update anchor positions
        switch (activeAnchor.getName()) {
            case 'topLeft':
                topRight.setY(anchorY);
                bottomLeft.setX(anchorX);
                break;
            case 'topRight':
                topLeft.setY(anchorY);
                bottomRight.setX(anchorX);
                break;
            case 'bottomRight':
                bottomLeft.setY(anchorY);
                topRight.setX(anchorX);
                break;
            case 'bottomLeft':
                bottomRight.setY(anchorY);
                topLeft.setX(anchorX);
                break;
        }

        image.setPosition(topLeft.getPosition());

        var width = topRight.getX() - topLeft.getX();
        var height = bottomLeft.getY() - topLeft.getY();
        if (width && height) {
            image.setSize(width, height);
        }
    }
    function addAnchor(group, x, y, name) {
        var stage = group.getStage();
        var layer = group.getLayer();

        var anchor = new Kinetic.Circle({
            x: x,
            y: y,
            stroke: '#666',
            fill: '#ddd',
            strokeWidth: 2,
            radius: 8,
            name: name,
            draggable: true,
            dragOnTop: false
        });

        anchor.on('dragmove', function () {
            update(this);
            layer.draw();
        });
        anchor.on('mousedown touchstart', function () {
            group.setDraggable(false);
            this.moveToTop();
        });
        anchor.on('dragend', function () {
            group.setDraggable(true);
            layer.draw();
            Diagnostics(layer);
        });
        // add hover styling
        anchor.on('mouseover', function () {
            var layer = this.getLayer();
            document.body.style.cursor = 'pointer';
            this.setStrokeWidth(4);
            layer.draw();
        });
        anchor.on('mouseout', function () {
            var layer = this.getLayer();
            document.body.style.cursor = 'default';
            this.setStrokeWidth(2);
            layer.draw();
        });

        group.add(anchor);
    }

    function initStage() {
        var stage = new Kinetic.Stage({
            container: 'container',
            width: 578,
            height: 400
        });

        var testGroup = new Kinetic.Group({
            x: 20,
            y: 50,
            draggable: true
        });

        var layer = new Kinetic.Layer();

        layer.add(testGroup);
        stage.add(layer);


        // test
        var testImg = new Kinetic.Rect({
            x: 0,
            y: 0,
           fill:'green',
            width: 93,
            height: 104,
            name: 'highlight'
        });

        testGroup.add(testImg);
        addAnchor(testGroup, 0, 0, 'topLeft');
        addAnchor(testGroup, 93, 0, 'topRight');
        addAnchor(testGroup, 93, 104, 'bottomRight');
        addAnchor(testGroup, 0, 104, 'bottomLeft');

        testGroup.on('dragstart', function () {
            this.moveToTop();
        });

        testGroup.on('dragend', function () {
            this.moveToTop();
            Diagnostics(testGroup)
        });
        stage.draw();
    }
    function Diagnostics(obj) {
        var json = obj.toJSON()
        console.log(json);
    };

    initStage();

如何更新群组的x，y位置？

Answer 1

好的，我想我找到了解决问题的方法（虽然可能有更好的方法吗？）我没有尝试更新组中的x，y，而只是更新组内的图像（绿色rect）并为其添加额外的属性，以便我可以在服务器上读取它们。如果有人需要它我创建了一个函数：

function UpdatePosition(obj) {
        var x = obj.getAbsolutePosition().x
        var y = obj.getAbsolutePosition().y
        obj.setAttr('x_pos', x);
        obj.setAttr('y_pos', y);

    };

并在更新函数结束时调用它（参见我的问题中的代码）

updatePosition(image);

Kineticjs - 调整大小后如何更新x和y位置

1 个答案: