1

これが数学フォーラムに属している場合は申し訳ありません。HTML5 の canvas 要素内に角を丸くした画像があり、丸みを帯びた角を透明にしたいと考えています。次のコードがあります。

    var cornersImgData = tempContext.getImageData(0, 0, img.width, img.height);
    var topLeft = getPixel(cornersImgData, 0, 0);
    var topRight = getPixel(cornersImgData, cornersImgData.width - 1, 0);
    var bottomLeft = getPixel(cornersImgData, 0, cornersImgData.height - 1);
    // Check that the rounded corners have actually been applied (e.g. make sure the user hasn't just clicked the button and then undo)
    var bottomRight = getPixel(cornersImgData, cornersImgData.width - 1, cornersImgData.height - 1);
    if (('rgb(' + topLeft[0] + ', ' + topLeft[1] + ', ' + topLeft[2] + ')' == _roundedCornersColour) ||
        ('rgb(' + topRight[0] + ', ' + topRight[1] + ', ' + topRight[2] + ')' == _roundedCornersColour) ||
        ('rgb(' + bottomLeft[0] + ', ' + bottomLeft[1] + ', ' + bottomLeft[2] + ')' == _roundedCornersColour) ||
        ('rgb(' + bottomRight[0] + ', ' + bottomRight[1] + ', ' + bottomRight[2] + ')' == _roundedCornersColour))
    {
        for (var x = 0; x < cornersImgData.width; x++)
        {
            for (var y = 0; y < cornersImgData.height; y++)
            {
                var colour = getPixel(cornersImgData, x, y);
                if ('rgb(' + colour[0] + ', ' + colour[1] + ', ' + colour[2] + ')' == _roundedCornersColour)
                {
                    setPixel(cornersImgData, x, y, colour[0], colour[1], colour[2], 0);
                }
            }
        }
    }

これは機能しますが、_roundedCornersColour のすべてのインスタンスを置き換えているため、画像自体のいくつかのピクセルを置き換えてしまうことがあります。私の高校の数学は少しさびついており、x と y がコーナーの位置から外れているかどうかを判断する最善の方法がわかりません。誰でも助けてもらえますか？

ジョー

4

2 に答える 2

1

半径が、の場合、コードからわかる限り、r左上の丸い角が円弧である円の中心はにあります。(xc1, yc1) = (r, r)同様に、他の3つの円の中心の座標を計算することが(xc2, yc2)でき(xc3, yc3)ます(xc4, yc4)。

次に、最初のコーナーの近くで、とと(x-xc1)*(x-xc1) + (y-yc1)*(y-yc1) > r*rをテストできます。これは、円の外側で関連するコーナーにあるポイントによって満たされます。他のコーナーでは、最初のテストで円の中心を関連する円の中心に変更し、他の2つの不等式を適切に変更して、円の正しい象限を選択する必要があります。x < xc1y < yc1

それが基本的な数学です。速度に適用できる最適化はたくさんあります。たとえば、4つのコーナーがすべて対称であり（各コーナーは対角線に対して反射対称であり、すべてのコーナーは互いに回転したコピーです）、円の外側の1つのポイントは、直接テストしなくても、円の外側にある他の多くのポイントをすぐに識別できます。

于 2012-04-09T15:12:13.920 に答える
1

HTML5 キャンバスの場合、ピクセル データを使用して不透明度を手動で設定する代わりに、必要な不透明度で画像を描画し、 を使用してそれを画像に貼り付ける必要がありdestination-in globalCompositeOperationます。簡単かつはるかに高速です。

(または、必要な領域を事前に塗りつぶしてsource-inから、画像を描画するときに合成モードを使用します。)

または、必要な形状のパスを作成し、これを使用clip()して drawImage をパス内に収めます。

于 2012-04-09T15:16:22.517 に答える