Question

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

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

absolute positioned img tag http://devjoe.co.uk/before.png

将图像绘制到画布上时会发生这种情况（忽略红色框） the result http://devjoe.co.uk/after.png

我无法弄清楚图像偏移的原因。如果它是水平的，那么它被绘制在正确的位置，我越旋转它就越远。这是将图像绘制到画布上的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;
}

任何帮助都会很棒。

谢谢，

乔

Answer 1

也许也会检查文本的line-height - 它可能比我们看到的更大“盒子”？

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

1 个答案: