有没有人知道使用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>
答案 0 :(得分:18)
定期清除不起作用,因为paper.js维护一个场景图并负责为您绘制它。如果要清除在项目中创建的所有项目,则需要删除实际项目:
只要您的所有商品都在一个图层中, project.activeLayer.removeChildren();
就会有效。还有project.clear()
删除所有内容,包括图层。
答案 1 :(得分:3)
如果有人来寻找Javascript经验不足的答案,我举了一个简单的例子:
1)正如JürgLehni所提到的,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%;
}
答案 2 :(得分: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();
答案 3 :(得分:0)
您可以使用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();
}