0

我正在做一个导航项目。我有一张这样的地图。

在此处输入图像描述

我需要根据舞台上 [400,300] px 上的绿点来旋转这张地图。我尝试了很多东西，但没有成功。这是我的旋转功能。

function rotateMap(layer, t_angle) {

layer.setOffset(400, 300);
layer.rotateDeg(t_angle);
layer.draw();
layer.move(400, 300);
};

这只会旋转一次地图。当我尝试在计时器事件中使用它时，地图不会在第一次旋转后出现。有没有任何有效的方法来进行这种旋转？

**编辑：我的舞台上有两层，一层用于线条，另一层用于点。

4

1 回答 1

0

不要偏移图层，而是将线条放在一个组中并旋转该组。

我假设你的全屏是 800x600 并且你想围绕中心旋转 400x300

方法

  • 把你的台词放在一个组上
  • 将您的组宽 x 高设置为 800x600
  • 将您的组 x/y 设置为 400/300
  • 将您的组偏移量设置为 400,300
  • 要旋转，请调用 group.rotateDeg(degrees)
  • 确保在每次旋转后使用 layer.draw()。

您的地图组示例：

    var map=new Kinetic.Group({
        x:400,
        y:300,
        width:800,
        height:600,
        offset:[400,300]
    });
    layer.add(map);

旋转功能示例

    function rotateMap(t_angle) {
        map.rotateDeg(t_angle);
        layer.draw();
    };

这是代码和小提琴：http: //jsfiddle.net/m1erickson/wDxcT/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.0.min.js"></script>

<style>
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:400px;
  height:400px;
}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 400,
        height: 400
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);

    var t_angle=30;

    function rotateMap(t_angle) {
    map.rotateDeg(t_angle);
    layer.draw();
    };

    var map=new Kinetic.Group({
        x:200,
        y:200,
        width:200,
        height:200,
        offset:[100,100]
    });
    layer.add(map);

        var rect = new Kinetic.Rect({
            x: 0,
            y: 0,
            width: 200,
            height: 200,
            fill: 'skyblue',
            stroke: 'lightgray',
            strokeWidth: 3
        });
        map.add(rect);
        var north = new Kinetic.Text({
            x: map.getWidth()/2-15,
            y: 25,
            text: 'N',
            fontSize: 42,
            fontFamily: 'Calibri',
            fill: 'green'
        });
        map.add(north);



    var c=new Kinetic.Circle({
      x:200,
      y:200,
      radius:5,
      fill:"green"
    });
    layer.add(c);

    layer.draw();


    $("#rotate").click(function(){
        rotateMap(t_angle);
    });


}); // end $(function(){});

</script>       
</head>

<body>
    <button id="rotate">rotate</button>
    <div id="container"></div>
</body>
</html>
于 2013-09-18T16:49:41.267 回答