用 worldToLocal 更新坐标，传入传数据发生变化了，界面没有变化

3400442579 commented 6 months ago

如题：

代码如下，更新Box 中的对象ellipse ，

<html lang="zh">

<head>
    <meta charset="utf-8" />
</head>

<body>

    <div>限制区域 移动</div>
    <div id="image-editor">
        <div id="canvas" style=" height: 600px;"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/leafer-ui@1.0.0-rc.19/dist/web.min.js"></script>
    <script src="https://unpkg.com/@leafer-in/view@1.0.0-rc.19/dist/view.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@leafer-in/editor@1.0.0-rc.19/dist/editor.min.js"></script>
    <script>
        const { Leafer, Rect, Text, Box, Ellipse, PointerEvent, ImageEvent } = LeaferUI
        const app = new LeaferUI.App({
            view: "canvas",
            editor: { lockRatio: false },
            tree: {
                type: 'draw'
            }
        });

        const background = new Rect({ x: 0, y: 0, width: 800, height: 600, fill: 'gray' })
        const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })

        app.tree.add(background)
        app.tree.add(rect)

        const box = new Box({
            zIndex: 1,
            x: 130,
            y: 130,
            width: 200,
            height: 200,
            fill: '#FF4B4B',
            cornerRadius: 10,
            editable: false,
            overflow: 'hide',
        })
        const ellipse = new Rect({
            x: 100,
            y: 100,
            width: 300,
            height: 200,
            fill: '#FEB027',
            draggable: false,
            id: "ellipse1",
            zIndex: 1,
            rotation: -90,
            around: 'center',
            //scale :2,
            //stroke:'green'
        });
        box.add(ellipse);
        app.tree.add(box);

        var node_id;
        var down = false;

        ellipse.on(PointerEvent.DOWN, e => {
            down = true;
            app.editor.hittable = false;
            e.current.parent.overflow = 'show'
            e.current.opacity = 0.5;
            node_id = e.current.id;
        })
        app.on(PointerEvent.UP, e => {
            if (node_id && down) {
                app.editor.hittable = true;
                var node = app.findOne("#" + node_id);
                node.parent.overflow = 'hide'
                node.opacity = 1;
                down = false;
            }
        })
        app.on(PointerEvent.MOVE, e => {
            if (down) {
                var node = app.findOne("#" + node_id);
                let set = false;
                let boundParent = node.parent.getBounds('box', 'world');
                let boundSelf = node.getBounds('box', 'world');
                console.info(boundParent)
                console.info(boundSelf)
                console.info("----")
                x = boundSelf.x + e.origin.movementX;
                y = boundSelf.y + e.origin.movementY

                if (x < boundParent.x && x + boundSelf.width > boundParent.x + boundParent.width)
                    set = true;
                if (y < boundParent.y && y + boundSelf.height > boundParent.y + boundParent.height)
                    set = true;

                if (set) {
                    var pos = { x: x, y: y };
                    console.info(pos)
                    node.worldToLocal(pos);
                    console.info(pos) //这里 pos 生成变化了，界面 没有变化

                    //node.x = pos.x;
                    //node.y = pos.y;
                }
            }
        });
    </script>

</body>

</html>

leaferjs commented 6 months ago

worldToLocal只是转换了坐标数据，没有实际设置元素的坐标值

3400442579 commented 6 months ago

除了 node.x = pos.x; node.y = pos.y; 有其他设置坐标的方法吗

leaferjs / leafer-ui

用 worldToLocal 更新坐标，传入传数据发生变化了，界面没有变化 #114

leaferjs / leafer-ui

用 worldToLocal 更新坐标 ，传入传数据发生变化了，界面没有变化 #114

用 worldToLocal 更新坐标，传入传数据发生变化了，界面没有变化 #114