Question

锚点重叠时代码中断。我有用于调整可拖动形状组的大小的锚点，如下面的教程中给出的那样。我还具有删除所选组的功能。当锚点（两个不同的组）重叠并且选择了重叠锚点（mousedown）时，删除功能会破坏代码。

       if (layer !== null && e.keyCode == 46) {  //Delete Key = 46
                SelectedShape.remove();
                layer.batchDraw();
            }
        });

        //Selecting on mousedown
        layer.on('mousedown', function (evt) {
            SelectedShape = evt.targetNode.getParent();
        });

错误消息：无法获取null或未定义引用的父级。

http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/

示例代码

    var SelectedShape = null;

    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 rect = group.get('.rect')[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;
        }

        rect.setPosition(topLeft.getPosition());

        var width = topRight.getX() - topLeft.getX();
        var height = bottomLeft.getY() - topLeft.getY();
        if (width && height) {
            rect.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();
        });
        group.add(anchor);
    }

        var stage = new Kinetic.Stage({
            container: 'container',
            width: 578,
            height: 400
        });
        var darthVaderGroup = new Kinetic.Group({
            x: 270,
            y: 100,
            draggable: true
        });
        var yodaGroup = new Kinetic.Group({
            x: 100,
            y: 110,
            draggable: true
        });

        var Group3 = new Kinetic.Group({
            x: 100,
            y: 300,
            draggable: true
        });
        var layer = new Kinetic.Layer();

        /* add the groups to the layer and the layer to the stage*/
        layer.add(darthVaderGroup);
        layer.add(yodaGroup);
        layer.add(Group3);
        stage.add(layer);

        // darth vader
        var darthVaderImg = new Kinetic.Rect({
            x: 0,
            y: 0,
            width: 200,
            height: 138,
            fill: 'green',
            stroke: 'black',
            strokeWidth: 4,
            name: 'rect'
        });

        darthVaderGroup.add(darthVaderImg);
        addAnchor(darthVaderGroup, 0, 0, 'topLeft');
        addAnchor(darthVaderGroup, 200, 0, 'topRight');
        addAnchor(darthVaderGroup, 200, 138, 'bottomRight');
        addAnchor(darthVaderGroup, 0, 138, 'bottomLeft');

        darthVaderGroup.on('dragstart', function () {
            this.moveToTop();
        });
        // yoda
        var yodaImg = new Kinetic.Rect({
            x: 0,
            y: 0,
            width: 93,
            height: 104,
            fill: 'red',
            stroke: 'black',
            strokeWidth: 4,
            name: 'rect'
        });

        yodaGroup.add(yodaImg);
        addAnchor(yodaGroup, 0, 0, 'topLeft');
        addAnchor(yodaGroup, 93, 0, 'topRight');
        addAnchor(yodaGroup, 93, 104, 'bottomRight');
        addAnchor(yodaGroup, 0, 104, 'bottomLeft');

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

        var rect3 = new Kinetic.Rect({
            x: 0,
            y: 0,
            width: 93,
            height: 104,
            fill: 'blue',
            stroke: 'black',
            strokeWidth: 4,
            name: 'rect'
        });

        Group3.add(rect3);
        addAnchor(Group3, 0, 0, 'topLeft');
        addAnchor(Group3, 93, 0, 'topRight');
        addAnchor(Group3, 93, 104, 'bottomRight');
        addAnchor(Group3, 0, 104, 'bottomLeft');

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

        stage.draw();

        //Deleting selected shape 
        window.addEventListener('keydown', function (e) {
            if (layer !== null && e.keyCode == 46) {  //Delete Key = 46
                SelectedShape.remove();
                layer.batchDraw();
            }
        });

        //Selecting on mousedown
        layer.on('mousedown', function (evt) {
            SelectedShape = evt.targetNode.getParent();
        });
</script>

Answer 1

而不是使用它：

//Selecting on mousedown
    layer.on('mousedown', function (evt) {
        SelectedShape = evt.targetNode.getParent();
    });

你可以删除那段代码......

并为每个形状添加一个事件监听器：

 yodaGroup.on('mousedown touchstart', function() {SelectedShape = this;});

然后它会起作用。

当锚点与KineticJS重叠时代码中断

1 个答案: