Paper.js - 区域外路径的剪切不透明度

Question

我有一个简单的矩形，它为添加到 canvas 的所有形状形成裁剪区域，效果很好：

var area = new paper.Rectangle(
    100, 100, 300, 120
);

var path = new paper.Path.Rectangle(area);

group.addChild(path);
group.clipped = true;

我想要实现的不是隐藏落在该区域之外的路径，而是以轻微的不透明度显示它们，例如：

在此先感谢您的帮助和建议。

Answer 1

这不是裁剪那样简单的方法，你可以使用相交的方法来完成。请尝试此代码。

// SET INITIAL
var area = new paper.Path.Rectangle(100, 100, 300, 220);
area.fillColor = 'yellow'
area.opacity = 0.2
var circle1 = new paper.Path.Circle({
    center:[150, 150],
    radius: 100,
    fillColor: 'red'
})

// OPACITY CLIPPING
var circle2 = circle1.intersect(area)
circle1.opacity = 0.2

Paper.js - 区域外路径的剪切不透明度

Paper.js - Clipping opacity for paths outside of area

html

javascript

paperjs