Paperjs 光栅化 activeLayer 与视图边界答案

【问题标题】：Paperjs rasterize activeLayer with bounds from viewPaperjs 光栅化 activeLayer 与视图边界
【发布时间】：2014-12-08 23:34:01
【问题描述】：

我有这个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;

你们知道如何解决这个问题吗？

非常感谢您的任何帮助。

【问题讨论】：

标签： javascript canvas paperjs todataurl

【解决方案1】：

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

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

这是更新后的fiddle

【讨论】：