클라이언트 측 JavaScript를 사용하여 SVG 텍스트 요소에 대한 충돌 감지를 구현하려고합니다. 히트 테스트는 텍스트의 글리프가 다른 텍스트 요소의 글리프와 겹치는 지 확인해야합니다. getBBox 및 getExtentOfChar은 정확하지 않은 것부터 사용자 지정 솔루션이 필요합니다.SVG 텍스트 히트 테스트
첫 번째 방법은 요소의 각 좌표/픽셀의 색상을 가져 와서 수동으로 히트 테스트를 수행하는 것이지만 좌표의 색상을 가져올 수 없으므로 작동하지 않습니다. 그것은 픽셀 색상을 얻으려면 추가 캔버스가 필요합니다 -> 끔찍한 해결.
이제 히트 테스트를 위해 텍스트 또는 글리프를 다각형으로 변환하려고합니다. 가능한가? 또는 글리프 기반 히트 테스트에 대한 다른 접근 방식을 가지고 있습니까?
안부
픽셀 기반의 히트 테스트에 관해서는- 당신이 HTML5 캔버스로 전환 할 경우, 다음이 가능하게 될 것이다. 여러 프로젝트가 SVG에서 Canvas로 쉽게 전환 할 수 있습니다. fabric.js. See a comparison table here.
다각형 기반 접근법은 가능하지만 어렵습니다. 텍스트 또는 글리프를 일부 도구 (예 : Inkscape의 텍스트 대 패스)를 사용하여 다각형 (패스)으로 변환 할 수 있습니다. 그리고 계산이있을 것입니다. 모든 텍스트에 대한 일반적인 솔루션을 만들기 위해서는 많은 작업이 필요합니다. 그러나 텍스트가 변경되지 않으면 경로를 사용하여 수동으로 텍스트를 그리는 것이 빠르고 간단해질 수 있습니다.
정말 통증과 크로스 브라우저 문제에 직면 해 있습니다. 글꼴 맞춤 경로 렌더링을 수행하여 총 텍스트 길이를 신뢰할 수 있고 일관성있게 만들었습니다. 글리프 타격에 대해 생각하고 싶지 않습니다.
예를 들어, firefox (3.6 이상) 및 iirc 또한 오페라의 일부 버전에서는 텍스트를 보유하는 상위 요소의 크기를 조절하고 텍스트의 배율을 반올림하여 텍스트 크기를 조절할 때 크기를 조절할 때 약간의 반올림 오류가 발생합니다 , 글자 간격은 규모가없는 경우와 약간 다를 것입니다. (각 문자는 짝수 등으로 시작해야하기 때문에 10000과 같이 상류층과 하류층을 곱하여 문제를 해결할 수 있지만 다른 이야기입니다)
텍스트와 비교하여 경로를 사용하면 성능에 큰 영향을 미칩니다. 눈에 띄는. 캔버스에서 애니메이션 패닝 또는 확대/축소를 수행하는 경우 애니메이션 중에는 순수 텍스트 요소로 전환하고 정적 인 경우에는 경로 렌더링을 사용하여 정확성을 높이십시오.
svg-fonts를 운좋게 경로로 변환하는 것은 매우 쉽습니다. 이것은 일반 텍스트이며 path-element와 정확히 동일한 형식을 사용합니다. (글꼴 임베디드 - 라이센스에주의하십시오! 사용자 시스템에서 글꼴을 사용할 수 없으므로 파일 크기를 유지하십시오)