如果某些文本旋转 x 度，那么我将如何计算最左边的点与原始最左边的点之间的距离？答案

【问题标题】：If some text is rotated x degrees then how would I work out how far the leftmost point is from the original leftmost point?如果某些文本旋转 x 度，那么我将如何计算最左边的点与原始最左边的点之间的距离？
【发布时间】：2019-08-20 11:52:06
【问题描述】：

我在 HTML5 画布上绘制一些文本，将画布转换为覆盖在第二个画布上的图像，然后用户旋转 img，然后将其绘制到第二个画布上。我遇到的问题是，当图像被绘制到画布上时，它的位置不正确。我附上了一些图片来证明这一点：

这是用户可以拖动和旋转的img标签：

_{（来源：devjoe.co.uk）}

当图像被绘制到画布上时会发生这种情况（忽略红色框）
_{（来源：devjoe.co.uk）}

我无法弄清楚为什么图像被偏移。如果它是水平的，那么它会被绘制在正确的位置，我旋转得越多，它就会越远。这是将图像绘制到画布上的 javascript：

function saveWatermark()
{
toggleLoading(true);
enableUndo();
var watermarkOffset = $('.watermark').offset();
var watermarkWidth = $('.watermark').width();
var watermarkHeight = $('.watermark').height();
var canvasOffset = $(_canvas).offset();
//TODO: If the text is a long string then the rotate handle is too close and it moves jerkily
var img = new Image();
img.onload = function ()
{
    $('.watermark-container').remove();
    if (!_watermarkAngle)
    {
        _context.drawImage(img, _watermarkX, _watermarkY);
    } else
    {
        _watermarkAngle = Math.round(_watermarkAngle);
        _context.save();
        var xPos = watermarkOffset.left - canvasOffset.left;
        var yPos = watermarkOffset.top - canvasOffset.top;
        var xCentre = xPos + img.width / 2;
        var yCentre = yPos + img.height / 2;

        _context.translate(xCentre, yCentre);
        _context.rotate(_watermarkAngle * Math.PI / 180);
        _context.translate(-xCentre, -yCentre);
        _context.drawImage(img, xPos + (img.width / 2), yPos + (img.height / 2));
        _context.fillStyle = 'rgba(255,0,0,0.5)';
        _context.fillRect(xPos, yPos, img.width, img.height);
        _context.restore();

    }
    $btnWatermarkSave.attr('disabled', 'disabled');
    toggleLoading(false);
};
img.src = $('.watermark')[0].src;
}

任何帮助都会很棒。

谢谢，

乔

【问题讨论】：

好像img.width/2位应该是img.width/？ - 不确定这个值是什么 - 它会根据图像旋转的程度而变化。
只是出于兴趣，此水印是否旨在阻止人们将您的背景图像重新用于自己的目的？如果是这样，如果它是在客户端完成的，它可以很容易地被禁用。

标签： jquery html canvas geometry

【解决方案1】：

也许还要检查文本的line-height - 它可能有一个比我们看到的更大的“框”？

【讨论】：

也许不是......看起来像一个偏移中心作为另一个需要研究的想法（在偏移中心上旋转）
我也建议确保旋转发生在您认为发生的中心周围。