Paperjs栅格化activeLayer从视图边界

我有这fiddle，我想实现画布视图的光栅缩略图。一切正常，直到某些路径溢出视图边界，那些溢出的部分也会导出到缩略图中，这是不需要的。只有在画布上可见的部分应该在拇指中可见。我已经尝试过clipMask，不幸的是没有成功。Paperjs栅格化activeLayer从视图边界

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;

难道你们有什么想法，这可怎么解决呢？

非常感谢您的帮助。

来源

2014-12-08 ma2s

好的，所以我最终找到了答案。需要使用getSubRaster函数来裁剪出我需要的子代。为了找出有多少像素从顶部或左侧溢出，我使用了project.activeLayer.bounds.x和.y，它们是负数，当从视图溢出时。

如果有人知道更优雅的解决方案，请让我知道。

这里是更新的fiddle

来源

2014-12-08 15:34:01 ma2s

Paperjs栅格化activeLayer从视图边界

回答

相关问题