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

Question

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

像这样：

在此处输入图片说明

这是我的代码：

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

我为此遇到了麻烦，并正在寻找任何人分享如何实现所需结果的任何见解。

到目前为止，以上结果产生了以下结果：

在此处输入图片说明

任何帮助将不胜感激，欢呼。

Answer 1

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

在此处输入图片说明

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

计算文字旋转角度

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

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

如果累计角度在90到270度之间，则将文本角度设置为累计角度减去180。
如果累计角度为<90或> 270，则将文本角度设置为累计角度。

设置文字偏移

偏移量取决于楔形的半径。

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

如果累计角度在90和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 个解决方案

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