Question

很抱歉，如果这属于数学论坛。我在HTML5s画布元素中有一个圆角图像，我想让圆角透明。我有以下代码：

    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是否落在角落之外的最佳方法。有人可以帮忙吗？

乔

Answer 1

如果半径为r，那么左上角的圆圈中心是弧线(xc1, yc1) = (r, r)，据我所知，从您的代码中可以看出。您可以类似地计算出其他三个圆心(xc2, yc2)，(xc3, yc3)和(xc4, yc4)的坐标。

然后在第一个角落附近，您可以测试(x-xc1)*(x-xc1) + (y-yc1)*(y-yc1) > r*r和x < xc1以及y < yc1。这可以通过圆圈外和相关角落的点来满足。在其他角落，您需要将第一次测试中的圆心更改为相关的圆心，并相应地更改其他两个不等式以选择圆的正确象限。

这是基本的数学。您可以对速度进行许多优化，例如四个角都是对称的（每个角都有一条关于对角线的反射对称，所有角都是相互旋转的复制品），一旦你找到了在圆圈之外的一点，您可以立即识别出许多其他点，而不是直接测试它们。

Answer 2

对于HTML5 Canvas，您应该使用所需的不透明度绘制图像，而不是使用像素数据手动设置不透明度，然后使用destination-in globalCompositeOperation将其拍到图像上。更轻松，更快捷。

（或预先填充所需的区域，然后在向其绘制图像时使用source-in合成模式。）

或者，创建一个包含所需形状的路径use clip() to force your drawImage to fit within the path。

检查点是否在曲线之外

2 个答案: