jQuery 이미지 맵 플러그인에 반전 표시를 추가 하시겠습니까?

Question

jQuery Map Hilighter 플러그인을 사용하고 있지만 각 영역에 어두운 패치를 희미하게 사용하는 대신이 부분을 뒤집어서 주변 지역을 어둡게 만들고 끌려 진 영역을 같은 색상으로 유지하고 싶습니다.

나는 플러그인의 코드를 살펴 봤는데 캔버스 요소 (그리고 필자가 추측 한 MS 등가물)를 사용하여 강조 표시를 사용하는 것으로 보입니다.

<canvas style="border: 0pt none ; padding: 0pt; width: 960px; height: 593px; position: absolute; left: 0pt; top: 0pt; opacity: 1;" height="593" width="960"></canvas> 

내가 가져가 할 수있는 요소의 모양을 지정 아무것도 볼 수 없습니다 : 그냥이를 보여줍니다 위의 데모에 - 그러나 방화범 정확히 모양이 정의되는 경우 매우 출간되지 않습니다. 요소

add_shape_to = function(canvas, shape, coords, options) { 
    var i, context = canvas.getContext('2d'); 
    context.beginPath(); 
    if(shape == 'rect') { 
     context.rect(coords[0], coords[1], coords[2] - coords[0], coords[3] - coords[1]); 
    } else if(shape == 'poly') { 
     context.moveTo(coords[0], coords[1]); 
     for(i=2; i < coords.length; i+=2) { 
      context.lineTo(coords[i], coords[i+1]); 
     } 
    } else if(shape == 'circ') { 
     context.arc(coords[0], coords[1], coords[2], 0, Math.PI * 2, false); 
    } 
    context.closePath(); 
    if(options.fill) { 
     context.fillStyle = css3color(options.fillColor, options.fillOpacity); 
     context.fill(); 
    } 
    if(options.stroke) { 
     context.strokeStyle = css3color(options.strokeColor, options.strokeOpacity); 
     context.lineWidth = options.strokeWidth; 
     context.stroke(); 
    } 
    if(options.fade) { 
     fader(canvas, 0); 
    } 
}; 

Answer 1

형상이 HTML 코드의 <map> 요소 내부 <area> 요소로 정의된다 : 이는 형상을 만드는 것으로 보이는 JS의 일부이다.

귀하의 질문에 간단한 대답은 기본값에서 context.beginPath(); 줄 끝이

if (options.inverseFill) { 
    context.rect(0,0, canvas.width,canvas.height); 
    } 

처럼 다음 옵션을 뭔가를 추가하는 것입니다 있는지 확인하는 것이 위해 다음 inverseFill: true,하고 이미지 맵의 모든 지역 동일한 시계 방향으로 선언됩니다.

어두운 패치를 정의하는 경로에 대한 추가 하위 경로를 정의하면 채우면 중복 된 영역 (즉, 원본 패치)은 부분 경로의 감기 수만큼 취소됩니다 취소하여 원하는 반전 된 동작이 발생합니다.

영역 다각형 정의가 양방향으로 회전 할 수 있으면 다소 복잡해집니다. 예를 들어, 미국 맵의 원래 MapHilight 데모에 대해 위의 작업을 수행하면 모양이 올바른 시계 방향으로 정의되어 있기 때문에 일부 상태 만 올바르게 작동합니다. 나머지는 어둡게 유지됩니다. 권선 번호가 잘못된 기호이므로 어두운 상태로 유지됩니다. .

이미지 맵 정의를 완벽하게 제어 할 수 있다면 저의 의견을 그대로두고 모든 영역이 같은 방향으로 향하게하십시오 (즉, 작동하지 않는 영역마다 좌표 목록을 뒤집을 수 있습니다) .

그렇다면 초기화 할 때 각 모양에 대해 감기 수를 미리 계산해야합니다. 이것은 아마도 점 목록을 검토하고 atan2를 사용하여 계산 된 두 개의 연속 세그먼트 사이의 각도를 합산하는 것과 관련이 있습니다. 그런 다음 add_shape_to 함수에서 캔버스의 네 모퉁이를 올바른 방향으로 탐색합니다.

어쨌든, 나는 희망이 도움이

업데이트 : 이전에 당신의 코멘트를 보지 못했다

죄송합니다. 은 원형 영역의 add_shape_to 기능에서, 그 다음, 전후 서브 패스를 폐쇄 상단에 세차게 적색 선을 피하기 위해 정확한 위치로 이동

} else if(shape == 'circ') { 
    context.closePath(); 
    context.moveTo(coords[0] + coords[2], coords[1]); 
    context.arc(coords[0], coords[1], coords[2], 0, Math.PI * 2, true); 
    context.closePath(); 
    } 

으로 } else if(shape == 'circ') { 부품을 교체하고, 그런 다음 반 시계 방향 매개 변수를 바깥 사각형과 일치하도록 true으로 변경합니다. 필요에 따라 수정하십시오.