在画布上旋转文本方向

Question

我的 Angular 应用程序中有一个画布，用户可以在其中玩弄一些固定形状（8 个文本和 1 个矩形）的坐标。我希望能够允许用户也选择文本的方向，即显示水平或垂直。我怎样才能实现这种行为。感谢任何帮助。

redrawLabel(result: ISerialLabelDesign) {
    console.log('inside redrawLabel');
    this.clearDrawing();
    this.shapesToDrawArray.length = 0;
    console.log(result); // giving the entire form.value object
    this.defaultLabelWidth = 300//result.labelWidth * 3.7795;  // convert from mm to pixel
    this.defaultLabelHeight = 300//result.labelHeight * 3.7795;
    this.renderDrawing(result);
    this.startDrawing(this.shapesToDrawArray);
}

startDrawing(shapesToDraw: Shape[]) {
    console.log('inside startDrawing::');
    for (var i = 0; i < shapesToDraw.length; i++) {
        if (shapesToDraw[i].type === 'barcode') {
            this.drawRectangle(this.context, shapesToDraw[i].x, shapesToDraw[i].y, shapesToDraw[i].w, shapesToDraw[i].h);
        } else if (shapesToDraw[i].type === 'text') {
            this.drawText(this.context, shapesToDraw[i].text, shapesToDraw[i].x, shapesToDraw[i].y, shapesToDraw[i].w, shapesToDraw[i].h);
        }
    }
}

private drawRectangle(context: CanvasRenderingContext2D, x: number, y: number, w: number, h: number) {
    console.log('inside drawRectangle');
    context.strokeRect(x, y, w, h);
}

private drawText(context: CanvasRenderingContext2D, text: string, x: number, y: number, w: number, h: number) {
    context.fillStyle = 'black';
    context.font = '8px Arial';
    context.fillText(text, x, y);
}

Answer 1

要旋转 HTML5 Canvas，我们可以使用 rotate() 变换方法。旋转变换需要以弧度为单位的角度。要定义旋转点，我们需要先平移画布上下文，使上下文的左上角位于所需的旋转点上。 使用 CSS： 变换：旋转（90度）

Answer 2

您可以使用

rotate()

旋转文本，如下所示：

private drawText(context: CanvasRenderingContext2D, text: string, x: number, y: number, w: number, h: number) {
    context.fillStyle = 'black';
    context.font = '8px Arial';
    context.rotate(Math.PI / 2); // Rotation of the text
    context.textBaseline = 'middle';
    context.textAlign = 'center';
    context.fillText(text, x, y);
}