Jquery 检查点是否在曲线外

抱歉，如果这是属于数学论坛的。我在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);
                }
            }
        }
    }

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）；
//检查是否实际应用了圆角（例如，确保用户没有单击按钮然后撤消）
var bottomRight=getPixel（cornersImgData，cornersImgData.width-1，cornersImgData.height-1）；
如果（'rgb（'+topLeft[0]+'、'+topLeft[1]+'、'+topLeft[2]+'）===\u roundedCornersColour）||
（'rgb（'+topRight[0]+'、'+topRight[1]+'、'+topRight[2]+'）==\u roundedCornersColour）||
（'rgb（'+bottomLeft[0]+'、'+bottomLeft[1]+'、'+bottomLeft[2]+'）===_roundedCornersColour）||
（'rgb（'+bottomRight[0]+'、'+bottomRight[1]+'、'+bottomRight[2]+'）===\u roundedCornersColour））
{
对于（变量x=0；x

这是可行的，但因为我正在替换_roundedCornersColour的每个实例，所以有时会替换图像本身中的几个像素。我的高中数学有点生疏了，我想不出最好的方法来确定x和y是否落在了应该落在拐角处的地方。有人能帮忙吗

---

Joe

如果半径是

r

，那么从您的代码中我可以看出，左上角为圆弧的圆的中心位于

（xc1，yc1）=（r，r）

。您可以类似地计算出其他三个圆心的坐标

（xc2，yc2）

，

（xc3，yc3）

和

（xc4，yc4）

然后在第一个拐角附近，您可以测试

（x-xc1）*（x-xc1）+（y-yc1）*（y-yc1）>r*r

和

x

和

y

。圆外和相关角上的点可以满足这一要求。在其他角点，您需要将第一次测试中的圆心更改为相关圆心，并适当更改其他两个不等式以选择正确的圆象限

---

这是基础数学。有许多优化可以应用于速度，例如四个角都是对称的（每个角都有关于对角线的反射对称性，所有角都是彼此的旋转副本），一旦你在圆圈外找到一个点，你就可以立即识别出许多其他也在圆圈外的点，而无需直接测试它们。

对于HTML5画布，而不是使用像素数据手动设置不透明度，您应该使用所需的不透明度绘制图像，然后使用中的

目标将其粘贴到图像上。既容易又快

（或者在绘制图像时，先预填充所需区域，然后在

合成模式下使用

source。）

或者，创建一条具有所需形状的路径。
p.S.我知道拐角的半径