1

私は、CQC ホーム オートメーション プラットフォーム用の Typescript ベースのタッチ スクリーン クライアントに取り組んでおり、奇妙なことに遭遇しました。さまざまなグラフィック要素が画像の上に重ねられている場所がたくさんあります。画面の一部を更新するときは、クリップ領域を設定して更新します。

しかし、私は常にすべてを線で囲んでしまいました。これは、画像の背後にある下にある色の塗りつぶしの色です。もちろん自分を責めました。しかし、最終的には、自殺する代わりに、ちょっとしたテスト プログラムを実行しました。

drawImage() にはクリップ パスの境界が含まれていませんが、塗りつぶしには含まれているようです。そのため、更新している領域の下にある画像の一部をブリットしても、ターゲット領域が完全に塗りつぶされず、領域の周りに線が残ります。

その単純なプログラムが問題を示した後、私は戻って、画像の更新のためにクリップ領域を 1 つ膨らませましたが、他のすべてのためにそのままにしておきました。今ではすべて機能しています。バグではないことを確認するために、Chrome と Edge でこれをテストしましたが、どちらもまったく同じように動作します。

不思議なことに、クリップ パスが境界を排他的または包括的にすることを意図しているかどうかについてのドキュメントの記述を見たことがありません。

function drawRect(ctx, x, y, w, h) {
    ctx.moveTo(x, y);
    ctx.lineTo(x + w, y);
    ctx.lineTo(x + w, y + h);
    ctx.lineTo(x, y + h);
    ctx.lineTo(x, y);
}

function init()
{
    var canvas = document.getElementById("output");
    canvas.style.width = 480;
    canvas.style.height = 480;
    canvas.width = 480;
    canvas.height = 480;

    var drawCtx = canvas.getContext("2d");
    drawCtx.translate(0.5, 0.5);

    var img = new Image();
    img.src = "test.jpg";
    img.onload = function() {

        // DRaw the image
        drawCtx.drawImage(img, 0, 0);

        // SEt a clip path
        drawCtx.beginPath();
        drawRect(drawCtx, 10, 10, 200, 200);
        drawCtx.clip();

        // Fill the whole area, which fills the clip area
        drawCtx.fillStyle = "black";
        drawCtx.fillRect(0, 0, 480, 480);

        // Draw the image again, which should fill the area
        drawCtx.drawImage(img, 0, 0);

        // But it ends up with a black line around it
    }
}

window.addEventListener("load", init, false);
4

1 に答える 1