Question

我有这个fiddle，我希望在那里实现一些画布视图的光栅化缩略图。一切正常，直到某些路径溢出视图边界，并且那些溢出的部分也会导出到缩略图中，这是不希望的。只有在画布上可见的部分才能以拇指显示。我已经尝试过clipMask，但遗憾的是没有成功。

html代码

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

论文代码

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

Paperjs使用视图中的边界栅格化activeLayer

1 个答案: