1

HTML5キャンバスにテキストを描画し、キャンバスを2番目のキャンバスにオーバーレイされる画像に変換します.imgはユーザーによって回転され、2番目のキャンバスに描画されます. 私が抱えている問題は、画像がキャンバスに描画されたときに正しい位置にないことです。これを示すためにいくつかの画像を添付しました：

これは、ユーザーがドラッグして回転できる 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 に答える