텍스트 세닝은 일반적으로 지도 관련 요구 사항을 만들 때 사용됩니다. 또한 회사의 지도 엔진에 대한 기능을 구현할 때 이 방법을 구현했으며 일반 캔버스에서는 지도의 개념을 도입하지 않습니다.
효과 충돌 감지캔버스에서 텍스트가 차지하는 범위를 계산합니다.
// 텍스트에 필요한 너비를 계산합니다. var p = { x: 10, y: 10, name: test text}; var Measure = ctx.measureText(p.name) // 캔버스에서 텍스트가 차지하는 최대 공간을 찾습니다. 드로잉 보드 y 좌표 var maxX = Measure.width + px; // 캔버스 드로잉 보드에서 텍스트가 차지하는 최대 y 좌표를 찾습니다. // 캔버스는 텍스트 너비만 계산할 수 있고 텍스트 높이는 계산할 수 없습니다. 따라서 대략적인 계산을 위해 텍스트 너비를 텍스트 수로 나눈 값을 사용하면 됩니다. var maxY = Measure.width / p.name.length + py var min = { x: px, y: py }; x: maxX, y: maxY }; // 경계는 캔버스의 텍스트가 차지하는 범위입니다. // 점 좌표를 최소 범위로 할 때 textAlign과 textBaseline을 다음과 같이 설정하는 것이 더 정확할 것입니다. // 다른 위치에 표시되는 경우 범위의 최대 및 최소 지점도 조정해야 합니다. // ctx.textAlign = left; // ctx.textBaseline = top;varbounds = new Bounds(min, max);경계 범위 객체
/** * 범위 객체 정의 */function Bounds(min, max) { this.min = min; this.max = max;}/** * 범위가 다른 범위와 교차하는지 확인 */Bounds.prototype.intersects = function(bounds) { var min = this.min, max = this.max, min2 =bounds.min, max2 =bounds.max, xIntersects = max2.x >= min.x && min2.x <= max.x, yIntersects = max2.y >= min.y && min2.y <= max.y; return xIntersects && yIntersects;};발각
// 각 그리기 전에 그려진 텍스트와 범위 교차 감지를 수행합니다. // 교차점이 발견되면 현재 텍스트 그리기를 중단하고, 그렇지 않으면 그려진 텍스트 목록을 그려서 저장합니다. for (var index in _textBounds) { // 모두 루프 그려진 텍스트 범위가 현재 텍스트 범위와 교차하는지 확인하기 위해 테스트됩니다. 교차점이 있으면 충돌하고 텍스트를 건너뛴다는 의미입니다. ) { 반품; }}_textBounds.push(bounds);ctx.fillStyle = red;ctx.textAlign = left;ctx.textBaseline = top;ctx.fillText(p.name, px, py); 예, 코드 주소예시 주소: 예시
자세한 내용은 전체 코드를 참조하세요. Github 주소
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.