포인트가 곡선 바깥에 있는지 확인하십시오.

Question

죄송합니다. 수학 포럼에 소속되어 있으면 죄송합니다. HTML5 캔버스 요소 내에서 둥근 모서리가 둥글게 보이도록 이미지를 둥글게했습니다. 내가 _roundedCornersColour의 모든 인스턴스를 대체하고 있기 때문 만 작동

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); 
       } 
      } 
     } 
    } 

가끔 이미지 자체 내에서 몇 픽셀을 교체 결국 : 나는 다음과 같은 코드가 있습니다. 고등학교 수학은 약간 녹슬었고 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 캔버스의 경우 픽셀 데이터를 사용하여 수동으로 불투명도를 설정하는 대신 원하는 불투명도로 이미지를 그린 다음 destination-inglobalCompositeOperation을 사용하여 이미지 위로 가져와야합니다. 둘 다 더 쉽고 빠릅니다.

(또는 사전에 작성하여 원하는 영역을 당신이 그것을 당신의 이미지를 그릴 때 다음 source-in 합성 모드를 사용합니다.)

는 다른 방법으로, 당신이 원하는 모양과 use clip() to force your drawImage to fit within the path와 경로를 만들 수 있습니다.