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>

选择一些ABC

 <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>