Question

昨天刚开始使用Kinetic.js。我想在楔形物内部绘制一些文字（标签），以便将其放置在楔形物内，并相对于楔形物旋转。角度。

像这样：

enter image description here

这是我的代码：

var numSegments = 5; // Number of wedges in circle

var endPos = 0;

//Center of the div container

var center = document.getElementById('canvas_container').offsetWidth * 0.5;  
var centerY = document.getElementById('canvas_container').offsetHeight * 0.5;

for (var i = 0; i < numSegments; ++i) {

        //Wedge + corresponding label stored in their own group
    var group = new Kinetic.Group();

    var wedge = new Kinetic.Wedge({
        radius: center,
        x: center,
        y: centerY,
        fill: colors[i],
        stroke: '#aaaaff',
        strokeWidth: 2,
        angleDeg: 360 / numSegments,
        rotationDeg: endPos,            
    });

    var label = new Kinetic.Label({

        x : wedge.getX(),
        y : wedge.getY(),

                    //The rotation value is where I assume I'm going wrong, this 
                    //Is one of many values i've tried. 
        rotation : (endPos == 0) ? (360 / numSegments) * 0.5 : endPos
    });


    label.add(new Kinetic.Text({

        text : titles[i],
        fontFamily: 'Calibri',
        fontSize: 26,
        fill : 'white',
        align: 'center',
        listening: false
    }));

    group.add(wedge);
    group.add(label);
    WedgeLayer.add(group);


    endPos += 360 / numSegments;
}

我已经打了一个砖墙，我正在寻找任何人分享如何达到预期结果的任何见解..

到目前为止，上述结果产生了这个：

enter image description here

任何帮助都会非常感激，欢呼。

Answer 1

演示：http://jsfiddle.net/m1erickson/fu5LP/

enter image description here

您可以像这样计算文本偏移和旋转角度：

计算文字旋转角度

跟踪您添加的每个新楔形的累积角度并使用该累积。角度设置文字角度。

调整各种累积角度的角度有助于防止文本上下颠倒。

如果累积角度在90＆amp; 270度然后将文本角度设置为累积角度减去180.
如果累积角度<90或> 270，则将文字角度设置为累积角度。

设置文字偏移量

偏移取决于楔形的半径。

但是，再次根据累积角度调整偏移量

如果累积角度在90＆amp;然后270度将文本offsetX设置为大约楔形半径减去10.
如果累积角度<90或> 270，则将文本偏移设置为楔形半径的大约负半部。

示例代码：

<!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-v5.1.0.min.js"></script>
<style>
body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:350px;
  height:350px;
}
</style>        
<script>
$(function(){

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

    var cx=175;
    var cy=175;
    var wedgeRadius=140;
    var accumAngle=0;

    var center = new Kinetic.Circle({
        x:cx,
        y:cy,
        radius:5,
        fill: 'red'
    });
    layer.add(center);

    for(var i=0;i<12;i++){
        newTextWedge(30,"Element # "+i);
    }

    function newTextWedge(angle,text){

        var wedge = new Kinetic.Wedge({
          x: cx,
          y: cy,
          radius: wedgeRadius,
          angleDeg: angle,
          stroke: 'gray',
          strokeWidth: 1,
          rotationDeg:-accumAngle+angle/2
        });
        layer.add(wedge);
        wedge.moveToBottom();

        if(accumAngle>90 && accumAngle<270){
            var offset={x:wedgeRadius-10,y:7};
            var textAngle=accumAngle-180;
        }else{
            var offset={x:-50,y:7};
            var textAngle=accumAngle;
        }

        var text = new Kinetic.Text({
            x:cx,
            y:cy,
            text:text,
            fill: 'red',
            offset:offset,
            rotationDeg:textAngle
        });
        layer.add(text);

        layer.draw();

        accumAngle+=angle;
    }


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

</script>       
</head>

<body>
    <div id="container"></div>
</body>
</html>

Kinetic.js在楔形内绘制文字（带旋转）

1 个答案: