Paperjs는 뷰에서 경계가있는 activeLayer를 래스터 화합니다.

Question

저는 fiddle으로 캔버스 뷰의 래스터 화 된 미리보기 이미지를 얻고 싶습니다. 일부 경로가보기 범위를 오버플로하고 오버플로 된 부분이 미리보기 이미지로 내보낼 때까지 모든 것이 정상적으로 작동하므로 원하는 것은 아닙니다. 캔버스에 표시된 부분 만 엄지 손가락으로 볼 수 있어야합니다. 불행히도 clipMask로 실험했는데 성공하지 못했습니다.

HTML 코드

<canvas id="c"></canvas> 
<img id="thumb" /> 

paperscript 코드

paper.install(window); 
var canvas = document.getElementById('c'); 
paper.setup(canvas); 

var style = { 
    fillColor : 'black' 
}; 
var objects = new Group(); 
var background = new Path.Rectangle(view.bounds); 
background.fillColor = 'red'; 

var rect = new Path.Rectangle(-10, 20 , 40, 50); 
rect.fillColor = style; 
objects.addChild(rect); 

var rect = new Path.Rectangle(60, -20 , 40, 50); 
rect.fillColor = style; 
objects.addChild(rect); 

var rect = new Path.Rectangle(195, 20 , 40, 50); 
rect.fillColor = style; 
objects.addChild(rect); 

var rect = new Path.Rectangle(60, 195 , 40, 50); 
rect.fillColor = style; 
objects.addChild(rect); 

objects.bringToFront(); 
view.draw(); 

var data = project.activeLayer.rasterize().toDataURL(); 
var img = document.getElementById('thumb'); 
img.src = data; 

는 어떻게이 해결할 수 너희들이 어떤 생각을 가지고 있습니까?

도움 주셔서 대단히 감사합니다.

Answer 1

좋아요, 그래서 결국 알아 냈습니다. getSubRaster 함수를 사용하여 필요한 하위 래스터를 잘라내야했습니다. 위쪽이나 왼쪽에서 얼마나 많은 픽셀이 넘쳤는지 확인하려면 project.activeLayer.bounds.x와 .y를 사용했습니다. 이는 음수이며보기에서 넘칠 때 사용됩니다.

누군가보다 세련된 해결책을 알고 있다면 알려 주시기 바랍니다.

업데이트 된 내용 fiddle