HTML 5 Canvas 围绕圆点旋转多个文本项

Question

我正在尝试在自行车车轮的辐条周围显示数字。在为轮子创建 'spokes' 的过程中，我似乎无法在不弄乱轮子旋转的情况下让文本旋转。

var arr = ['1','2','3','4','5','1','2','3','4','5','1','2','3','4','5','1','2','3','4','5'];

function drawNumber() {
    var cID = document.getElementById('cogs');
    var canW = cID.width,
        canH = cID.height;
    if (cID && cID.getContext){
        var ctx = cID.getContext('2d');
        if(ctx) {            
            ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2);
            var radian = (Math.PI / 180) * 18;
            var i = 0
            for (var degrees = 0; degrees < 360; degrees += 18) {
                var fillNum = arr[i];
                ctx.font = "12pt Arial"
                ctx.fillStyle = 'white';
                ctx.rotate(radian);
                rotateText(fillNum);
                i++;
            }
            ctx.translate(-canW/2, -canH/2);
        }
    }
}

function rotateText(i){
    var cID = document.getElementById('cogs');
    ctx = cID.getContext('2d');
    ctx.fillText(i, -5, 150);
}

drawNumber();

http://jsfiddle.net/rdo64wv1/8/

如果我在旋转文本功能中添加旋转，它不会旋转文本，它只会围绕辐条进一步移动。有什么想法吗？

Answer 1

如果我没理解错的话，你希望数字继续沿辐条方向呈 90°。您的确切意思有点不清楚，因为文本首先在哪个方向继续。考虑到 fiddle 显示文本在 y 轴上继续，这里是如何绘制文本，文本结果在 x 轴上继续（如果这不是您想要的，请包含一个模拟- 根据需要调整注释行的角度）。

把这个过程想象成一只手臂：首先旋转肩膀，然后是肘部，两者都在它们的枢轴点，但肘部总是相对于肩部角度。

所以，首先在车轮中心旋转以获得辐条角度。然后沿该辐条翻译到文本的原点（canvas 中的 x 轴作为 0° 点向右）以到达 "elbow" 枢轴点或原点。旋转（如果需要）并绘制文本，最后重置转换并重复下一个数字。

这是一个经过一些额外调整的更新示例：

var arr = ['1','2','3','4','5','1','2','3','4','5','1','2','3','4','5','1','2','3','4','5'];

function drawNumber() {
    var cID = document.getElementById('cogs'),
        cx = cID.width * 0.5,                     // we'll only use the center value
        cy = cID.height * 0.5;
  
    if (cID && cID.getContext){
        var ctx = cID.getContext('2d');
        if(ctx) {            
            ctx.font = "12pt Arial"               // set font only once..
            ctx.textAlign = "center";             // align to center so we don't
            ctx.textBaseline = "middle";          //  need to calculate center..
            var step = Math.PI * 2 / arr.length;  // step based on array length (2xPI=360°)
            for (var angle = 0, i = 0; angle < Math.PI * 2; angle += step) {
                ctx.setTransform(1,0,0,1,cx, cy); // hard reset transforms + translate
                ctx.rotate(angle);                // absolute rotate wheel center
                ctx.translate(cx - 10, 0);        // translate along x axis
                //ctx.rotate(-Math.PI*0.5);       // 90°, if needed...
                ctx.fillText(arr[i++], 0, 0);     // draw at new origin
            }
        }
    }
    ctx.setTransform(1,0,0,1,0,0);                // reset all transforms
}

drawNumber();

<canvas id='cogs' width='300' height='300'></canvas>

HTML 5 Canvas 围绕圆点旋转多个文本项

HTML 5 Canvas rotate mulitple text items around circular point

javascript

canvas

rotation

html5-canvas