나누기/하위 캔버스

Question

XML 파일에 좌표가 거의 없습니다. 그것들은 선, 원 및 호입니다. 나는 데이터 구조에서 그들을 읽고 캔버스에 그려려고 노력하고있다. 내가 알아 내려고하는 것은 캔버스를 하위 캔버스로 나누는 방법입니다. 예컨대 내 캔버스가 무엇을 달성하려고하는 말의 1 개 캔버스와 Y1 = 250 = 200 픽셀에서 시작하여 폭과 200 픽셀의 높이의 가상 창을 만드는 방법입니다

<canvas id="myCanvas" width="800" height="600" role="img"> 
     Your browser does not support the canvas element. 
    </canvas> 

가정하자. 그리고 그 상자에만있는 이미지를 그립니다.

저는 상상의 상자를 기반으로 이미지의 크기를 줄 였지만 그 상상의 상자에서만 그리는 개념을 둘러 볼 수는 없습니다. 점수는 무작위로 배분됩니다. 전체를 이동하여

var canvas = document.getElementById('myCanvas'); 
var ctx = canvas.getContext('2d'); 

/// for simplicity, save current settings 
ctx.save(); 

/// move coordinate system to the upper left corner of isolated region 
ctx.translate(offsetX, offsetY); 

/// create a clipping mask by using a simple rectangle 
ctx.beginPath(); 
ctx.rect(0, 0, width, height); 

/// define the last path (rectangle) as clipping mask 
ctx.clip(); 

/// ... draw other things into this region from offset 0... 

ctx.restore(); /// done and back to full canvas 

:

Answer 1

다른이를 달성 할 수있는 방법하지만 아마 당신은이 상황에서 가장 유용한 찾을 수있는 하나 번역과 클립 마스크를 사용하는 것입니다있다 좌표계를 지역의 왼쪽 위 모서리에 맞출 수 있습니다. 새 분리 된 영역을 기준으로 오프셋을 사용할 수 있습니다. 클립 마스크를 추가하면 영역 밖으로 그려진 내용이 잘립니다.

각 지역마다 하나씩이 작업을 수행해야합니다.

또 다른 방법은 모든 도면 점에 오프셋을 추가하는 것입니다. 예를 들어 offsetX/Y이 영역의 상부 좌측 코너

ctx.lineTo(x + offsetX, y + offsetY); 

.

그러나 클리핑이 필요한 경우 이미지가 커질 수 있으므로 대상 영역을 정의 할 수는 없지만 보간법 등을 사용하여 자르기해야하는 선 및 기타 경로 작업에 대해서는 큰 문제가되지 않습니다.

Fiddle (업데이트 링크)

• 데모는 캔버스와 컨텍스트를 설정 한 다음 붉은 색으로 전체를 채우고 :

  다음은이 보여주는 라이브 데모입니다.

• Then 클리핑 및 마스크를 설정하고 변환합니다.
• "가상 캔버스"가 있고 다른 그래픽은 손상되지 않았습니다.
• 이제 채우기 작업은 파란색이지만 파란색으로 채 웁니다. 이제 우리는 심지어 크기가 실제 지역 밖에서 만이 지역이 가득 볼 수 있습니다
• 그리고 우리는 것이다 클립을 제거하고 우리가 전체 모드