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

Question

Just started using Kinetic.js yesterday. 昨天刚开始使用Kinetic.js。 I want to draw some text (a label) inside a wedge so that it's placed inside the wedge with a rotation relative to the wedges' angle. 我想在楔形块内绘制一些文本（标签），以便将其相对于楔形块的角度旋转地放置在楔形块内。

Like so: 像这样：

在此处输入图片说明

Here's my code: 这是我的代码：

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

I've hit a brick wall with this and am looking for anyone to share any insight into how to achieve the desired outcome.. 我为此遇到了麻烦，并正在寻找任何人分享如何实现所需结果的任何见解。

So far the above results are producing this: 到目前为止，以上结果产生了以下结果：

在此处输入图片说明

Any help would be greatly appreciated, cheers. 任何帮助将不胜感激，欢呼。

Answer 1

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

在此处输入图片说明

You calculate the text offset and rotation angle like this: 您可以这样计算文本偏移量和旋转角度：

Calculating the text rotation angle 计算文字旋转角度

Track the accumulated angle for each new wedge you add and use that accum. 跟踪添加的每个新楔形的累积角度，并使用该累积量。 angle to set the text angle. 角度设置文本角度。

Adjusting the angle for various accumulated angles helps keep the text from appearing upside down. 调整各种累积角度的角度有助于防止文本上下颠倒。

If the accumulated angle is between 90 & 270 degrees then set the text angle as the accumulated angle minus 180. 如果累计角度在90到270度之间，则将文本角度设置为累计角度减去180。
If the accumulated angle is <90 or >270 then set the text angle as the accumulated angle. 如果累计角度为<90或> 270，则将文本角度设置为累计角度。

Setting the text offset 设置文字偏移

The offset depends on the radius of the wedge. 偏移量取决于楔形的半径。

But again the offset is adjusted based on the accumulated angle 但是再次根据累积角度调整偏移量

If the accumulated angle is between 90 & 270 degrees then set the text offsetX to approximately the wedge radius minus 10. 如果累计角度在90和270度之间，则将文本offsetX设置为大约楔形半径减去10。
If the accumulated angle is <90 or >270 then set the text offset to approximately negative half of the wedge radius. 如果累计角度为<90或> 270，则将文本偏移设置为楔形半径的大约负一半。

Example code: 示例代码：

<!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 个解决方案

解决方案1
1 已采纳 2014-05-13 18:38:57

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-05-13 18:38:57

解决方案1
1 已采纳 2014-05-13 18:38:57