KineticJS移动或移除图层中的圆圈

时间:2013-12-01 18:28:55

标签: javascript kineticjs

我希望somone会帮助我。

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

             选择一些东西                                        一个                 乙                 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>

1 个答案:

答案 0 :(得分:0)

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