javascript - KineticJS 移动或删除图层中的圆

Question

我希望有人能帮助我。

我是JS新手，所以还缺乏很多理解。但这个简单代码的问题是，我只想在图层中看到一个圆圈。

如何根据从列表中获得的坐标移动圆？

   <script type="text/javascript"  src="http://code.jquery.com/jquery-1.8.2.min.js">
    $(document).one('mobileinit', function () {

        // Setting #container div as a jqm pageContainer
        $.mobile.pageContainer = $('#container');

        // Setting default page transition to slide
        $.mobile.defaultPageTransition = 'slide';

        $('#data-role ul').on('click', function () {
            alert($(this).html());
        });
    });

</script>

<script  type="text/javascript" >
    function placering(x, y) {
        alert(x + " UPS  " + y);
    }
</script>

选择一些东西 A 乙 C

<script>

    var stage = new Kinetic.Stage({
        container: 'topContainer',
        width: 320,
        height: 800
    });

    var layerPlacering = new Kinetic.Layer();


    function spotOn(x1, y1) {
        var moedeSted = new Kinetic.Circle({
            x: x1,
            y: y1,
            radius: 10,
            fill: 'red',
            stroke: 'black',
            strokeWidth: 0
        });

        layerPlacering.add(moedeSted);
        stage.add(layerPlacering);
    }
</script>

<script type="text/javascript">
    $('#liste').on('click', 'li', function () {
        layerPlacering.clear();
        var test1 = $(this).attr('val1');
        var test2 = $(this).attr('val2');

        spotOn(test1, test2)
    });
</script>

Answer 1

<script>

    var stage = new Kinetic.Stage({
        container: 'topContainer',
        width: 320,
        height: 800
    });

    var layerPlacering = new Kinetic.Layer();

    // remove the function    
    var moedeSted = new Kinetic.Circle({
            x: 0,
            y: 0,
            radius: 10,
            fill: 'red',
            stroke: 'black',
            strokeWidth: 0
        });
        moedeSted.hide(); // just hide it to start with since you do not know the position where to show    
        layerPlacering.add(moedeSted);
        stage.add(layerPlacering);
</script>

<script type="text/javascript">
    $('#liste').on('click', 'li', function () {
        layerPlacering.clear();
        var test1 = $(this).attr('val1');
        var test2 = $(this).attr('val2');

        moedeSted.setPosition(test1, test2); // <---- Change here
        moedeSted.show(); // if this is the first call, it will make the hidden ring visible, no change otherwise
        layerPlacering.draw();
    });
</script>