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