2

我有这个小提琴，我想在其中实现某种画布视图的光栅化缩略图。一切正常，直到某些路径溢出视图边界并且那些溢出的部分也被导出到缩略图中，这是不希望的。只有在画布上可见的部分才能在拇指中可见。我已经尝试过 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;

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

非常感谢您提供的任何帮助。

4

1 回答 1

0

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

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

这是一个更新的小提琴

于 2014-12-08T15:34:01.123 回答