Paper.js - Clipping Opazität für Pfade außerhalb des Gebiets

Question

ich ein einfaches Rechteck haben, die den Schnittbereich für alle Formen bildet auf der Leinwand gegeben, die große arbeitet:

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

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

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

Was ich versuche, erreicht, wird stattdessen die Wege zu verstecken, die außerhalb dieses Bereichs fallen, werden sie mit einer leichten Trübung gezeigt, so etwas wie:

Vielen Dank im Voraus für jede Hilfe und Anregungen.

Answer 1

Dies ist nicht eine einfache Art wie abgeschnitten, Sie könnten es tun, indem Sie Methode Schnittpunkt verwenden. Bitte versuchen Sie diesen Code.

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