javascript Paper.js 中的画布清除
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19054798/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Canvas Clear in Paper.js
提问by craig
Does anyone know the best way to clear a canvas using paper.js I tried the regular canvas clearing methods but they do not seem to work with paper.js
有谁知道使用 paper.js 清除画布的最佳方法我尝试了常规的画布清除方法，但它们似乎不适用于 paper.js
Html
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
Javascript/论文
<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>
回答by Jürg Lehni
Regular clearing does not work because paper.js maintains a scene graph and takes care of drawing it for you. If you want to clear all items that you have created in a project, you need to delete the actual items:
定期清除不起作用，因为 paper.js 维护一个场景图并负责为您绘制它。如果要清除在项目中创建的所有项，则需要删除实际项：
project.activeLayer.removeChildren();works as long as all your items are inside one layer. There is also project.clear()which removes everything, including the layer.
project.activeLayer.removeChildren();只要您的所有项目都在一层内，就可以工作。还有project.clear()删除所有内容，包括图层。
回答by rohan-patel
In case someone comes looking for an answer with little experience in Javascript, I made a simple example :
如果有人来寻找几乎没有 Javascript 经验的答案，我做了一个简单的例子：
1) As Jürg Lehni mentioned project.activeLayer.removeChildren();can be used to remove all items inside active layer.
2) To reflect the cleaning you have to call paper.view.draw();.
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 :
CSS :
html,
body {
margin: 0;
overflow: hidden;
height: 100%;
}
/* Scale canvas with resize attribute to full size */
canvas[resize] {
width: 58%;
height: 100%;
}
回答by Ishara Madawa
you can use project.activeLayer.removeChildren();for clear entire layer,
or you can add your new paths to group and remove all childrens in group
您可以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();
}
回答by Rob Hardy
c.width = c.width; ctx.clearRect(0,0,c.width,c.height);should be a good catchall if you've not tried it.
c.width = c.width; ctx.clearRect(0,0,c.width,c.height);如果你还没有尝试过，它应该是一个很好的包罗万象的东西。
Beware however - setting canvas width will reset the canvas state including any applied transforms.
但是请注意 - 设置画布宽度将重置画布状态，包括任何应用的变换。
A quick google took me to https://groups.google.com/forum/#!topic/paperjs/orL7YwBdZq4which specifies another (more paper.js specific) solution:
project.activeLayer.removeChildren();
一个快速的谷歌把我带到https://groups.google.com/forum/#!topic/paperjs/orL7YwBdZq4它指定了另一个（更具体的 paper.js）解决方案：
project.activeLayer.removeChildren();
