Question

我需要使用PaperJS构建具有擦除功能的绘图板。绘图板需要有背景图像，人们可以在画布上绘图或删除现有路径。

//erase function 
function onMouseDown(event) {   
    path = new paper.Path();
    path.strokeColor = 'red';
    path.strokeWidth =  10;
    path.strokeCap = 'round';
    path.blendMode = 'destination-out';
}       

function onMouseDrag(event) {        
    path.add(event.point);                 
}

//setup background image 
var bgimage = "./cat.jpg"; 
var raster = new paper.Raster({
    source: bgimage, 
    position: paper.view.center
});

使用此方法的问题是背景图像也将被删除。

删除结果：http://i.stack.imgur.com/0D4TU.png
JSFiddle：https://jsfiddle.net/9kaffsg4/2/

有没有办法擦除现有路径，而不删除背景图像？

Answer 1

如果您的背景图片没有变化：您可以将<img>放在<canvas>下方吗？

如果您希望能够编辑图像：您可以每帧重绘图像，然后重绘图像（单独处理）。

Answer 2

我通过使用两个画布解决了这个问题（一个用于基本绘图功能，另一个用于背景画布）。然后重叠两个画布。

Answer 3

我扩展了您的初始代码示例，以便我可以演示使用图层作为解决方案。基本上，创建了三个层。它们按您在其中看到的顺序创建（1：background，2：foreground，3：clearBtn）。之前创建的图层是可视的＆＃34;在＆＃34;下面。稍后创建的图层。

通过这种方式，您可以将静态光栅图形保留在最底层（背景）上，创建＆＃34;橡皮擦＆＃34;中间层（前景）上的路径，你可以删除/清除这些＆＃34;橡皮擦＆＃34;通过点击＆＃34;清除＆＃34;按钮。清除按钮位于最顶层，因此它不会被＆＃34;橡皮擦路径＆＃34;遮挡。我刚刚添加了清除按钮，以强调图层提供的附加组织控制。

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.12/paper.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style type="text/css">
    canvas {
      border: 1px solid #000;
    }
  </style>
  <script type="text/paperscript" canvas="myCanvas">
  var layers = {
    "background": new Layer(),
    "foreground": new Layer(),
    "clearBtn": new Layer()
  };
  
  var paths = [];
  
  //erase function 
  function onMouseDown(event) { 
      layers.foreground.activate();
      path = new paper.Path();
      path.strokeColor = 'red';
      path.strokeWidth =  10;
      path.strokeCap = 'round';
      path.blendMode = 'destination-out';
      paths.push(path);
  }       
  
  function onMouseDrag(event) {  
      layers.foreground.activate();
      path.add(event.point); 
  }
  
  //setup background image 
  layers.background.activate();
  var bgimage = "http://placehold.it/300x150"; 
  var raster = new paper.Raster({
      source: bgimage, 
      position: paper.view.center
  });  
  
  // Build a "clear button"
  // Clicking this will remove all children
  // from the foreground layer
  layers.clearBtn.activate();
  var clearBtn = new Path.Rectangle({
    point: new Point(250, 2),
    size: new Size(50, 20),
    style: { 
      fillColor: 'white',
      strokeColor: 'black'
    }
  });
  var txt = new PointText({
    point: clearBtn.position + new Point(0,4),
    content: 'Clear',
    justification: 'center'
  });
  var clearBtnGrp = new Group({
    children: [clearBtn, txt]
  });
  clearBtnGrp.on('mousedown', function () {
    for ( var i = 0; i < paths.length; i++ ) {
      paths[i].remove();
    }
  });
  </script>
</head>
<body>
  <canvas id="myCanvas"></canvas>
</body>
</html>

＆＃13;

编辑我对此进行了更新以缓存数组中的路径，因为上一个示例并不总是清除所有图层子项。

使用橡皮擦时保留背景图像

3 个答案: