객체 드래그 및 위치 속성 알아내기

퓨즈[Fusetools]는 DOM, Flex, Corona 등과 달리 UX의 속성값(X, Y, Width, Height 등)을 직접 가져올 수 없습니다. 저는 개인적으로 불편함을 느꼈고, 며칠간 삽질과 슬랙에서 대화를 통해 아래와 같은 샘플을 제작하게 되었습니다. < Draggable />을 사용하면 간단하게 드래그가 가능하지만 위치값을 얻을 수 없다는 단점이 있습니다.

아래 샘플은 사각형의 가운데를 중심으로 드래그 하면서 마우스(터치)의 위치를 알 수 있습니다.

[[ MainView.ux ]]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<App>
    <JavaScript>
        var print = debug_log;
        var Observable = require("FuseJS/Observable");

        var px = Observable(150);
        var py = Observable(100);
        var pTxt = Observable("x:, y:");

        var isDraggable = false;
       
        // 터치 시작
        function onPressed(args)
        {
            isDraggable = true;
            px.value = args.x;
            py.value = args.y;
        }

        // 터치 후 이동
        function onMoved(args)
        {
            if(isDraggable)
            {
                px.value = args.x;
                py.value = args.y;
            }
        }

        // 터치 중지
        function onReleased()
        {
            isDraggable = false;
        }
       
        // 위치가 이동할 때마다 호출(단, Draggable로 이동 시 발생 안함)
        function placedHandler(args)
        {
            // print("-------- placedHandler --------");
            // print(JSON.stringify(args));
            pTxt.value = "x:" + args.x + ", y:" + args.y;
        }
       
        module.exports = {
            onPressed,
            onMoved,
            onReleased,
            placedHandler,
            px,
            py,
            pTxt
        }
    </JavaScript>

    <Text Value="{pTxt}" X="0" Y="0" Width="100%" Height="30" Moved="{onMoved}" Released="{onReleased}" />
   
    <Rectangle ux:Name="rect" X="{px}" Y="{py}" Width="200" Height="100" Background="#ff0000" Placed="{placedHandler}" Pressed="{onPressed}" Moved="{onMoved}" Released="{onReleased}">
        <Translation X="-100" Y="-50" />
    </Rectangle>
   
    <Panel Background="#ffff00" Moved="{onMoved}" />

</App>

[[ 동영상 강좌(재생 목록 버튼을 누르세요) ]]

Was this article helpful?

Related Articles