图表标签文本旋转

Question

我使用非常相似的代码来创建一个使用帆布按这篇文章的饼图：

http://wickedlysmart.com/how-to-make-a-pie-chart-with-html5s-canvas/

你可以从这个图片看到，有哪里的标签是倒挂的情况下下：

这里是标签写入图形代码：

var drawSegmentLabel = function(canvas, context, i) { 

     context.save(); 
     var x = Math.floor(canvas.width/2); 
     var y = Math.floor(canvas.height/2); 
     var degrees = sumTo(data, i); 

     var angle = degreesToRadians(degrees); 

     context.translate(x, y); 
     context.rotate(angle); 
     context.textAlign = 'right'; 
     var fontSize = Math.floor(canvas.height/32); 
     context.font = fontSize + 'pt Helvetica'; 

     var dx = Math.floor(canvas.width * 0.3) - 20; 
     var dy = Math.floor(canvas.height * 0.05); 
     context.fillText(labels[i], dx, dy); 

     context.restore(); 

};

我想纠正这个问题，所以文本总是可读的，而不是颠倒，但不能解决如何做到这一点！

Answer 1

这里是我的解决方案！ （小kludgey，但似乎对基本的例子工作，我没有测试过在边缘的情况下...）

var drawSegmentLabel = function(canvas, context, i) { 

    context.save(); 
    var x = Math.floor(canvas.width/2); 
    var y = Math.floor(canvas.height/2); 
    var angle; 
    var angleD = sumTo(data, i); 
    var flip = (angleD < 90 || angleD > 270) ? false : true; 

    context.translate(x, y); 
    if (flip) { 
     angleD = angleD-180; 
     context.textAlign = "left"; 
     angle = degreesToRadians(angleD); 
     context.rotate(angle); 
     context.translate(-(x + (canvas.width * 0.5))+15, -(canvas.height * 0.05)-10); 
    } 
    else { 
     context.textAlign = "right"; 
     angle = degreesToRadians(angleD); 
     context.rotate(angle); 
    } 
    var fontSize = Math.floor(canvas.height/25); 
    context.font = fontSize + "pt Helvetica"; 

    var dx = Math.floor(canvas.width * 0.5) - 10; 
    var dy = Math.floor(canvas.height * 0.05); 
    context.fillText(labels[i], dx, dy); 

    context.restore(); 
}; 

Answer 2

要以正确的方式显示文本，您必须检查旋转角度是否在90度和270度之间。如果是，那么你知道文本将显示颠倒。

要正确地打开它，那么你必须你旋转刨旋转画布 - 180度，然后对准它在左不右：

var drawSegmentLabel = function(canvas, context, i) { 

    context.save(); 
    var x = Math.floor(canvas.width/2); 
    var y = Math.floor(canvas.height/2); 
    var degrees = sumTo(data, i); 

    var angle = 0; 
    if (degree > 90 && degree < 270) 
     angle = degreesToRadians(degrees - 180);  
    else 
     angle = degreesToRadians(degrees); 

    context.translate(x, y); 
    context.rotate(angle); 
    context.textAlign = 'right'; 
    var fontSize = Math.floor(canvas.height/32); 
    context.font = fontSize + 'pt Helvetica'; 

    var dx = Math.floor(canvas.width * 0.3) - 20; 
    if (degree > 90 && degree < 270) 
     dx = 20; 
    var dy = Math.floor(canvas.height * 0.05); 
    context.fillText(labels[i], dx, dy); 

    context.restore(); 
};