Question

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

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°继续。你究竟是什么意思有点不清楚，首先是文本的方向是什么。考虑到小提琴显示文本在y轴上继续，这里是如何绘制文本，文本结果继续在x轴（如果这不是你想要的，请包括一个模拟的东西你期望的结果 - 只需根据需要在注释掉的线上调整角度。

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

因此，首先在车轮中心旋转以获得辐条角度。然后转换为沿着该辐条的文本原点（画布中的x轴为0°点），以到达“肘”枢轴点或原点。旋转（如果需要）并绘制文本，最后重置转换并重复下一个数字。

以下是一个更新的示例，其中包含一些其他调整：

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在圆点周围旋转多个文本项

1 个答案: