1

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

这是用户可以拖动和旋转的 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;
}

任何帮助都会很棒。

谢谢，

乔

4

1 回答 1

0

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

于 2012-05-15T19:52:10.543 回答