javascript - 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

这不是剪切的简单方法，您可以使用方法 intersect 来完成。 请尝试此代码。

// 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