14

有谁知道使用 paper.js 清除画布的最佳方法我尝试了常规的画布清除方法，但它们似乎不适用于 paper.js

html

<canvas id="myCanvas" style="background:url(images/graphpaper.jpg); background-repeat:no-repeat" height="400px" width="400px;"></canvas>

<button class="btn btn-default button" id="clearcanvas" onClick="clearcanvas();"     type="button">Clear</button>

Javascript/Paperscript

<script type="text/paperscript" canvas="myCanvas">
// Create a Paper.js Path to draw a line into it:
tool.minDistance = 5;

var path;
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

function onMouseDown(event) {
// Create a new path and give it a stroke color:
path = new Path();
path.strokeColor = 'red';
path.strokeWidth= 3;
path.opacity="0.4";

// Add a segment to the path where
// you clicked:
path.add(event.point, event.point);
}

function onMouseDrag(event) {
// Every drag event, add a segment
// to the path at the position of the mouse:
path.add(event.point, event.point);

}


</script>
4

4 回答 4

22

定期清除不起作用，因为 paper.js 维护一个场景图并负责为您绘制它。如果要清除项目中创建的所有项目，则需要删除实际项目：

project.activeLayer.removeChildren();只要您的所有物品都在一层内，它就可以工作。还有project.clear()一个删除所有内容，包括图层。

于 2013-10-10T10:43:15.473 回答
4

如果有人在 Javascript 方面缺乏经验的情况下寻找答案，我做了一个简单的例子：

1) 正如 Jürg Lehni 所提到project.activeLayer.removeChildren();的，可用于移除活动层内的所有项目。2）要反映你必须打电话的清洁paper.view.draw();。

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Circles</title>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="paper-full.js"></script>
        <script type="text/paperscript" canvas="canvas">

function onMouseUp(event) {
   var circle = new Path.Circle({
    center: event.middlePoint,
    radius: event.delta.length / 2
});
circle.strokeColor = 'black';
circle.fillColor = 'white';

}

</script>

<script type="text/javascript">
    paper.install(window);
    window.onload = function () {
        paper.setup('canvas');
         document.getElementById('reset').onclick = function(){

            paper.project.activeLayer.removeChildren();
            paper.view.draw();

        } 

    };

  </script>      
</head>
<body>
    <canvas style="background-color: #eeeeed" id="canvas" resize></canvas> 
    <input id="reset" type="button" value="Reset"/>
</body>
</html>

CSS：

html,
body {
   margin: 0;
   overflow: hidden;
   height: 100%;
}

/* Scale canvas with resize attribute to full size */
canvas[resize] {
  width: 58%;
  height: 100%;
}
于 2015-05-08T08:13:41.387 回答
1

c.width = c.width; ctx.clearRect(0,0,c.width,c.height);如果您没有尝试过，应该是一个很好的包罗万象。

但请注意 - 设置画布宽度将重置画布状态，包括任何应用的变换。

一个快速的谷歌将我带到了https://groups.google.com/forum/#!topic/paperjs/orL7YwBdZq4，它指定了另一个（更具体的 paper.js）解决方案： project.activeLayer.removeChildren();

于 2013-09-27T15:52:10.673 回答
1

您可以使用project.activeLayer.removeChildren();清除整个图层，或者您可以添加新路径来分组并删除组中的所有子项

var myPath;
var group = new Group();

function onMouseDown(event) {
    myPath = new Path();
}

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

function onMouseUp(event) {

    var myCircle = new Path.Circle({
        center: event.point,
        radius: 10
    });
    myCircle.strokeColor = 'black';
    myCircle.fillColor = 'red';
    group.addChild(myCircle);
}


    // connect your undo function and button
    document.getElementById('clearbutton').onclick = btnClear;

    function btnClear(){
        group.removeChildren();
    }
于 2019-03-06T08:19:24.033 回答