zrender icon indicating copy to clipboard operation
zrender copied to clipboard

怎么给整个Group添加事件,而不是子元素

Open lemonchip opened this issue 4 years ago • 3 comments

怎么给整个Group添加事件,比如需要鼠标拖拽整个Group等

lemonchip avatar Nov 24 '21 12:11 lemonchip

// 试试这个

        let circle = new zrender.Circle({
            //draggable: true,
            x: 300,
            y: 300,
            scale: [1, 1],
            shape: {
                cx: 0,
                cy: 0,
                r: 30
            },
            style: {
                fill: "blue"
            },

        });


        //多边形折线段
        let polyline = new zrender.Polyline({
            x: 140,
            y: 30,
            draggable: true,
            style: {
                stroke: 'red', //线的颜色
                fill: 'blue',
                lineWidth: 3, //线宽
                lineDash: [0]
            },
            shape: {
                points: [
                        [10, 10],
                        [100, 100],
                        [100, 200],
                        [10, 10]
                    ] //点集
            }
        })


        let group = new zrender.Group({
            draggable: true,
            x: 200,
            y: 200
        })

wjywinwjy avatar Dec 03 '21 11:12 wjywinwjy

// 源码中的逻辑:向上找有draggable=true 的 _dragStart(e: ElementEvent) { let draggingTarget = e.target; // Find if there is draggable in the ancestor while (draggingTarget && !draggingTarget.draggable) { draggingTarget = draggingTarget.parent; } if (draggingTarget) { this._draggingTarget = draggingTarget; draggingTarget.dragging = true; this._x = e.offsetX; this._y = e.offsetY;

        this.handler.dispatchToElement(
            new Param(draggingTarget, e), 'dragstart', e.event
        );
    }
}

wjywinwjy avatar Dec 03 '21 11:12 wjywinwjy

// 源码中的逻辑:向上找有draggable=true 的 _dragStart(e: ElementEvent) { let draggingTarget = e.target; // Find if there is draggable in the ancestor while (draggingTarget && !draggingTarget.draggable) { draggingTarget = draggingTarget.parent; } if (draggingTarget) { this._draggingTarget = draggingTarget; draggingTarget.dragging = true; this._x = e.offsetX; this._y = e.offsetY;

        this.handler.dispatchToElement(
            new Param(draggingTarget, e), 'dragstart', e.event
        );
    }
}

在实例group的时候添加属性draggable: true,然后将节点插入到group中,在group上监听事件并不能生效,只能点击插入的元素才会生效,并且draggable也是不生效的,或者是生效了但是并没有作用到子节点上

nanfb avatar Jun 21 '23 06:06 nanfb