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