Question

我已经检查过，类似的问题已被提出，但已经部分回答或根本没有回答。

我需要使用PaperJS构建一个橡皮擦工具，它可以擦除现有路径，而不会删除下面的图像。

因此图像可以驻留在第一层，而路径可以驻留在第二层。请参阅随附的JSFiddle：jsfiddle，其中显示了两次尝试：

＆＃13;

paper.install(window);
var canvas = document.getElementById("myCanvas");

paper.setup(canvas);

//the yellow background (can also be background image) which should NOT be erased

var rect = new Rectangle(new Point(0, 0), new Point(paper.view.size.width, paper.view.size.height));
var rectPath = new Path.Rectangle(rect);
rectPath.fillColor = 'yellow';

//first attempt to erase the black line

var first = paper.project.activeLayer;

var second = new Layer();

var from = new Point(50, 0);
var to = new Point(50, 100);
var path1 = new Path.Line(from, to);
path1.strokeColor = 'black';
path1.strokeWidth = 40;

var from = new Point(0, 50);
var to = new Point(100, 50);
var path2 = new Path.Line(from, to);
path2.strokeColor = 'green'; //I've tried other colors as well, this seems irrelevant
path2.strokeWidth = 40;
path2.blendMode = 'destination-out';

//So I saw this 

var path = new CompoundPath({
    children: [
        new Path.Circle({
            center: new Point(200, 50),
            radius: 30
        }),
        new Path.Circle({
            center: new Point(200, 50),
            radius: 10
        })
    ],
    fillColor: 'black',
    selected: true
});

//second attempt
//I need to actually erase with one line through lots of paths, not sure how to implement it with this

var path = new CompoundPath({
    children: [
        new Path.Line({
            from: [350, 0],
    		to: [350, 100],
            strokeWidth: 30,
            strokeColor: 'green' //irrelevant it seems
        }),
        new Path.Line({
            from: [300, 50],
    		to: [400, 50],
            strokeWidth: 30,
            strokeColor: 'white' //irrelevant it seems
        })
    ],
    strokeColor: 'black',
    selected: true, 
    strokeWidth: 20
});

paper.view.draw();

＆＃13;

<script src="http://tmantechblog.com/testpaperjs/js/libs/paper.js"></script>

<canvas id="myCanvas" height='500' width='500'>This does not support HTML5 canvas</canvas>

＆＃13;

第一次尝试尝试使用blendMode =＆＃39; destination-out＆＃39;但它留下了白色标记而不是透明路径
第二个实现尝试模仿在那里提供的compoundPath示例，但是路径交叉的地方，不会产生任何漏洞。此外，我不确定如何使用它来跨多个路径实现橡皮擦。

任何有关如何进行的建议将不胜感激。否则，我必须将整个项目移植到基本的HTML 5画布或FabricJS或类似的东西。

用paperjs实现橡皮擦

0 个答案: